随着数字在前端应用中的广泛使用，对数字格式化和货币处理的需求也变得越来越普遍。在 ES12 中，Intl.NumberFormat() 可以帮助我们方便地处理这些需求。在本篇文章中，我们将深入探讨如何正确使用 Intl.NumberFormat() 进行数字格式化和货币处理。
了解 Intl.NumberFormat()
Intl.NumberFormat() 是一个国际化 API，可以帮助我们对数字进行格式化处理。它提供了多个参数，包括语言环境、货币符号、小数点分隔符、千位分隔符等等，可以设置数字输出的格式。
下面是一个简单的使用示例：
const nf = new Intl.NumberFormat(); console.log(nf.format(1234567.89)); // 输出: 1,234,567.89（英文环境下）
上面的例子中，我们创建了一个 Intl.NumberFormat 实例，然后调用 format() 方法格式化数字，最后输出了结果。默认情况下，格式化出来的数字使用逗号分隔千位，点号作为小数点。
使用语言环境
在使用 Intl.NumberFormat() 对数字进行格式化和货币处理时，必须指定相应的语言环境，以确保输出符合预期。语言环境通常由语言和国家/地区两个参数构成，比如 "en-US" 表示英语（美国）。
下面是一个示例代码：
const nf = new Intl.NumberFormat('zh-CN'); // 使用中文环境
console.log(nf.format(1234567.89)); // 输出: 1,234,567.89（使用逗号分隔千位，点号作为小数点）在上面的代码中，我们创建了一个使用中文语言环境的 Intl.NumberFormat 实例，并对数字进行了格式化。输出结果中千位分隔符使用逗号，小数点使用点号。
格式化数字
在格式化数字之前，需要先通过 Intl.NumberFormat() 创建一个实例，并设置相应的参数。常用的格式化参数包括：
- style：表示数字输出的样式，有 "decimal"（普通数字）、"currency"（货币）和 "percent"（百分比）三种可选。
- currency：仅在 style 设置为 "currency" 时有效，表示货币的 ISO 4217 代码。
- currencyDisplay：仅在 style 设置为 "currency" 时有效，表示货币符号的显示位置，有 "symbol"（符号位于数值前）、"code"（符号作为货币代码显示，例如 USD）、"name"（符号作为货币名称显示，例如美元）三种可选。
- minimumIntegerDigits：表示整数部分所保留的最小位数。
- minimumFractionDigits：表示小数部分所保留的最小位数。
- maximumFractionDigits：表示小数部分所保留的最大位数。
下面是一个示例代码，演示如何格式化数字：
-- -------------------- ---- ------- -- ------------- ----------------- -- ----- -- - --- -------------------------- - ------ ----------- -- ------- --------- ------ -- ------ ---------------- --------- -- ------------ ---------------------- -- -- -------- ---------------------- -- -- -------- --- ---------------------------------- -- -------------
在上面的代码中，我们通过 Intl.NumberFormat() 创建了一个使用中文货币格式的实例，指定货币代码为 CNY，货币符号显示在数值前，同时最多保留两位小数。最后对数字 12345.678 进行了格式化处理，得到的结果为 ¥12,345.68。
处理货币
在使用 Intl.NumberFormat() 进行货币处理时，需要注意以下几点：
- 必须指定 style 为 "currency"，否则无法正确处理货币。
- currency 参数必须是 ISO 4217 中定义的货币代码之一，否则会出现错误。
- 如果要在不同的货币之间进行转换，需要先进行汇率计算，然后再进行货币处理。
下面是一个处理货币的示例代码：
-- -------------------- ---- ------- -- ------------- ----------------- -- ----- -- - --- -------------------------- - ------ ----------- -- ------- --------- ------ -- --------- --- -- ------ ----- ---- - ---- -- - ---- --- --- -- - ---- --------- ----- --- - ---- - ----- ---------------------------- -- ---------------------
在上面的代码中，我们通过 Intl.NumberFormat() 创建了一个货币格式为美元的实例，然后模拟了一个汇率计算，并将 2000 元人民币换算成了美元。最后将结果格式化为美元，并输出结果为 $307.69。
总结
通过本篇文章的介绍，我们了解了如何在 ES12 中使用 Intl.NumberFormat() 进行数字格式化和货币处理。我们需要注意指定语言环境，并根据需要设置相应的参数，包括样式、货币代码、货币符号位置、小数位数等等，在处理货币时还需要注意汇率计算。希望这篇文章能对你理解和掌握数字格式化和货币处理有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f1a9fbf6b2d6eab3b7daea