Intl.NumberFormat.prototype.formatToParts()

Метод formatToParts() экземпляров Intl.NumberFormat возвращает массив объектов, представляющих каждую часть отформатированной строки, которая была бы возвращена с помощью format(). Он полезен для построения пользовательских строк из специфичных для локали токенов.

Попробуйте

const amount = 654321.987;
const options = { style: "currency", currency: "USD" };
const numberFormat = new Intl.NumberFormat("en-US", options);

const parts = numberFormat.formatToParts(amount);
const partValues = parts.map((p) => p.value);

console.log(partValues);
// Expected output: "["$", "654", ",", "321", ".", "99"]"

Синтаксис

formatToParts(number)

Параметры

number

Число (Number), большое целое (BigInt) или строка для форматирования. Строки анализируются так же, как и при преобразовании чисел, за исключением того, что formatToParts() будет использовать точное значение, которое представляет строка, избегая потери точности при неявном преобразовании в число.

Возвращаемое значение

Array объектов, содержащих отформатированное число по частям. Каждый объект имеет два свойства: type и value, каждое из которых содержит строку. Конкатенация строк value в заданном порядке даст ту же строку, что и format(). Свойство type может быть одним из следующих:

literal

Любая строка, являющаяся частью шаблона форматирования; например, " ". Обратите внимание, что общие токены, такие как десятичный разделитель или знаки плюс/минус, имеют свои собственные типы токенов.

integer

Целая часть числа или его сегмент, если используется группировка (управляется с помощью options.useGrouping).

group

Строка-разделитель групп, например, ",". Присутствует только при использовании группировки (управляется с помощью options.useGrouping).

decimal

Строка десятичного разделителя, например, ".". Присутствует только при наличии fraction.

fraction

Дробная часть числа.

compact

Компактная экспонента, например, "M" или "thousands". Присутствует только тогда, когда options.notation — это "compact". Форма ("short" или "long") может контролироваться с помощью options.compactDisplay.

exponentSeparator

Разделитель экспоненты, например, "E". Присутствует только тогда, когда options.notation — это "scientific" или "engineering".

exponentMinusSign

Строка знака минуса экспоненты, например, "-". Присутствует только тогда, когда options.notation — это "scientific" или "engineering", и экспонента отрицательна.

exponentInteger

Целочисленное значение экспоненты. Присутствует только тогда, когда options.notation — это "scientific" или "engineering".

nan

Строка, представляющая NaN, например, "NaN". Это единственный токен, представляющий само число, когда число — NaN.

infinity

Строка, представляющая Infinity или -Infinity, например, "∞". Это единственный токен, представляющий само число, когда число — Infinity или -Infinity.

plusSign

Знак плюс, например, "+".

minusSign

Знак минус, например, "-".

percentSign

Знак процента, например, "%". Присутствует только тогда, когда options.style — это "percent".

unit

Строка единицы измерения, например, "l" или "litres". Присутствует только тогда, когда options.style — это "unit". Форма ("short", "narrow" или "long") может контролироваться с помощью options.unitDisplay.

currency

Строка валюты, например, "$", "€", "Dollar", или "Euro". Присутствует только тогда, когда options.style — это "currency". Форма ("code", "symbol", "narrowSymbol", или "name") может контролироваться с помощью options.currencyDisplay.

unknown

Зарезервировано для любого токена, который не распознан как один из вышеперечисленных; должен встречаться редко.

Примеры

Использование formatToParts()

Метод format() выводит локализованные, непрозрачные строки, которыми невозможно манипулировать напрямую:

const number = 3500;

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

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

Однако во многих пользовательских интерфейсах вы можете захотеть настроить форматирование этой строки или чередовать ее с другими текстами. Метод formatToParts() выдает ту же информацию по частям:

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.join(), можно вставить дополнительную разметку для определенных компонентов.

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

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

Спецификации

Совместимость с браузерами

Смотрите также

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