一、問題背景

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

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

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

二、使用 toLocaleString() 方法

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

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

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

如果需要指定格式，可以傳遞 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)

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

缺點(diǎn)

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

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

如果需要更靈活的控制，可以使用正則表達(dá)式手動(dòng)實(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：匹配非單詞邊界，確保不會(huì)影響開頭的數(shù)字。
  • (?=(\d{3})+(?!\d))：匹配位置，使得每三位數(shù)字前加上逗號(hào)。

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

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

缺點(diǎn)

• 需要對(duì)正則表達(dá)式有一定的理解。
• 無(wú)法自動(dòng)適配不同地區(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ù)等。
• 支持國(guó)際化。

缺點(diǎn)

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

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

如果想要完全掌控格式化過程，可以使用純 JavaScript 手動(dòng)實(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ù)部分，每三位插入一個(gè)逗號(hào)。
3. 重新組合整數(shù)和小數(shù)部分。

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

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

缺點(diǎn)

• 代碼較長(zhǎng)，需要手動(dòng)處理每個(gè)細(xì)節(jié)。

六、性能對(duì)比

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

七、總結(jié)

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

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

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