在前端开发中，数字是一个非常常见的数据类型，比如统计分析数据、计算货币、展示进度等等。然而默认的数字输出方式往往不够美观、易读，不利于用户体验。所以，ES12 新增了 Number.format 方法，可以让数字展示更加优雅。
什么是 Number.format 方法
Number.format 是 ES12 中新增的一个方法，可以将数字格式化为指定的格式，如千位分隔符、保留几位小数等等。用 Number.format 可以让数字输出更加规范、可读性更高。
如何使用
Number.format 的语法非常简单：
numObj.format([locales,] options);
参数 numObj 是要格式化的数字，参数 locales 可选，代表的是本地化区域，可以传入多个参数，options 是一个配置参数对象。下面是示例代码：
const num = new Number(123456.789); console.log(num.format()); // → "123,456.789"
我们发现，输出的结果已经发生了变化，数字被加上了千位分隔符，让数字更加易读。
options 参数详解
options 参数是一个配置对象，可以进行各种自定义的数字格式化操作，下面是常用的配置项：
style字段：指定样式类型，可以取值decimal（十进制，默认值）、percent（百分数）、currency（货币）。currency字段：当style为currency时，此字段是必须的。用于指定货币代码，形如USD、EUR等。useGrouping字段：是否使用千位分隔符。minimumIntegerDigits字段：整数部分最小显示几位数字。minimumFractionDigits字段：小数部分最小显示几位数字。maximumFractionDigits字段：小数部分最大显示几位数字。minimumSignificantDigits字段：数字中最少显示几个有效数字。maximumSignificantDigits字段：数字中最多显示几个有效数字。
下面是一个带有配置项的示例：
-- -------------------- ---- ------- ----- --- - --- ------------------- ----- ------- - - ------ ----------- --------- ------ ------------ ----- ---------------------- -- ---------------------- - -- --------------------------------- -- - -------------
我们可以看到，输出的结果中，数字被格式化为货币形式，带有美元符号和千位分隔符，小数部分被限制在了最大、最小两位。
除了上面几个常用的配置项之外，还有其他一些高级功能，可以查看 MDN 的文档了解更多。
兼容性
由于 Number.format 是 ES12 新增的方法，所以在一些老版本浏览器中并不支持。但是有一些方法可以做到向下兼容：
- 使用
Intl.NumberFormat：该方法早在 ES5 中就支持了，可以做到Number.format类似的数字格式化效果。 - 使用第三方库：比如
Numeral.js、accounting.js等等，都可以做到数字格式化。
总结
Number.format 是 ES12 中新增的数字格式化方法，可以让数字更具规范性、可读性。通过配置参数来实现不同的数字格式化样式，可以满足很多数字展示的需求。同时我们还要关注兼容性问题，可以选择使用早期版本的 Intl.NumberFormat，或者选择第三方库进行处理。在实际开发中，Number.format 可以提高项目代码的可维护性，降低开发难度，是一个非常实用的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a2216748841e9894e67e74