快捷導(dǎo)航

JavaScript實(shí)現(xiàn)千位分隔符幾種常見方法

更新時(shí)間：2025年09月11日 11:13:11 作者：51349592

將普通的數(shù)字轉(zhuǎn)換為帶千位分隔符格式的數(shù)字字符串是一個(gè)非常常見的問題,這篇文章主要介紹了JavaScript實(shí)現(xiàn)千位分隔符的幾種常見方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

數(shù)字已經(jīng)是字符串形式，包含逗號(hào)或其他分隔符。
數(shù)字是負(fù)數(shù)，需要在前面保留負(fù)號(hào)。
數(shù)字包含小數(shù)部分，只對(duì)整數(shù)部分進(jìn)行分隔。
數(shù)字長度不足三位，不需要分隔符。
數(shù)字為0的情況。

在 JavaScript 中，實(shí)現(xiàn)千位分隔符（即在數(shù)字中添加逗號(hào)作為千位分隔符）有幾種常見方法：

方法一：toLocaleString()

最簡單的方法是使用 Number 的 toLocaleString() 方法：會(huì)根據(jù)用戶的區(qū)域設(shè)置自動(dòng)調(diào)整格式（如歐洲部分地區(qū)使用點(diǎn)作為千位分隔符，逗號(hào)作為小數(shù)點(diǎn)）

const number = 1234567.89;
const formatted = number.toLocaleString(); // "1,234,567.89"

如果需要指定區(qū)域，可以明確指定區(qū)域設(shè)置：

const formatted = number.toLocaleString('en-US');

弊端：

不同瀏覽器和運(yùn)行環(huán)境下的實(shí)現(xiàn)可能不一致
- 小數(shù)位數(shù)處理不一致（有的保留所有小數(shù)位，有的會(huì)四舍五入）
- 千位分隔符樣式差異（有的用逗號(hào)，有的用空格）
- 小數(shù)點(diǎn)符號(hào)差異（點(diǎn)或逗號(hào)）
```
1234567.89123.toLocaleString()
// Chrome(en-US): "1,234,567.89123"
// Firefox(zh-CN): "1,234,567.89123"
// 某些舊版Node.js: "1,234,567.89" (自動(dòng)四舍五入)
```
性能問題：相比簡單數(shù)字操作性能較差，在需要處理大量數(shù)據(jù)時(shí)不推薦使用
格式化控制有限：不能自定義分隔符（只能使用本地化默認(rèn)符號(hào)）

方法二：使用正則表達(dá)式

將數(shù)字轉(zhuǎn)換為字符串后，用正則表達(dá)式替換，每隔三位插入逗號(hào)。

這種方法可能更高效，但需要處理負(fù)數(shù)和小數(shù)的情況

注意要從右向左處理，避免小數(shù)點(diǎn)后的數(shù)字也被分隔。

1.純整數(shù)處理

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

// 示例
console.log(formatNumber(1234567)); // "1,234,567"
console.log(formatNumber(1234567.89)); // "1,234,567.89""
console.log(formatNumber(1234567.8999)); // "1,234,567.8,999"

正則表達(dá)式分解：

\B - 匹配一個(gè)非單詞邊界（即不在單詞的開始或結(jié)束位置）
(?=...) - 正向肯定預(yù)查（lookahead assertion），表示后面必須匹配的模式
- (\d{3})+ - 匹配一個(gè)或多個(gè)連續(xù)的3位數(shù)字
- (?!\d) - 負(fù)向預(yù)查，確保3位數(shù)字后面沒有更多數(shù)字
/g - 全局匹配標(biāo)志，替換所有匹配項(xiàng)而不僅是第一個(gè)

2.帶負(fù)數(shù)和小數(shù)的處理

function formatNumber(num) {
  // 處理負(fù)數(shù)和小數(shù)
  const [integerPart, decimalPart] = String(num).split('.');
  const formatted = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  return decimalPart ? `${formatted}.${decimalPart}` : formatted;
}

// 示例
console.log(formatNumber(1234567)); // "1,234,567"
console.log(formatNumber(1234567.89)); // "1,234,567.89"
console.log(formatNumber(-1234567.89)); // "-1,234,567.89"
console.log(formatNumber(1234567.8999)); // "1,234,567.8999"

方法三：字符串反轉(zhuǎn)處理

將字符串反轉(zhuǎn)，每三位插入逗號(hào)，然后再反轉(zhuǎn)回來。

這種方法可能更直觀，但需要處理反轉(zhuǎn)后的順序問題。

function formatNumber(num) {
  let [integerPart, decimalPart] = String(num).split('.');
  integerPart = integerPart.split('').reverse().join('');
  integerPart = integerPart.match(/\d{1,3}/g).join(',');
  integerPart = integerPart.split('').reverse().join('');
  return decimalPart ? `${integerPart}.${decimalPart}` : integerPart;
}

// 示例
console.log(formatNumber(1234567)); // "1,234,567"

方法四：使用 Intl.NumberFormat (ES6+)

const formatter = new Intl.NumberFormat('en-US');
const formatted = formatter.format(1234567.89); // "1,234,567.89"

注意事項(xiàng)

這些方法中，toLocaleString() 和 Intl.NumberFormat 會(huì)根據(jù)用戶的區(qū)域設(shè)置自動(dòng)調(diào)整格式（如歐洲部分地區(qū)使用點(diǎn)作為千位分隔符，逗號(hào)作為小數(shù)點(diǎn)）。
如果只需要在特定區(qū)域（如美國）顯示，可以明確指定區(qū)域設(shè)置。
正則表達(dá)式方法雖然靈活，但可能不如內(nèi)置方法健壯，特別是處理邊緣情況時(shí)。

選擇哪種方法取決于你的具體需求和目標(biāo)瀏覽器支持情況。