Как отформатировать число как валюту в Javascript?

Объект Intl предоставляет богатый API конструкторов, которые позволяют вам манипулировать отображением содержимого практически для всех ваших нужд.

Частым требованием является отображение чисел в различных форматах или валютных значений, этого можно достичь с помощью Intl.NumberFormat.

Вы также можете форматировать даты, в этой статье я покажу вам, как это сделать.

Конструкторы, предоставляемые Intl API, принимают два аргумента

значение locale или, проще говоря, идентификатор языка, который вы хотите использовать.

Каждый конструктор раскрывает по крайней мере один метод format, который получает значение, которое вы хотите отформатировать.

Примером того, что можно сделать с помощью этого API, является конвертация значения в различные валюты.

function currencyFormatter({ currency, value}) {
  const formatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    minimumFractionDigits: 2,
    currency
  }) 
  return formatter.format(value)
}

const value = 123456

const dollar = currencyFormatter({
  currency: "USD",
  value
}) //$123,456.00

const pound = currencyFormatter({
  currency: "GBP",
  value
}) // £123,456.00


const peso =  currencyFormatter({
  currency: "CLP",
  value
}) // CLP 123,456.00

const dinar = currencyFormatter({
  currency: "DZD",
  value
}) // DZD 123,456.00

Войдите в полноэкранный режим Выход из полноэкранного режима

В этом примере первое, что вы найдете, это создание функции.

Эта функция currencyFormatter принимает объект с двумя атрибутами:

Внутри функция использует Intl.NumberFormat с языком en-US и определяет параметры форматирования.

Как видно из примера, вы можете преобразовать значение (в данном случае число 123456 ) в различные форматы валют.

Но можно пойти дальше, количество опций достаточно велико, что позволяет определять различные части формата.

type Options = {
    compactDisplay?: "short" | "long"; // Only used when notation is "compact"
    currencyDisplay?: "symbol" | "narrowSymbol" | "code" | "name";
    currencySign?: "standard" | "accounting";
    localeMatcher?: "lookup" | "best fit";
    notation?: "standard" | "scientific" | "engineering" | "compact";
    numberingSystem?: 'arab' | 'arabext' | 'bali' | 'beng' | 'deva' | 'fullwide' | 'gujr' | 'guru' | 'hanidec' | 'khmr' | 'knda' | 'laoo' | 'latn' | 'limb' | 'mlym' | 'mong' | 'mymr' | 'orya' | 'tamldec' | 'telu' | 'thai' | 'tibt';
    signDisplay?: "auto" | "always" | "exceptZero" | "negative" | "never" ;
    style?: "decimal" | "currency" | "percent" | "unit";
    unit?: string;
    unitDisplay?: "long" | "short" | "narrow";
    useGrouping?: "always" | "auto" | boolean | "min2";
    roundingMode?: "ceil" | "floor" | "expand" | "trunc" | "halfCeil" | "halfFloor" | "halfExpand" | "halfTrunc" | halfEven";
    roundingPriority?: "auto" | "morePrecision" | "lessPrecision";
    roundingIncrement?: 1 | 2 | 5 | 10 | 20 | 25 | 50 | 100 | 200 | 250 | 500 | 1000 | 2000 | 2500 | 5000;
    trailingZeroDisplay?: "auto" | "stripIfInteger";
    minimumIntegerDigits?: number;
    minimumFractionDigits?: number;
    maximumFractionDigits?: number;
    minimumSignificantDigits?: number;
    maximumSignificantDigits?: number;
}

Войдите в полноэкранный режим Выход из полноэкранного режима

Кроме того, если по какой-то причине этот набор опций не позволяет сделать то, что вам нужно, вы можете воспользоваться другим методом, предоставляемым NumberFormat: formatToParts.

Этот метод возвращает массив объектов, представляющих числовое значение в виде строки, разделенной на части, так что вы можете манипулировать форматом по своему усмотрению.

const formatToParts = new Intl.NumberFormat('en-US', {
  currency: 'USD',
  style: 'currency',
  minimumFractionDigits: 2
}).formatToParts(value) 
/*
[
  { type: "currency", value: "$"},
  { type: "integer", value: "123" },
  { type: "group", value: "," },
  { type: "integer", value: "456" },
  { type: "decimal", value: "." },
  { type: "fraction", value: "00" }
]

Войдите в полноэкранный режим Выход из полноэкранного режима

Но вы можете не только форматировать числа в виде валюты, но и изменять способ отображения чисел.

function formatCompact(value) {
  const result = new Intl.NumberFormat(
    'en-US',
    { notation: "compact"}
  ).format(value)
  return result;
}

const res1 = formatCompact(123)     // 123
const res2 = formatCompact(1234)    // 1.2K
const res3 = formatCompact(12345)   // 12K
const res4 = formatCompact(123456)  // 123K
const res5 = formatCompact(1234567) // 1.2M

Войдите в полноэкранный режим Выход из полноэкранного режима

Компактная форма числа — это формат, широко используемый в социальных сетях и других веб-/мобильных приложениях, поскольку он позволяет «обобщить» значение без потери его значимости, а также хорошо смотрится на интерфейсе.

В этом случае вы используете опцию notation со значением compact, и Javascript сделает свое дело.

✉️ Присоединяйтесь к Micro-bytes 🐦 Следите за мной в Twitter ❤️ Поддержите мою работу