JS利用Intl解決前端日期和時間的格式化詳解

簡介

Intl 是一個全局對象，它的主要用途就是展示國際化信息，可以將字符串，數字和日期和時間轉換為指定地區的格式。

在前端開發中，我們通常會使用第三方庫來處理日期和數字的格式化，比如 numeral、dayjs、date-fns 等庫，這些庫包含瞭許多的功能，如果我們在項目中僅僅隻使用瞭格式化的功能的話其實是可以不用引入這些庫的，JavaScript 自帶的 Intl API 即可滿足格式化的需求。

構造

Collator，DateTimeFormat，ListFormat，NumberFormat，PluralRules，RelativeTimeFormat 是命名空間 Intl 中的構造函數。它們接受兩個參數 – locales 和 options。 locales 必須是符合 BCP 47 語言標記 的字符串或字符串數組。

locales 參數

其中 locales 中常用的有：

options 參數

options 參數必須是一個對象，其屬性值在不同的構造函數和方法中會有所變化。如果 options 參數未提供或者為 undefined，所有的屬性值則使用默認的。

Intl.NumberFormat

Intl.NumberFormat 對象能使數字在特定的語言環境下格式化。

const number = 123456.789

console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number))
// Expected output: "123.456,79 €"

// The Japanese yen doesn't use a minor unit
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number))
// Expected output: "￥123,457"

console.log(new Intl.NumberFormat('zh-CN', {}).format(number))
// "123,456.789"

常用 options 參數

style：要使用的格式樣式，默認為 decimal。

• decimal 用於普通數字格式。
• currency 用於貨幣格式。
• percent 用於百分比格式。
• unit 用於單位格式。

currency：用於貨幣格式的貨幣（沒有默認值，如果 style 的值是 currency 則必須提供）。可能的值是 ISO 4217 貨幣代碼，例如 CNY 代表人民幣， USD 代表美元，EUR 代表歐元，JPY 代表日元。

currencyDisplay：如何以貨幣格式顯示貨幣。可能的值是：

• symbol 使用本地化的貨幣符號，例如 €。這是默認值。
• narrowSymbol 使用簡稱（$100 而不是 US$100）。
• code 使用 ISO 貨幣代碼。
• name 使用本地化的貨幣名稱，例如 dollar。

currencySign：在許多區域設置中，記帳格式將數字括在括號中而不是添加減號。currencySign 通過將選項設置為 accounting 啟用此格式。默認為 standard。

unit：unit 的格式中使用的單位，可能的值是核心單位標識符，如UTS #35，第 2 部分，第 6 節中所定義。從整個列表中選擇瞭一部分單元用於 ECMAScript。一對簡單單位 -per- 可以用組合成一個復合單位。沒有默認值。如果是 style 為 unit，則必須指定該屬性。

unitDisplay：unit 用於格式化的單位格式化樣式，默認為 short。

• long（例如 16 litres）
• short（例如 16 l）
• narrow（例如 16l）

notation：一種顯示數值的格式。默認為 standard。

• standard 是正常的數字格式。
• scientific：使用科學記數法表示，比如 4.5E5。
• engineering： 返回 10 的冪能夠被 3 整除的科學計數表示（如果一個數小於 1000，則表示為 123 – 123E0，如果一個數大於 1000 小於 1000000，則表示為 45100 – 45.1E3）。
• compact 是表示指數表示法的字符串，默認使用“短”格式。

compactDisplay：僅在 notation 為 compact 時使用。可以是 short（默認）或 long。

maximumFractionDigits：最大分數位數（最多保留幾位小數）

minimumFractionDigits：最小分數位數（最少保留幾位小數）

maximumSignificantDigits：最多幾位有效數字

例子

貨幣

const numbers = [245, 2345234.2345, 3456]

const formatter = new Intl.NumberFormat('zh-CN', {
  style: 'currency',
  currency: 'CNY',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
})

numbers.forEach((number) => {
  console.log(formatter.format(number))
})
// ¥245.00
// ¥2,345,234.23
// ¥3,456.00

new Intl.NumberFormat('cmn-Hans-CN', {
  style: 'currency',
  currency: 'CNY',
  currencyDisplay: 'name',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
}).format(245) // 245.00人民幣

new Intl.NumberFormat('cmn-Hans-CN', {
  style: 'currency',
  currency: 'CNY',
  currencyDisplay: 'name',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
}).format(2345234.2345) // 2,345,234.23 人民幣

百分比

new Intl.NumberFormat('cmn-Hans-CN', { style: 'percent' }).format(34) // 3,400%

new Intl.NumberFormat('cmn-Hans-CN', { style: 'percent' }).format(0.34) // 34%

單位格式

new Intl.NumberFormat('cmn-Hans-CN', { style: 'unit', unit: 'kilometer-per-hour' }).format(4522) // 4,522 km/h

new Intl.NumberFormat('cmn-Hans-CN', {
  style: 'unit',
  unit: 'kilometer-per-hour',
  unitDisplay: 'long',
}).format(4522) // 每小時4,522公裡

new Intl.NumberFormat('cmn-Hans-CN', {
  style: 'unit',
  unit: 'kilometer-per-hour',
  unitDisplay: 'narrow',
}).format(4522) // 4,522km/h

科學縮寫

console.log(new Intl.NumberFormat('cmn-Hans-CN', { notation: 'scientific' }).format(452136)) // 4.521E5
console.log(new Intl.NumberFormat('cmn-Hans-CN', { notation: 'engineering' }).format(452136)) // 452.136E3
console.log(new Intl.NumberFormat('cmn-Hans-CN', { notation: 'compact' }).format(452136)) // 45萬

Intl.DateTimeFormat

Intl.DateTimeFormat 對象能使日期和時間在特定的語言環境下格式化。

常用 options 參數

dateStyle：調用 format() 時使用的日期格式樣式。可能的值包括：

• full
• long
• medium
• short（默認值）

timeStyle：調用 format() 時使用的時間格式樣式。可能的值包括：

• full
• long
• medium
• short（默認值）

dayPeriod: 用於“早上”、“上午”、“中午”、“n”等日期時間段的格式樣式。可能的值包括： narrow, short, long

timeZone: 時區，比如上海“Asia/Shanghai”，紐約是"America/New_York"

hourCycle: 要使用的小時周期（12小時制，24小時制） 值可以為：h11、h12、h23、h24

weekday: 工作日的表示形式。可能的值為：

• long（例如，Thursday)
• short（例如，Thu)
• narrow（例如，）。兩個工作日可能 對於某些語言環境具有相同的窄樣式（例如 的窄樣式也是）。TTuesdayT

year: 年份的表示。可能的值為：

• numeric（例如，2012)
• 2-digit（例如，12)

month: 月份的表示。可能的值為：

• numeric（例如，2)
• 2-digit（例如，02)
• long（例如，March)
• short（例如，Mar)
• narrow

day: 一天的表示。可能的值為：

• numeric（例如，1)
• 2-digit（例如，01)

hour: 小時的表示。可能的值為：

• numeric（例如，1)
• 2-digit（例如，01)

minute: 分鐘的表示。可能的值為：

• numeric（例如，1)
• 2-digit（例如，01)

second: 秒的表示。可能的值為：

• numeric（例如，1)
• 2-digit（例如，01)

fractionalSecondDigits: 用於表示秒小數部分的位數（其他的數字將被截斷）。可能的值為：

• 0: 小數部分全部丟棄。
• 1: 小數部分表示為 1 位數字。為 例如.736 的格式為 .7
• 2:小數部分表示為 2 位數字。為 例如 .736 的格式為 .73
• 3:小數部分表示為 3 位數字。為 例如 .736 的格式為 .736

例子

const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
console.log(new Intl.DateTimeFormat('zh-CN').format(date)); // "2012/12/20"
console.log(new Intl.DateTimeFormat('zh-CN', { 
  dateStyle: 'full', 
  timeStyle: 'long', 
  timeZone: 'Asia/Shanghai' 
}).format(date)); // “2012年12月20日星期四 GMT+8 11:00:00”
console.log(new Intl.DateTimeFormat('zh-CN', { 
  dateStyle: 'full', 
  timeStyle: 'short', 
  timeZone: 'Asia/Shanghai' 
}).format(date)); // “2012年12月20日星期四 11:00”
console.log(new Intl.DateTimeFormat('zh-CN', { 
  year: 'numeric', 
  month: '2-digit', 
  day: '2-digit' 
}).format(date)); // “2012/12/20”

到此這篇關於JS利用Intl解決前端日期和時間的格式化詳解的文章就介紹到這瞭,更多相關JS Intl解決日期時間格式化內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：

• JavaScript中Number的對象解析
• JavaScript中時間格式化新思路toLocaleString()
• Java BigDecimal類用法詳解
• java 使用BigDecimal進行貨幣金額計算的操作
• PHP中針對區域語言標記信息的操作