簡介

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

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

構(gòu)造

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

locales 參數(shù)

其中 locales 中常用的有：

options 參數(shù)

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

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：要使用的格式樣式，默認為 decimal。

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

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

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

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

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

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

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

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

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

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

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

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

minimumFractionDigits：最小分數(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) // 每小時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 對象能使日期和時間在特定的語言環(huán)境下格式化。

常用 options 參數(shù)

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

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

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

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

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

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

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

weekday: 工作日的表示形式?？赡艿闹禐椋?/p>

• long（例如，Thursday)
• short（例如，Thu)
• narrow（例如，）。兩個工作日可能 對于某些語言環(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: 小時的表示。可能的值為：

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

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

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

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

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

fractionalSecondDigits: 用于表示秒小數(shù)部分的位數(shù)（其他的數(shù)字將被截斷）?？赡艿闹禐椋?/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解決前端日期和時間的格式化詳解的文章就介紹到這了,更多相關(guān)JS Intl解決日期時間格式化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論