JS利用Intl解決前端日期和時(shí)間的格式化詳解
簡(jiǎn)介
Intl
是一個(gè)全局對(duì)象,它的主要用途就是展示國際化信息,可以將字符串,數(shù)字和日期和時(shí)間轉(zhuǎn)換為指定地區(qū)的格式。
在前端開發(fā)中,我們通常會(huì)使用第三方庫來處理日期和數(shù)字的格式化,比如 numeral、dayjs、date-fns 等庫,這些庫包含了許多的功能,如果我們?cè)陧?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 中常用的有:
值 | 含義 |
---|---|
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
。
unit
:unit
的格式中使用的單位,可能的值是核心單位標(biāo)識(shí)符,如UTS #35,第 2 部分,第 6 節(jié)中所定義。從整個(gè)列表中選擇了一部分單元用于 ECMAScript。一對(duì)簡(jiǎn)單單位 -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
對(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í)制) 值可以為:h11
、h12
、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 的格式為 .72
:小數(shù)部分表示為 2 位數(shù)字。為 例如 .736 的格式為 .733
:小數(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)文章
webpack實(shí)現(xiàn)熱更新(實(shí)施同步刷新)
本篇文章主要介紹了webpack實(shí)現(xiàn)熱更新(實(shí)施同步刷新),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07基于JS實(shí)現(xiàn)前端壓縮上傳圖片的實(shí)例代碼
這篇文章主要介紹了基于JS實(shí)現(xiàn)前端壓縮上傳圖片的實(shí)例代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05uni-app?微信小程序授權(quán)登錄的實(shí)現(xiàn)步驟
本文主要介紹了uni-app?微信小程序授權(quán)登錄的實(shí)現(xiàn)步驟,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01JavaScript深度復(fù)制(deep clone)的實(shí)現(xiàn)方法
本文給大家介紹JavaScript深度復(fù)制(deep clone)的實(shí)現(xiàn)方法,涉及到j(luò)s深度復(fù)制相關(guān)知識(shí),本文介紹的非常詳細(xì),特此分享腳本之家平臺(tái)供大家參考2016-02-02JS動(dòng)畫效果打開、關(guān)閉層的實(shí)現(xiàn)方法
這篇文章主要介紹了JS動(dòng)畫效果打開、關(guān)閉層的實(shí)現(xiàn)方法,可實(shí)現(xiàn)js控制層從中心位置打開與關(guān)閉的功能,涉及javascript操作頁面元素的相關(guān)技巧,需要的朋友可以參考下2015-05-05JS笛卡爾積算法與多重?cái)?shù)組笛卡爾積實(shí)現(xiàn)方法示例
這篇文章主要介紹了JS笛卡爾積算法與多重?cái)?shù)組笛卡爾積實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了javascript根據(jù)對(duì)象或數(shù)組生成笛卡爾積的相關(guān)操作技巧,需要的朋友可以參考下2017-12-12