欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2023年03月08日 14:44:19   作者:了不起12138同志  
Intl?是一個(gè)全局對(duì)象,它的主要用途就是展示國際化信息,可以將字符串,數(shù)字和日期和時(shí)間轉(zhuǎn)換為指定地區(qū)的格式。這篇文章就來和大家聊聊如何利用Intl解決前端日期和時(shí)間的格式化吧

簡(jiǎn)介

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

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

構(gòu)造

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

locales 參數(shù)

其中 locales 中常用的有:

含義
zh-Hant用繁體字書寫的中文
zh-Hans用簡(jiǎn)體字書寫的中文
zh-cmn-Hans-CN中文,普通話,簡(jiǎn)體,用于中國
zh-Hans-CN簡(jiǎn)體中文,用于中國大陸
zh-yue-HK中文,廣東話,香港特別行政區(qū)使用
cmn-Hans-CN簡(jiǎn)體中文,用于中國
yue-HK粵語,香港特別行政區(qū)使用
en-US美式英語 (US English)
en-GB英式英語 (British English)
ko-KR韓語
ja-JP日語

options 參數(shù)

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

Intl.NumberFormat

Intl.NumberFormat 對(duì)象能使數(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 使用簡(jiǎn)稱($100 而不是 US$100)。
  • code 使用 ISO 貨幣代碼。
  • name 使用本地化的貨幣名稱,例如 dollar

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

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

unitDisplayunit 用于格式化的單位格式化樣式,默認(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:僅在 notationcompact 時(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 對(duì)象能使日期和時(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í)制) 值可以為:h11h12、h23、h24

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

  • long(例如,Thursday)
  • short(例如,Thu)
  • narrow(例如,)。兩個(gè)工作日可能 對(duì)于某些語言環(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í)的表示??赡艿闹禐椋?/p>

  • 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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論