ES12 中 Intl.NumberFormat 的全面解读-JavaScript中文网-JavaScript教程资源分享门户

随着全球化的趋势，越来越多的公司将目光投向了跨国市场，这也导致了多语言支持变得越来越重要。在前端开发领域中，国际化也成为了一种趋势。在 JavaScript 中，我们可以通过 Intl.NumberFormat 来实现数字本地化处理。本文将从多个方面的角度来详细介绍该 API 的使用方式和其对国际化的支持。

Intl.NumberFormat 简介

Intl.NumberFormat 是一个全局对象，它属于 ECMAScript 国际化 API 的一部分，该 API 使得我们可以对数据进行本地化处理。使用该 API 可以方便地将数字格式化为各地区所使用的格式，并在实现本地化的同时也会遵循该语言的规则及语法。

使用 Intl.NumberFormat 可以完成如下操作：

格式化数字
格式化时间
格式化货币

下面是一个简单的示例代码，该代码使用 Intl.NumberFormat 将数字格式化为美元货币格式：

const number = 3500;
const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
});

console.log(formatter.format(number)); // => $3,500.00

可以看到，该代码调用了 Intl.NumberFormat 对象的 format 方法来实现对数字的格式化，并将数字格式化为美元货币格式。在通过格式化器格式化数字时，en-US 代码表示文本使用的语言环境，style 用于指定样式类型，具体取值可以是 currency（货币样式），decimal（数字样式）或 percent（百分比样式）。currency 属性中指定了该数字格式所对应的货币类型为美元。

国际化数字处理

我们知道，在不同国家和地区，数字格式的表达方式是不同的。如在美国，“十分位”就是三个数字分隔，但在法国，“十分位”使用了逗号分隔符。在默认情况下，Intl.NumberFormat 会自动识别当前本地化环境，并根据其进行格式化。

下面是一个使用 demo，该 demo 将一个数字格式化为本地的小数表示方式：

const number = 3500.03;
console.log(new Intl.NumberFormat().format(number)); // => 3,500.03 (en-US)
console.log(new Intl.NumberFormat('fr-FR').format(number)); // => 3 500,03 (fr-FR)
console.log(new Intl.NumberFormat('zh-CN').format(number)); // => 3,500.03 (zh-CN)

可以看到，在不同的区域设置中，数字格式化都有所不同。Intl.NumberFormat 的默认行为是按照当前地区环境来格式化数字，但可以通过通过设置构造函数的第一个参数来指定其他数字格式。

数字样式处理

在数字样式的括号中，一般会使用分号表示多个样式的取值并行存在，应用的效果也会依数字的大小而定。例如下面的示例是在台湾地区的数字格式：

const formatter = new Intl.NumberFormat('zh-TW', {style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2 });
console.log(formatter.format(12345)); // => 12,345.00
console.log(formatter.format(123456)); // => 123,456.00

这里的 zh-TW 表示使用 Taiwan 地区的本地化环境，样式的类型为 decimal，其中 minimumFractionDigits 和 maximumFractionDigits 指定了小数位数的最小值和最大值。具体的小数位数表达方式，与每个国家和地区的语言规则有关。

百分比样式处理

百分比格式是通过 style: 'percent' 来指定的。在这种样式下，数字将被格式化为百分比并输出。具体的百分比样式处理方式，也会依据地区和语言规则的变化而变化。

const formatter = new Intl.NumberFormat('en-US', {style: 'percent', minimumFractionDigits: 2, maximumFractionDigits: 2});
console.log(formatter.format(0.1234)); // => 12.34%
console.log(formatter.format(1)); // => 100.00%

需要注意的是，百分数格式的输出是自动进行数学计算的。当一个数乘以 100 以后，会根据用户定义的数字格式进行输出。

货币样式处理

货币样式是根据不同国家或地区的货币，进行数字转化的处理。作为一个程序员，你需要为你的用户考虑到货币格式的不同。

const formatter = new Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 });
console.log(formatter.format(123456.78)); // => $123,456.78

需要注意的是，货币样式使用了 style: 'currency' 来指定，还需要使用 currency 属性进行设置。通过设置这些参数来自定义本地化的货币格式。

数字四舍五入

当面临多语言数字格式化的需求时，数字可能需要进行四舍五入并且显式的使用本地化环境。这种情况下，有两种方法可以进行操作。一种方法是将数字先进行四舍五入处理，再调用 format 方法，另一种方法则是在构造函数中设置 maximumFractionDigits 或 minimumFractionDigits。

const formatter = new Intl.NumberFormat('zh-Hans-CN', { maximumFractionDigits: 2, minimumFractionDigits: 2 });
console.log(formatter.format(Math.round(123.456))); // => 123.46
console.log(formatter.format(123.456)); // => 123.46

const formatter = new Intl.NumberFormat('zh-Hans-CN', { style: 'currency', currency: 'CNY', currencyDigits: 0 });
console.log(formatter.format(Math.round(123.456))) // => ￥123

在以上示例代码中，我们首先使用 Math.round() 进行了四舍五入计算，并使用 format 进行本地化的处理。也可以在构造函数中设置 maximumFractionDigits 和 minimumFractionDigits 属性，以指定输出格式所需要的最小和最大小数位数。同时，使用 style: 'currency' 指定了样式为货币类型，并且 currency: 'CNY' 指定了货币类型为人民币，并且货币位数为 0。

科学计数法

Intl.NumberFormat 可以支持科学计数法。在构造函数中设置 notation: 'scientific' 参数以支持科学计数法。在中国大陆的国际机构中，科学计数法也经常用到。

const formatter = new Intl.NumberFormat('scientific', {notation: 'scientific'})
console.log(formatter.format(123456789)); // => 1.23456789E+8

小结

本文对于 Intl.NumberFormat API 的使用方式和数字格式化的本地化处理进行了全面的阐述。希望可以对读者有所帮助。需要注意的是，Intl.NumberFormat 需要在支持国际化 API 的浏览器或环境中使用，并且其字符串的格式是一种标准化的 ISO 639 语言和 ISO 3166 使用。有关更详细的规范说明，请参阅相关的国际化 API 文档。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67cff4c6e46428fe9ec50c77

ES12 中 Intl.NumberFormat 的全面解读