一、基礎版:正則表達式一招鮮
function formatNumber(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d)/g, ",");
}
console.log(formatNumber(1234567));
console.log(formatNumber(我的余額是1000000));
小楊解說:這個正則看著嚇人,其實就做一件事——找到每三個數(shù)字前面的位置,插入逗號。
二、進階版:處理小數(shù)和負數(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));
小楊踩坑記:曾經沒處理負數(shù),結果用戶看到"-123,456"一臉懵逼,還以為我們系統(tǒng)顯示錯誤!
三、國際化方案:Intl.NumberFormat
console.log(new Intl.NumberFormat().format(1234567));
console.log(new Intl.NumberFormat('de-DE').format(1234567));
小楊提示:這個方法最省心,還能自動適配不同國家的格式!
四、性能優(yōu)化版:避免頻繁創(chuàng)建對象
const formatter = new Intl.NumberFormat();
function fastFormat(num) {
return formatter.format(num);
}
五、花式炫技:一行代碼搞定
const fancyFormat = num => [...num.toString()].reverse().map((c,i) => i%3===0&&i!==0?c+',':c).reverse().join('');
console.log(fancyFormat(1234567));
小楊警告:這種寫法雖然酷,但可讀性差,團隊項目慎用!
六、實戰(zhàn)中的坑
- 超大數(shù)字處理:
console.log(formatNumber(99999999999999999999));
function safeFormat(num) {
return BigInt(num).toString().replace(/\B(?=(\d{3})+(?!\d)/g, ",");
}
- 輸入校驗:
function safeFormatInput(input) {
const num = Number(input);
if(isNaN(num)) return '請輸入有效數(shù)字';
return formatNumber(num);
}
七、總結
- 簡單需求用正則
replace
- 國際化需求用
Intl.NumberFormat
- 性能敏感場景緩存formatter對象
- 記得處理小數(shù)、負數(shù)和超大數(shù)字
?轉自https://juejin.cn/post/7512332419203497995
該文章在 2025/6/6 9:04:22 編輯過