在前端开发中，经常需要对数字进行格式化处理。ES10 中新增了 Intl.NumberFormat 对象，能够方便地对数字进行格式化，包括货币、百分比、小数点等等。本文将详细介绍如何使用这个工具。
什么是 Intl.NumberFormat？
Intl.NumberFormat 是ES10中一个全局对象，用于格式化数字。它用于将数字转换为可读的文本，支持货币、百分比、小数点等各种格式。
使用方法
使用 Intl.NumberFormat 的方法如下：
const formatter = new Intl.NumberFormat(locale, options);
其中 locale 是语言环境， options 是一个对象，用于指定相关的选项。下面我们分别介绍这两个参数。
locale
locale 参数用于指定语言环境，可以是一个字符串或者是一个数组。如果是字符串，表示只使用一个语言环境，如果是数组，表示使用多个语言环境。语言环境使用的是 BCP 47 标准。
例如：
const formatter = new Intl.NumberFormat('en-US');
表示使用英文-美国语言环境。
const formatter = new Intl.NumberFormat(['en-US', 'fr-FR']);
表示同时使用英文-美国和法语-法国两个语言环境。
options
options 参数是一个对象，用于指定更详细的选项。具体选项如下：
style：指定数字格式的样式，可以是decimal（十进制）、currency（货币）和percent（百分比）currency：如果style选项指定为currency，则需要指定该参数，表示货币的类型。例如USD表示美元，CNY表示人民币等等。currencyDisplay：表示货币符号的显示位置。可以是symbol（符号在前）、code（货币代码在前）和name（货币名称在前）minimumFractionDigits：表示小数点后最少留几位，可以是0到20maximumFractionDigits：表示小数点后最多留几位，可以是0到20useGrouping：表示是否使用千位分隔符，默认为true。notation：表示数字的格式，可以是standard（标准格式）或compact（压缩格式，例如 1200 显示为 1.2K）。只有在 style 为 decimal 的情况下有效。signDisplay：表示数字的符号位置，可以是auto（跟随语言环境）、always（始终显示符号）、never（从不显示符号）和exceptZero（只有数字不为0时才显示符号）
例如：
const formatter = new Intl.NumberFormat('en-US', { style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2, useGrouping: true });
表示使用英文-美国语言环境，将代表数字文本化的对象实例化为 formatter，格式为十进制，小数点后最少保留两位，最多保留两位，开启千分位分隔符，即格式化数字为 "1,234.56" 的形式。
格式化数字
Intl.NumberFormat 实例化后，可以调用其 format 方法对数字进行格式化。 format 方法的参数是需要格式化的数字。例如：
const formatter = new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY', }); console.log(formatter.format(12345.67)); // ￥12,345.67
上述例子将数字 12345.67 格式化为 ￥12,345.67 这样的人类可读形式。
深度解析
在使用 Intl.NumberFormat 进行数字格式化时，我们需要关注选项的配置和语言环境的选择，下面我们来分析几个常用选项的掌握。
currencyDisplay 选项
当设置 currency 选项时，我们还可以设置 currencyDisplay 选项。例如：
-- -------------------- ---- ------- ----- ---------- - --- -------------------------- - ------ ----------- --------- ------ ---------------- --------- --- ----- ---------- - --- -------------------------- - ------ ----------- --------- ------ ---------------- ------- --- ----- ---------- - --- -------------------------- - ------ ----------- --------- ------ ---------------- ------- --- ---------------------------------------- -- --------- ---------------------------------------- -- ----------- ---------------------------------------- -- -------- -- -------展开代码
其中 currencyDisplay 选项的取值可以是 symbol、 code、和 name。
symbol：默认值，表示将货币符号置于数值前面，例如：$1,234.56。code：表示将货币代码置于数值前面，例如：USD1,234.56。name：表示将货币名称置于数值前面，例如：1,234.56 US dollars。
负数格式化
在实际开发中，十分关注负数的格式化。当我们使用 style: 'currency' 进行货币格式化时，默认情况下负数会被用括号括起来。
const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', }); console.log(formatter.format(-1234.56)); // ($1,234.56)
而对于其它数字格式，负数默认情况下加上负号。
const formatter = new Intl.NumberFormat('en-US', { style: 'decimal', }); console.log(formatter.format(-1234.56)); // -1,234.56
我们可以通过设置 signDisplay: 'always' 来强制负数前加上负号，或者 signDisplay: 'never' 来让负数使用括号。
-- -------------------- ---- ------- ----- ---------- - --- -------------------------- - ------ ----------- --------- ------ ------------ --------- --- ----------------------------------------- -- ---------- ----- ---------- - --- -------------------------- - ------ ----------- --------- ------ ------------ -------- --- ----------------------------------------- -- ---------展开代码
数字压缩
有时，数字过大，直接将他们格式化得出来的字符可能不太友好。例如，128300，我们希望格式化成 128K 这样的形式。这时，就可以使用 notation: "compact" 来将数字压缩。
-- -------------------- ---- ------- ----- ---------- - --- -------------------------- - ------ ---------- --------- --------- --- ------------------------------------- -- -- ----- ---------- - --- -------------------------- - ------ ---------- --------- ---------- ---------------------- - --- -------------------------------------- -- ------展开代码
上述例子中，notation 选项的取值为 compact 时，数值最多只有一位小数。当需要保留更多小数时，可以设置 maximumFractionDigits 选项。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d65412a941bf7134c0aa6a
