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

這篇“JS怎么利用Intl解決前端日期和時間的格式化”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“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小時制） 值可以為：h21、h22、h33、h34

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解決前端日期和時間的格式化”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。