如何在 ES10 中使用 Intl.NumberFormat 格式化数字-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，经常需要对数字进行格式化处理。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到20
maximumFractionDigits：表示小数点后最多留几位，可以是0到20
useGrouping：表示是否使用千位分隔符，默认为 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 选项。例如：

// www.javascriptcn.com code example
const formatter1 = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'symbol',
});

const formatter2 = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'code',
});

const formatter3 = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'name',
});

console.log(formatter1.format(1234.56)); // $1,234.56
console.log(formatter2.format(1234.56)); // USD1,234.56
console.log(formatter3.format(1234.56)); // 1,234.56 US dollars

其中 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' 来让负数使用括号。

// www.javascriptcn.com code example
const formatter1 = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  signDisplay: 'always',
});
console.log(formatter1.format(-1234.56)); // -$1,234.56

const formatter2 = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  signDisplay: 'never',
});
console.log(formatter2.format(-1234.56)); // $1,234.56

数字压缩

有时，数字过大，直接将他们格式化得出来的字符可能不太友好。例如，128300，我们希望格式化成 128K 这样的形式。这时，就可以使用 notation: "compact" 来将数字压缩。

// www.javascriptcn.com code example
const formatter1 = new Intl.NumberFormat('en-US', {
  style: 'decimal',
  notation: 'compact'
});
console.log(formatter1.format(1000)); // 1k

const formatter2 = new Intl.NumberFormat('en-US', {
  style: 'decimal',
  notation: 'compact',
  maximumFractionDigits: 2
});
console.log(formatter2.format(12345)); // 12.35k

上述例子中，notation 选项的取值为 compact 时，数值最多只有一位小数。当需要保留更多小数时，可以设置 maximumFractionDigits 选项。

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

如何在 ES10 中使用 Intl.NumberFormat 格式化数字