一、基礎(chǔ)版：正則表達(dá)式一招鮮

function formatNumber(num) {
    return num.toString().replace(/\B(?=(\d{3})+(?!\d)/g, ",");
}
console.log(formatNumber(1234567)); // "1,234,567"
console.log(formatNumber(我的余額是1000000)); // "我的余額是1,000,000"

小楊解說：這個(gè)正則看著嚇人，其實(shí)就做一件事——找到每三個(gè)數(shù)字前面的位置，插入逗號(hào)。

二、進(jìn)階版：處理小數(shù)和負(fù)數(shù)

function formatNumberAdvanced(num) {
    const parts = num.toString().split('.');
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return parts.join('.');
}
console.log(formatNumberAdvanced(-1234567.89)); // "-1,234,567.89"

小楊踩坑記：曾經(jīng)沒處理負(fù)數(shù)，結(jié)果用戶看到"-123,456"一臉懵逼，還以為我們系統(tǒng)顯示錯(cuò)誤！

三、國(guó)際化方案：Intl.NumberFormat

console.log(new Intl.NumberFormat().format(1234567)); // "1,234,567"
console.log(new Intl.NumberFormat('de-DE').format(1234567)); // "1.234.567" 德國(guó)用點(diǎn)號(hào)

小楊提示：這個(gè)方法最省心，還能自動(dòng)適配不同國(guó)家的格式！

四、性能優(yōu)化版：避免頻繁創(chuàng)建對(duì)象

const formatter = new Intl.NumberFormat();
function fastFormat(num) {
    return formatter.format(num);
}
// 適合需要頻繁調(diào)用的場(chǎng)景

五、花式炫技：一行代碼搞定

const fancyFormat = num => [...num.toString()].reverse().map((c,i) => i%3===0&&i!==0?c+',':c).reverse().join('');
console.log(fancyFormat(1234567)); // "1,234,567"

小楊警告：這種寫法雖然酷，但可讀性差，團(tuán)隊(duì)項(xiàng)目慎用！

六、實(shí)戰(zhàn)中的坑

1. 超大數(shù)字處理：

// 錯(cuò)誤示范
console.log(formatNumber(99999999999999999999)); // "100,000,000,000,000,000,000"
// 正確做法
function safeFormat(num) {
    return BigInt(num).toString().replace(/\B(?=(\d{3})+(?!\d)/g, ",");
}

2. 輸入校驗(yàn)：

function safeFormatInput(input) {
    const num = Number(input);
    if(isNaN(num)) return '請(qǐng)輸入有效數(shù)字';
    return formatNumber(num);
}

七、總結(jié)

• 簡(jiǎn)單需求用正則replace
• 國(guó)際化需求用Intl.NumberFormat
• 性能敏感場(chǎng)景緩存formatter對(duì)象
• 記得處理小數(shù)、負(fù)數(shù)和超大數(shù)字

?轉(zhuǎn)自https://juejin.cn/post/7512332419203497995