一、問題背景

在 Web 開發(fā)中，我們經(jīng)常需要在界面上展示財務(wù)數(shù)據(jù)、統(tǒng)計數(shù)據(jù)或者其他大型數(shù)字。為了提升可讀性，通常會在整數(shù)部分每三位添加一個逗號。例如：

• 1000 → 1,000
• 1000000 → 1,000,000
• 12345678.9 → 12,345,678.9

JavaScript 并沒有提供內(nèi)置的方法直接實(shí)現(xiàn)這種格式化，因此我們需要使用正則表達(dá)式、toLocaleString() 方法或手動實(shí)現(xiàn)格式化邏輯。

二、使用 toLocaleString() 方法

JavaScript 提供了 toLocaleString() 方法，可以直接將數(shù)字格式化為帶有千分位分隔符的字符串。

const num = 12000000.11;
console.log(num.toLocaleString()); // "12,000,000.11"

該方法默認(rèn)使用用戶所在地區(qū)的數(shù)字格式。例如，在美國地區(qū)，toLocaleString() 會使用逗號作為千分位分隔符，而在部分歐洲地區(qū)可能會使用 . 作為分隔符。

如果需要指定格式，可以傳遞 locales 參數(shù)，例如：

console.log(num.toLocaleString('en-US')); // "12,000,000.11"
console.log(num.toLocaleString('de-DE')); // "12.000.000,11"

優(yōu)點(diǎn)

• 簡潔易用，一行代碼即可完成格式化。
• 自動適配不同地區(qū)的格式。

缺點(diǎn)

• 無法完全自定義格式，例如指定小數(shù)位數(shù)。
• 依賴瀏覽器環(huán)境，部分低版本瀏覽器可能不支持。

三、使用正則表達(dá)式實(shí)現(xiàn)千分位格式化

如果需要更靈活的控制，可以使用正則表達(dá)式手動實(shí)現(xiàn)千分位格式化。

function formatNumber(num) {
  const [integer, decimal] = num.toString().split('.');
  return integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',') + (decimal ? '.' + decimal : '');
}

console.log(formatNumber(12000000.11)); // "12,000,000.11"

正則表達(dá)式解析

/\B(?=(\d{3})+(?!\d))/g

• • \B：匹配非單詞邊界，確保不會影響開頭的數(shù)字。
  • (?=(\d{3})+(?!\d))：匹配位置，使得每三位數(shù)字前加上逗號。

優(yōu)點(diǎn)

• 代碼量小，性能較高。
• 適用于所有 JavaScript 運(yùn)行環(huán)境。

缺點(diǎn)

• 需要對正則表達(dá)式有一定的理解。
• 無法自動適配不同地區(qū)的格式。

四、使用 Intl.NumberFormat 進(jìn)行格式化

JavaScript 提供了 Intl.NumberFormat API，可以用于更加靈活的數(shù)值格式化。

const formatter = new Intl.NumberFormat('en-US', {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

console.log(formatter.format(12000000.11)); // "12,000,000.11"

優(yōu)點(diǎn)

• 提供更強(qiáng)的格式化控制，如小數(shù)位數(shù)等。
• 支持國際化。

缺點(diǎn)

• 需要創(chuàng)建 Intl.NumberFormat 實(shí)例。
• 可能不支持所有瀏覽器（低版本瀏覽器需要 polyfill）。

五、手動實(shí)現(xiàn)格式化函數(shù)

如果想要完全掌控格式化過程，可以使用純 JavaScript 手動實(shí)現(xiàn)：

function formatNumberManual(num) {
  let [integer, decimal] = num.toString().split('.');
  let result = '';
  let count = 0;

  for (let i = integer.length - 1; i >= 0; i--) {
    count++;
    result = integer[i] + result;
    if (count % 3 === 0 && i !== 0) {
      result = ',' + result;
    }
  }

  return decimal ? result + '.' + decimal : result;
}

console.log(formatNumberManual(12000000.11)); // "12,000,000.11"

代碼解析

1. 將數(shù)字轉(zhuǎn)換為字符串，并拆分整數(shù)和小數(shù)部分。
2. 通過遍歷整數(shù)部分，每三位插入一個逗號。
3. 重新組合整數(shù)和小數(shù)部分。

優(yōu)點(diǎn)

• 適用于所有 JavaScript 運(yùn)行環(huán)境。
• 代碼完全可控，可自由調(diào)整格式。

缺點(diǎn)

• 代碼較長，需要手動處理每個細(xì)節(jié)。

六、性能對比

不同方法的性能有所不同，通常情況下：

七、總結(jié)

JavaScript 提供了多種方式來格式化數(shù)字并添加千分位逗號，每種方法都有其適用場景：

• toLocaleString() 適合簡單場景，且能自動適配不同地區(qū)格式。
• 正則表達(dá)式方法適合大部分場景，代碼簡潔且性能較高。
• Intl.NumberFormat 提供更強(qiáng)的格式化能力，適合國際化應(yīng)用。
• 手動實(shí)現(xiàn)方法適用于所有環(huán)境，適合對格式有特殊需求的場景。

以上就是JavaScript實(shí)現(xiàn)給浮點(diǎn)數(shù)添加千分位逗號的多種方法的詳細(xì)內(nèi)容，更多關(guān)于JavaScript浮點(diǎn)數(shù)添加千分位逗號的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論