數(shù)字格式化操作在前端領(lǐng)域是十分常見的需求掠手。但是瀏覽器和原生JS并沒有提供太多可用的API來讓我們進(jìn)行操作。
因此伐脖,我們大多數(shù)時(shí)候都訴諸于自己造輪子热幔。
下面介紹在平常工作中,針對(duì)數(shù)字進(jìn)行格式化的幾個(gè)方法:
正則表達(dá)式 (古早的做法)
const number = 1234567;
number.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
// 結(jié)果為:1,234,567
Date API
const number = 123456.789;
number.toLocaleString();// 結(jié)果為:123,456.789
Intl.NumberFormat (推薦使用)
好在現(xiàn)在JS提供了一個(gè)更加可用和規(guī)范化的API——Intl.NumberFormat讼庇。對(duì)于常用的貨幣格式化都有良好的支持绎巨。
new Intl.NumberFormat().format(123456.789);
// 顯示結(jié)果為:123,456.789
另外,也可以指定不同國家的貨幣單位:
new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(12345.678);
// 結(jié)果顯示為:"¥12,346"
而且該API現(xiàn)在的兼容性也十分良好:
image.png
基本上主流的瀏覽器現(xiàn)在都已經(jīng)開始支持蠕啄。
現(xiàn)在如果你的項(xiàng)目有需要用到數(shù)據(jù)格式化操作的地方场勤,就不用手動(dòng)去實(shí)現(xiàn)該功能了。嘗試讓瀏覽器幫你去實(shí)現(xiàn)歼跟。
具體API的細(xì)節(jié)和媳,可以參考:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString