簡介

Intl 是一個(gè)全局對象，它的主要用途就是展示國際化信息，可以將字符串，數(shù)字和日期和時(shí)間轉(zhuǎn)換為指定地區(qū)的格式。

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

構(gòu)造

Collator，DateTimeFormat，ListFormat，NumberFormat，PluralRules，RelativeTimeFormat 是命名空間 Intl 中的構(gòu)造函數(shù)。它們接受兩個(gè)參數(shù) - locales 和 options。 locales 必須是符合 BCP 47 語言標(biāo)記 的字符串或字符串?dāng)?shù)組。

locales 參數(shù)

其中 locales 中常用的有：

options 參數(shù)

options 參數(shù)必須是一個(gè)對象，其屬性值在不同的構(gòu)造函數(shù)和方法中會(huì)有所變化。如果 options 參數(shù)未提供或者為 undefined，所有的屬性值則使用默認(rèn)的。

Intl.NumberFormat

Intl.NumberFormat 對象能使數(shù)字在特定的語言環(huán)境下格式化。

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 參數(shù)

style：要使用的格式樣式，默認(rèn)為 decimal。

• decimal 用于普通數(shù)字格式。
• currency 用于貨幣格式。
• percent 用于百分比格式。
• unit 用于單位格式。

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

currencyDisplay：如何以貨幣格式顯示貨幣?？赡艿闹凳牵?/p>

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

currencySign：在許多區(qū)域設(shè)置中，記帳格式將數(shù)字括在括號(hào)中而不是添加減號(hào)。currencySign 通過將選項(xiàng)設(shè)置為 accounting 啟用此格式。默認(rèn)為 standard。

unit：unit 的格式中使用的單位，可能的值是核心單位標(biāo)識(shí)符，如UTS #35，第 2 部分，第 6 節(jié)中所定義。從整個(gè)列表中選擇了一部分單元用于 ECMAScript。一對簡單單位 -per- 可以用組合成一個(gè)復(fù)合單位。沒有默認(rèn)值。如果是 style 為 unit，則必須指定該屬性。

unitDisplay：unit 用于格式化的單位格式化樣式，默認(rèn)為 short。

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

notation：一種顯示數(shù)值的格式。默認(rèn)為 standard。

• standard 是正常的數(shù)字格式。
• scientific：使用科學(xué)記數(shù)法表示，比如 4.5E5。
• engineering： 返回 10 的冪能夠被 3 整除的科學(xué)計(jì)數(shù)表示（如果一個(gè)數(shù)小于 1000，則表示為 123 - 123E0，如果一個(gè)數(shù)大于 1000 小于 1000000，則表示為 45100 - 45.1E3）。
• compact 是表示指數(shù)表示法的字符串，默認(rèn)使用“短”格式。

compactDisplay：僅在 notation 為 compact 時(shí)使用?？梢允?short（默認(rèn)）或 long。

maximumFractionDigits：最大分?jǐn)?shù)位數(shù)（最多保留幾位小數(shù)）

minimumFractionDigits：最小分?jǐn)?shù)位數(shù)（最少保留幾位小數(shù)）

maximumSignificantDigits：最多幾位有效數(shù)字

例子

貨幣

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) // 每小時(shí)4,522公里

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

科學(xué)縮寫

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 對象能使日期和時(shí)間在特定的語言環(huán)境下格式化。

常用 options 參數(shù)

dateStyle：調(diào)用 format() 時(shí)使用的日期格式樣式?？赡艿闹蛋ǎ?/p>

• full
• long
• medium
• short（默認(rèn)值）

timeStyle：調(diào)用 format() 時(shí)使用的時(shí)間格式樣式?？赡艿闹蛋ǎ?/p>

• full
• long
• medium
• short（默認(rèn)值）

dayPeriod: 用于“早上”、“上午”、“中午”、“n”等日期時(shí)間段的格式樣式?？赡艿闹蛋ǎ?narrow, short, long

timeZone: 時(shí)區(qū)，比如上海“Asia/Shanghai”，紐約是"America/New_York"

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

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

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

year: 年份的表示?？赡艿闹禐椋?/p>

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

month: 月份的表示?？赡艿闹禐椋?/p>

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

day: 一天的表示?？赡艿闹禐椋?/p>

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

hour: 小時(shí)的表示。可能的值為：

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

minute: 分鐘的表示?？赡艿闹禐椋?/p>

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

second: 秒的表示?？赡艿闹禐椋?/p>

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

fractionalSecondDigits: 用于表示秒小數(shù)部分的位數(shù)（其他的數(shù)字將被截?cái)啵??？赡艿闹禐椋?/p>

• 0: 小數(shù)部分全部丟棄。
• 1: 小數(shù)部分表示為 1 位數(shù)字。為 例如.736 的格式為 .7
• 2:小數(shù)部分表示為 2 位數(shù)字。為 例如 .736 的格式為 .73
• 3:小數(shù)部分表示為 3 位數(shù)字。為 例如 .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”

到此這篇關(guān)于JS利用Intl解決前端日期和時(shí)間的格式化詳解的文章就介紹到這了,更多相關(guān)JS Intl解決日期時(shí)間格式化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！