JavaScript 如何做数字格式化

你有没有过这种经历？写网页时想把数字改成带千位逗号的样式，比如把1234567变成1,234,567；或者要把金额显示成保留两位小数的样子，比如把99.9变成99.90；又或者要给数字加百分比符号，把0.85变成85%？这些需求其实都能用JavaScript轻松搞定，不用自己写复杂的拼接代码。

最常用的内置方法：Intl.NumberFormat

很多人不知道，JavaScript自带了专门处理数字格式的工具——Intl.NumberFormat，这是浏览器原生支持的，不用额外装插件，兼容性也很好，日常用完全够。它的核心是“配置参数”，你告诉它要什么格式，它直接返回格式化后的字符串，就像给数字穿衣服，选合适的款式就行。

举个生活化的例子：你去国外餐厅吃饭，账单上的数字要按当地习惯显示，比如美国的千位逗号、欧盟的点分隔，这个方法就能自动切换。比如要给数字加千位分隔符，直接写几行代码就行：

`javascript

const num = 1234567.89;

const formatNum = new Intl.NumberFormat().format(num);

console.log(formatNum); // 输出1,234,567.89

`

是不是比自己写num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")这种正则简单多了？

几种实用的日常场景用法

知道了基础用法，再结合不同的需求调整参数，就能搞定大部分常见情况。

场景1：金额格式化（带货币符号）

如果是做电商网站的价格显示，需要加人民币符号¥，还要保留两位小数，这个方法也能搞定。只要加个style和currency参数就行：

`javascript

const price = 99.9;

const formatPrice = new Intl.NumberFormat('zh-CN', {

style: 'currency',

currency: 'CNY'

}).format(price);

console.log(formatPrice); // 输出¥99.90

`

这里的zh-CN是指定“中国地区”，用来匹配人民币的显示习惯，换'en-US'就会变成$99.90，完美适配不同地区的需求。

场景2：百分比格式化

做进度条或者数据占比时，需要把0.85变成85%，用这个方法也不用自己乘100加符号，配置style: 'percent'就自动处理了：

`javascript

const ratio = 0.85;

const formatRatio = new Intl.NumberFormat('zh-CN', {

style: 'percent'

}).format(ratio);

console.log(formatRatio); // 输出85%

`

连小数位数都能通过maximumFractionDigits调整，比如要保留一位小数，加maximumFractionDigits:1，就会变成85.0%。

场景3：简化大数显示

如果是统计页面的访问量，1000000这种数字没必要显示全，改成100万更直观。虽然Intl.NumberFormat本身不直接支持“万/亿”转换，但结合简单计算就能实现：

`javascript

const views = 1234567;

const formatViews = views >= 10000 ? ${(views/10000).toFixed(1)}万 : views;

console.log(formatViews); // 输出123.5万

`

这个小技巧把专业的数字变成普通人一眼能懂的数值，特别适合新闻、报表这类场景。

注意点：避开常见小坑

用这个方法时要注意，它返回的是字符串，不能再当数字计算，比如new Intl.NumberFormat().format(1234)得到的"1,234"，不能直接拿去加减。如果需要后续计算，得先转成数字。另外，老版本的IE浏览器对这个方法的支持有限，但现在大部分用户都用现代浏览器，基本不用考虑这个问题。

其实数字格式化没那么复杂，不用自己从零写函数，用原生工具就能搞定大部分需求，省下来的时间能做更多页面交互的优化。