Vue中金額、日期格式化插件@formatjs/intl的使用及說明
Vue金額、日期格式化插件@formatjs/intl使用
vue項(xiàng)目中我們可以使用第三方比較牛的日期、金額數(shù)字格式化的插件：@formatjs/intl
這個(gè)插件的官方地址是：
https://formatjs.io/docs/intl/
更方便的是：此插件有Flutter 版本，在Flutter開發(fā)中也可以參考使用。
具體的安裝步驟：
# npm 的安裝步驟 npm i @formatjs/intl --save ? # yarn 的安裝步驟如下 yarn add @formatjs/intl ? # 上面步驟都會(huì)保存到package.json 中
簡(jiǎn)單的使用步驟方式：
# 在script 中定義 工具的實(shí)例
# 以格式化金額的方式為例子
const intl = new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'RMB' })
?
# 更多的方式可以參考官方的鏈接進(jìn)行了解。
var value = 1000;
intl.format(value)
?
# 格式化出來的結(jié)果數(shù)據(jù)樣式為： RMB 1,000.00Intl.NumberFormat用于數(shù)字計(jì)算
Intl.NumberFormat是國際化的數(shù)字處理方案，它可以用來顯示不同國家對(duì)數(shù)字對(duì)處理偏好，但是一般情況下，我們還是處理中文數(shù)字比較多，但是我發(fā)現(xiàn)這個(gè)Intl.NumberFormat也挺好用的。
這個(gè)插件的官方地址是：https://formatjs.io/docs/intl/
數(shù)字分組
new Intl.NumberFormat('zh-CN',{useGrouping:true}).format(12345678);
"12,345,678"
new Intl.NumberFormat('zh-CN',{useGrouping:false}).format(12345678)
"12345678"位數(shù)控制
new Intl.NumberFormat('zh-CN',{minimumIntegerDigits:2}).format(12345678);
"12"minimumIntegerDigits表示整數(shù)部分最小要幾位置，默認(rèn)1，范圍[1,21]minimumFractionDigits表示小數(shù)部分最小要幾位，默認(rèn)0，范圍[0,20]maximumFractionDigits表示小數(shù)部分最多幾位，范圍[0,20]。純數(shù)字默認(rèn)3，貨幣，百分比默認(rèn)2。minimumSignificantDigits表示整體最小的位數(shù)，范圍[1,21]，默認(rèn)1maximumSignificantDigits表示整體最大的位數(shù)，范圍[1,21]:
整體位數(shù)的控制權(quán)大于局部位數(shù)的控制權(quán)。
長(zhǎng)度表示
const formatter = new Intl.NumberFormat('zh-CN', {
? style: 'unit',
? unit: 'meter',
});
const res = formatter.format(8848.86);
// 則輸出：8,848.86米
// 若語言設(shè)置為'en'，則輸出：8,848.86m當(dāng)然在高度或長(zhǎng)度方面還存在別的單位，如：毫米、厘米、千米等等（millimeter，centimeter，meter，kilometer，inch，foot，yard，mile，mile-scandinavian）。
字節(jié)單位表示
kB、MB、Gb、Tb這幾個(gè)單位在日常生活中也是常見的。
const formatter = new Intl.NumberFormat('zh-CN', {
? style: 'unit',
? unit: 'megabyte',
});
const res = formatter.format(1024);
// 則輸出：1,024 MB
// 其他
// ...
// 若unit設(shè)置"gigabit",則：1,024 Gb
// 若unit設(shè)置"terabit",則：1,024 Tb
// ...復(fù)合單位表示
單位連接組合，如：‘40 小時(shí)/周’ （每周工作40小時(shí)）。
const formatter = new Intl.NumberFormat('zh-CN', {
? style: 'unit',
? unit: 'hour-per-week',
});
const res = formatter.format(40);
// 中文輸出：40小時(shí)/周
// 英文輸出：40 hr/wunit由hour與week組合而成的單位，同樣還有km/h（千米/小時(shí): km/h）,就可以設(shè)置unit為：‘kilometer-per-hour’。還有常見的當(dāng)前網(wǎng)速，每秒多少兆，設(shè)置 ‘megabyte-per-second’(5MB/秒);
百分比表示
常見統(tǒng)計(jì)類數(shù)據(jù)將會(huì)以百分比表示；如成功率占據(jù)95%，則可設(shè)置unit為percent即可。
const formatter = new Intl.NumberFormat('zh-CN', {
? style: 'unit',
? unit: 'percent',
? // signDisplay: 'always',
? // signDisplay: 'exceptZero',
});
const res = formatter.format(95);
// 則輸出：95%
// 設(shè)置 signDisplay: 'always'，則輸出：+95% 或 -95%在某些情況下（例如顯示增量），即使數(shù)字為正數(shù)，也有助于顯式顯示符號(hào)，如：+95%或-95%?？稍O(shè)置signDisplay: 'always’即可。排除輸出+0%或-0%時(shí)設(shè)置signDisplay: 'exceptZero’即可。
貨幣表示
例如輸出人民幣5000000（500萬）。
const formatter = new Intl.NumberFormat('zh-CN', {
? style: 'currency',
? // 輸出人民幣
? currency: 'CNY',
? // 輸出美元，語言設(shè)置為'en'
? // currency: 'USD',
? // currencySign選項(xiàng)啟用記帳格式
? currencySign: 'accounting',
});
const res = formatter.format(5000000);
//輸出結(jié)果：￥5,000,000.00
// 其他
// 人民幣：輸出結(jié)果：￥5,000,000.00
// 美元：輸出結(jié)果：$5,000,000.00同樣以英文輸出美元，設(shè)置其語言項(xiàng)與貨幣類型即可。如人民幣CNY，美元USD，歐元EUR等等。
質(zhì)量表示
例如：輸出500千克；千克設(shè)置’kilogram’即可。
const formatter = new Intl.NumberFormat('zh-CN', {
? style: 'unit',
? unit: 'kilogram',
});
const res = formatter.format(500);
// 輸出：500kg更多單位如：gram,kilogram,ounce,pound,stone。
溫度表示
例如：今天氣溫在28度。
const formatter = new Intl.NumberFormat('zh-CN', {
? style: 'unit',
? unit: 'celsius',
});
const res = formatter.format(28);
// 輸出：28°C更多單位選擇celsius,fahrenheit。
容積表示
const formatter = new Intl.NumberFormat('zh-CN', {
? style: 'unit',
? unit: 'milliliter',
});
const res = formatter.format(28);
// 中文輸出：28毫升
// 英文輸出：28 mL更多單位選擇liter（升），milliliter（毫升），gallon（加侖），fluid-ounce（液盎司）。
角度表示
const formatter = new Intl.NumberFormat('zh-CN', {
? style: 'unit',
? unit: 'degree',
});
const res = formatter.format(90);
// 輸出：90°大數(shù)字表示
如：中國大陸有14多億人，那該如何表示，1400000000這樣顯示看起來有點(diǎn)費(fèi)勁，在中文里，我們可以表示14億。
const formatter = new Intl.NumberFormat('zh-CN', {
? notation: 'compact',
});
const res = formatter.format(1400000000);
// 輸出：14億總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)閉eslint檢查和ts檢查的簡(jiǎn)單步驟記錄
這篇文章主要給大家介紹了關(guān)于關(guān)閉eslint檢查和ts檢查的相關(guān)資料,eslint是一個(gè)JavaScript的校驗(yàn)插件,通常用來校驗(yàn)語法或代碼的書寫風(fēng)格,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
Vue利用computed解決單項(xiàng)數(shù)據(jù)流的問題
Vue是一個(gè)非常流行和強(qiáng)大的前端框架,它讓我們可以用簡(jiǎn)潔和優(yōu)雅的方式來構(gòu)建用戶界面,但是,Vue也有一些需要注意和掌握的細(xì)節(jié)和技巧,今天我們來分享一個(gè)Vue中非常經(jīng)典的問題,也是一個(gè)非常實(shí)用的技巧,Vue利用computed解決單項(xiàng)數(shù)據(jù)流,需要的朋友可以參考下2023-08-08
vue如何使用el-table遍歷循環(huán)表頭和表體數(shù)據(jù)
這篇文章主要介紹了vue如何使用el-table遍歷循環(huán)表頭和表體數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue?props傳入function時(shí)的this指向問題解讀
這篇文章主要介紹了Vue?props傳入function時(shí)的this指向問題解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
詳解為element-ui的Select和Cascader添加彈層底部操作按鈕
這篇文章主要介紹了詳解為element-ui的Select和Cascader添加彈層底部操作按鈕，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要介紹了vue 圖片轉(zhuǎn)base64本地路徑跨域方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-02-02
Vue3之Vite中由element?ui更新導(dǎo)致的啟動(dòng)報(bào)錯(cuò)解決
這篇文章主要介紹了Vue3之Vite中由element?ui更新導(dǎo)致的啟動(dòng)報(bào)錯(cuò)解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
詳解VScode編輯器vue環(huán)境搭建所遇問題解決方案
這篇文章主要介紹了VScode編輯器vue環(huán)境搭建所遇問題解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
VUE中如何調(diào)用高德地圖獲取當(dāng)前位置(VUE2.0和3.0通用)
使用uniapp開發(fā)微信小程序時(shí),多多少少會(huì)遇到獲取當(dāng)前位置的詳細(xì)信息,下面這篇文章主要給大家介紹了關(guān)于VUE中如何調(diào)用高德地圖獲取當(dāng)前位置(VUE2.0和3.0通用)的相關(guān)資料,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Vue3 table表格組件的使用，文章圍繞table表格組件是如何使用的相關(guān)資料展開詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11