Intl.NumberFormat.prototype.formatToParts()

Intl.NumberFormat 实例的 formatToParts() 方法允许对此 Intl.NumberFormat 对象生成的字符串进行区域设置感知格式设置。

¥The formatToParts() method of Intl.NumberFormat instances allows locale-aware formatting of strings produced by this Intl.NumberFormat object.

Try it

语法

¥Syntax

js
formatToParts()
formatToParts(number)

参数

¥Parameters

number Optional

要格式化的 NumberBigInt

返回值

¥Return value

包含部分格式化数字的 Array 个对象。

¥An Array of objects containing the formatted number in parts.

描述

¥Description

formatToParts() 方法对于数字字符串的自定义格式很有用。它返回 Array 个对象,其中包含特定于区域设置的标记,可以从中构建自定义字符串,同时保留特定于区域设置的部分。formatToParts() 方法返回的结构如下所示:

¥The formatToParts() method is useful for custom formatting of number strings. It returns an Array of objects containing the locale-specific tokens from which it possible to build custom strings while preserving the locale-specific parts. The structure the formatToParts() method returns, looks like this:

js
[
  { type: "integer", value: "3" },
  { type: "group", value: "." },
  { type: "integer", value: "500" },
];

可能的类型如下:

¥Possible types are the following:

compact

"long""short" 形式的指数,具体取决于当 notation 设置为 compact 时如何指定 compactDisplay(默认为 short)。

currency

货币字符串,例如符号 "$" 和 "€" 或名称 "美元"、"欧元",具体取决于 currencyDisplay 的指定方式。

decimal

小数点分隔符字符串 (".")。

exponentInteger

notation 设置为 scientificengineering 时,指数整数值。

exponentMinusSign

指数减号字符串 ("*")。

exponentSeparator

notation 设置为 scientificengineering 时,指数分隔符。

fraction

分数。

group

组分隔符字符串 (",")。

infinity

Infinity 字符串 ("∞")。

integer

整数。

literal

格式化数字中的任何文字字符串或空格。

minusSign

减号字符串 ("*")。

nan

NaN 字符串 ("NaN")。

plusSign

加号字符串 ("*")。

percentSign

百分号字符串 ("%")。

unit

单位字符串,例如 "l" 或 "litres",具体取决于 unitDisplay 的指定方式。

unknown

unknown 类型结果的字符串。

示例

¥Examples

比较 format 和 formatToParts

¥Comparing format and formatToParts

NumberFormat 输出无法直接操作的本地化、不透明字符串:

¥NumberFormat outputs localized, opaque strings that cannot be manipulated directly:

js
const number = 3500;

const formatter = new Intl.NumberFormat("de-DE", {
  style: "currency",
  currency: "EUR",
});

formatter.format(number);
// "3.500,00 €"

然而,在许多用户界面中都希望自定义该字符串的格式。formatToParts 方法通过为你提供部分字符串来启用 NumberFormat 格式化程序生成的字符串的区域设置感知格式:

¥However, in many User Interfaces there is a desire to customize the formatting of this string. The formatToParts method enables locale-aware formatting of strings produced by NumberFormat formatters by providing you the string in parts:

js
formatter.formatToParts(number);

// return value:
[
  { type: "integer", value: "3" },
  { type: "group", value: "." },
  { type: "integer", value: "500" },
  { type: "decimal", value: "," },
  { type: "fraction", value: "00" },
  { type: "literal", value: " " },
  { type: "currency", value: "€" },
];

现在,这些信息可以单独使用,并且可以以自定义方式再次格式化和连接。例如,使用 Array.prototype.map()箭头函数switch 语句模板文字Array.prototype.reduce()

¥Now the information is available separately and it can be formatted and concatenated again in a customized way. For example by using Array.prototype.map(), arrow functions, a switch statement, template literals, and Array.prototype.reduce().

js
const numberString = formatter
  .formatToParts(number)
  .map(({ type, value }) => {
    switch (type) {
      case "currency":
        return `<strong>${value}</strong>`;
      default:
        return value;
    }
  })
  .reduce((string, part) => string + part);

使用 formatToParts() 方法时,这将使货币变为粗体。

¥This will make the currency bold, when using the formatToParts() method.

js
console.log(numberString);
// "3.500,00 <strong>€</strong>"

规范

Specification
ECMAScript Internationalization API Specification
# sec-intl.numberformat.prototype.formattoparts

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看