Intl.NumberFormat：轻松实现数字格式化

2023-10-28 20:24:48

引言

在前端开发中，我们经常需要对数字进行格式化，比如货币、日期、时间等。Intl.NumberFormat 就是一个非常适合这个场景的 JavaScript 内置 API。它允许我们根据不同的语言环境和地区，使用不同的格式来显示数字。

基本用法

Intl.NumberFormat 的基本用法非常简单，只需创建一个新的 Intl.NumberFormat 对象，然后使用 format() 方法来格式化数字即可。例如：

const numberFormat = new Intl.NumberFormat('en-US');
const formattedNumber = numberFormat.format(1234567.89);
console.log(formattedNumber); // 1,234,567.89

输出结果为 "1,234,567.89"。

高级用法

Intl.NumberFormat 还支持一些高级用法，比如自定义格式化模式、使用不同的语言环境和地区、以及格式化货币和百分比等。

自定义格式化模式

我们可以使用自定义格式化模式来控制数字的格式化方式。例如，我们可以使用以下格式化模式来将数字格式化为货币：

const numberFormat = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
});
const formattedNumber = numberFormat.format(1234567.89);
console.log(formattedNumber); // $1,234,567.89

输出结果为 "$1,234,567.89"。

使用不同的语言环境和地区

我们可以使用不同的语言环境和地区来格式化数字。例如，我们可以使用以下代码来将数字格式化为法语：

const numberFormat = new Intl.NumberFormat('fr-FR');
const formattedNumber = numberFormat.format(1234567.89);
console.log(formattedNumber); // 1 234 567,89

输出结果为 "1 234 567,89"。

格式化货币和百分比

Intl.NumberFormat 还支持格式化货币和百分比。例如，我们可以使用以下代码来将数字格式化为货币：

const numberFormat = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
});
const formattedNumber = numberFormat.format(1234567.89);
console.log(formattedNumber); // $1,234,567.89

输出结果为 "$1,234,567.89"。

我们可以使用以下代码来将数字格式化为百分比：

const numberFormat = new Intl.NumberFormat('en-US', {
  style: 'percent',
});
const formattedNumber = numberFormat.format(0.123456789);
console.log(formattedNumber); // 12.35%