4種JavaScript實作千位分隔符的方法

​

在項目開發中需要js實作千位分隔符來分割一個整數，比如我想将數字 1234567 顯示為“1,234,567”。我該怎麼實作呢？

方法一、利用循環

實作思路是将數字轉換為字元數組，再循環整個數組， 每三位添加一個分隔逗号，最後再合并成字元串。

function numberWithCommas(x) {
    x = x.toString();
    var pattern = /(-?\d+)(\d{3})/;
    while (pattern.test(x))
        x = x.replace(pattern, "$1,$2");
    return x;
}
numberWithCommas(12312124545);//'12,312,124,545'
numberWithCommas(123121245.45);//'123,121,245.45'      

方法二、toLocaleString

Number.prototype.toLocaleString。它是在 JavaScript 1.5（于 1999 年推出）中實作的，是以基本上所有主要浏覽器都支援它。​

var num = 12345.1234
num.toLocaleString();//'12,345.123'      

注意的是這個函數在沒有指定區域的基本使用時，傳回使用預設的語言環境和預設選項格式化的字元串，是以不同地區數字格式可能會有一定的差異。最好確定使用 locales 參數指定了使用的語言。

注：我測試的環境下小數部分會根據四舍五入隻留下三位。比如：​

var b=1234.4542;
b.toLocaleString();//'1,234.454'      

方法三、正規表達式和replace函數

使用正規表達式和replace函數，相對前兩種我更喜歡這種方法，雖然正則有點難以了解。

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}      

正規表達式使用 2 個前瞻斷言：

• 一個正數，用于在字元串中查找其後連續 3 位數字的任何點，
• 一個否定斷言，以確定該點隻有 3 位數字的倍數。替換表達式在那裡放置一個逗号。

注意：這個函數如果小數點後有超過3位數字的話，會在不需要的地方添加逗号。如果這是一個問題，您可以使用此功能。​

function numberWithCommas(x) {
    var parts = x.toString().split(".");
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return parts.join(".");
}      

更簡潔，最終代碼：​

function numberWithCommas(x) {
    return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
}      

方法四：Intl.NumberFormat

原生js功能。支援 IE11、Edge、最新的 Safari、Chrome、Firefox、Opera、iOS 上的 Safari 和 Android 上的 Chrome。

可以把普通的數字，轉換成不同的貨币和格式樣式字元串。​

let number = 1234567890;
let nf = new Intl.NumberFormat('en-US');
nf.format(number); // "1,234,567,890"      

var 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"


// limit to three significant digits
console.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number));


// expected output: "1,23,000"