Intl.NumberFormat.prototype.formatToParts()

number 可选

一个 Number 或 BigInt 用于格式化。

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

该 formatToParts() 方法对于数字字符串的自定义格式化很有用。它返回一个 Array 包含区域特定的标记的对象，您可以通过这些标记构建自定义字符串，同时保留区域特定的部分。该 formatToParts() 方法返回的结构如下

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

可能的类型如下

compact

指数以 "long" 或 "short" 形式显示，具体取决于 compactDisplay（默认情况下为 short）在 notation 设置为 compact 时如何指定。

currency

货币字符串，例如符号 "$" 和 "€" 或名称 "Dollar"、"Euro"，具体取决于 currencyDisplay 如何指定。

decimal

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

exponentInteger

指数整数值，当 notation 设置为 scientific 或 engineering 时。

exponentMinusSign

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

exponentSeparator

指数分隔符，当 notation 设置为 scientific 或 engineering 时。

fraction

分数。

group

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

infinity

该 Infinity 字符串 ("∞")。

integer

整数。

literal

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

minusSign

减号字符串 ("-")。

nan

该 NaN 字符串 ("NaN")。

plusSign

加号字符串 ("+")。

percentSign

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

unit

单位字符串，例如 "l" 或 "litres"，具体取决于 unitDisplay 如何指定。

unknown

unknown 类型结果的字符串。

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

const number = 3500;

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

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

但是，在许多用户界面中，人们希望自定义此字符串的格式。该 formatToParts 方法通过以部分形式提供字符串，从而实现对由 NumberFormat 格式化程序生成的字符串进行区域感知格式化

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().

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() 方法。

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

• Intl.NumberFormat
• Intl.NumberFormat.prototype.format()
• Intl.DateTimeFormat.prototype.formatToParts()