js数字千分位格式化:从入门到花式炫技
|
freeflydom
2025年6月6日 9:4
本文热度 72
|
一、基础版:正则表达式一招鲜
function formatNumber(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d)/g, ",");
}
console.log(formatNumber(1234567));
console.log(formatNumber(我的余额是1000000));
小杨解说:这个正则看着吓人,其实就做一件事——找到每三个数字前面的位置,插入逗号。
二、进阶版:处理小数和负数
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));
小杨踩坑记:曾经没处理负数,结果用户看到"-123,456"一脸懵逼,还以为我们系统显示错误!
三、国际化方案:Intl.NumberFormat
console.log(new Intl.NumberFormat().format(1234567));
console.log(new Intl.NumberFormat('de-DE').format(1234567));
小杨提示:这个方法最省心,还能自动适配不同国家的格式!
四、性能优化版:避免频繁创建对象
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));
小杨警告:这种写法虽然酷,但可读性差,团队项目慎用!
六、实战中的坑
- 超大数字处理:
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 '请输入有效数字';
return formatNumber(num);
}
七、总结
- 简单需求用正则
replace
- 国际化需求用
Intl.NumberFormat
- 性能敏感场景缓存formatter对象
- 记得处理小数、负数和超大数字
转自https://juejin.cn/post/7512332419203497995
该文章在 2025/6/6 9:04:22 编辑过