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