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是國(guó)際化的數(shù)字處理方案，它可以用來顯示不同國(guó)家對(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米
// 若語(yǔ)言設(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%。可設(shè)置signDisplay: 'always’即可。排除輸出+0%或-0%時(shí)設(shè)置signDisplay: 'exceptZero’即可。
貨幣表示
例如輸出人民幣5000000（500萬(wàn)）。
const formatter = new Intl.NumberFormat('zh-CN', {
? style: 'currency',
? // 輸出人民幣
? currency: 'CNY',
? // 輸出美元，語(yǔ)言設(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è)置其語(yǔ)言項(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ù)字表示
如：中國(guó)大陸有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)文章
Vue.js實(shí)現(xiàn)開發(fā)購(gòu)物車功能的方法詳解
這篇文章主要介紹了Vue.js實(shí)現(xiàn)開發(fā)購(gòu)物車功能的方法,結(jié)合實(shí)例形式分析了基于vue.js開發(fā)的購(gòu)物車功能相關(guān)操作步驟與實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-02-02
今天小編就為大家分享一篇vue-dplayer 視頻播放器實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了如何實(shí)現(xiàn)無感刷新token，當(dāng)token過期的時(shí)候，刷新token,前端需要做到無感刷新token,即刷token時(shí)要做到用戶無感知，避免頻繁登錄。下面我們大家一起進(jìn)入文章看看實(shí)現(xiàn)思路即詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11
vue3第二次傳遞數(shù)據(jù)方法無法獲取到最新的值的解決方法
這篇文章主要介紹了vue3第二次傳遞數(shù)據(jù)方法無法獲取到最新的值,本文通過實(shí)例圖文相結(jié)合給大家詳細(xì)講解,感興趣的朋友一起看看吧2025-04-04
ES6 Proxy實(shí)現(xiàn)Vue的變化檢測(cè)問題
Vue3.0將采用ES6 Proxy的形式重新實(shí)現(xiàn)Vue的變化檢測(cè)，在官方還沒給出新方法之前，我們先實(shí)現(xiàn)一個(gè)基于Proxy的變化檢測(cè)。感興趣的朋友跟隨小編一起看看吧2019-06-06
Vue 項(xiàng)目遷移 React 路由部分經(jīng)驗(yàn)分享
這篇文章主要為大家介紹了Vue 項(xiàng)目遷移 React 路由部分經(jīng)驗(yàn)分享，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了Vuejs第十篇之vuejs父子組件通信的相關(guān)資料,本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
這篇文章主要介紹了VUE插件vue-treeselect的使用及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2023-07-07
vue3實(shí)現(xiàn)表格編輯和刪除功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了vue3實(shí)現(xiàn)表格編輯和刪除功能的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
這篇文章主要為大家介紹了利用Vue3指令實(shí)現(xiàn)水印背景詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03