在 ES12 中使用 NumberFormat API-JavaScript中文网-JavaScript教程资源分享门户

在 ES12 中使用 NumberFormat API

在 ES12 中，NumberFormat API 是一个非常实用的新特性，它可以帮助我们更加方便地格式化数字。在前端开发中，数字的格式化是非常常见的需求，比如将数字以千位分隔符的形式展示、将数字转换为货币形式等等。使用 NumberFormat API 可以让我们更加轻松地完成这些任务。

NumberFormat API 的基本用法

NumberFormat API 的基本用法非常简单，我们只需要创建一个 NumberFormat 实例，并调用其 format 方法即可。下面是一个示例代码：

const number = 1234567.89;
const formatter = new Intl.NumberFormat('en-US');
console.log(formatter.format(number));

上面的代码中，我们首先定义了一个数字 number，然后创建了一个 NumberFormat 实例 formatter，其中 'en-US' 是语言地区代码，表示使用美国英语进行格式化。最后，我们调用了 formatter 的 format 方法，将数字格式化为千位分隔符形式。运行上面的代码，输出结果为：

1,234,567.89

NumberFormat API 的高级用法

除了基本用法外，NumberFormat API 还提供了许多高级用法，可以帮助我们更加灵活地进行数字格式化。下面是一些示例代码：

指定小数位数

const number = 1234.5678;
const formatter = new Intl.NumberFormat('en-US', {
  minimumFractionDigits: 2,
  maximumFractionDigits: 4,
});
console.log(formatter.format(number));

上面的代码中，我们定义了一个数字 number，然后创建了一个 NumberFormat 实例 formatter，其中 minimumFractionDigits 和 maximumFractionDigits 分别表示最小和最大小数位数。运行上面的代码，输出结果为：

1,234.5678

指定货币格式

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

上面的代码中，我们定义了一个数字 number，然后创建了一个 NumberFormat 实例 formatter，其中 style 表示格式化样式，currency 表示货币类型。运行上面的代码，输出结果为：

$1,234.57

指定数字分组符号

const number = 12345678.9;
const formatter = new Intl.NumberFormat('en-US', {
  useGrouping: true,
  maximumFractionDigits: 0,
});
console.log(formatter.format(number));

上面的代码中，我们定义了一个数字 number，然后创建了一个 NumberFormat 实例 formatter，其中 useGrouping 表示是否使用数字分组符号。运行上面的代码，输出结果为：

12,345,679

总结

在 ES12 中，NumberFormat API 是一个非常实用的新特性，它可以帮助我们更加方便地格式化数字。通过本文的介绍，我们可以了解到 NumberFormat API 的基本用法和一些高级用法，可以帮助我们更加灵活地进行数字格式化。在实际开发中，我们可以根据具体需求选择不同的参数进行配置，以达到最优的效果。

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