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解決日期時間格式化內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！