Процесс форматирования числа как валюты может быть утомительной задачей. Кажется, что это небольшая задача, но количество строк и пограничных случаев может увеличиваться, если учитывать такие факторы, как интернационализация и различные стандарты форматирования. К счастью, ES2015 представил API интернационализации, который может сделать процесс форматирования числа как валюты очень простым.

Написание собственной функции форматирования

Мы наверняка можем собрать для этого хакерскую функцию, верно?

let formatCurrency = (val, currency) => {
    let val;    
    switch (currency) {
        case 'USD':
            val = `$ ${val}`;
            break;
        case 'EUR':
            val = `€ ${val}`;
            break;
        default:
            throw new Error('Unknown currency format');
    }
    return val;
}

Но что, если мы хотим обрабатывать форматирование, например, 100 долларов — это хорошо, но 1000 должны отображаться как 1000 долларов? Давайте воспользуемся магией регулярных выражений?

let formatCurrency = (val, currency) => {
  let currencyVal = val.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'); 
  switch (currency) {
        case 'USD':
            val = `$ ${currencyVal}`;
            break;
        case 'EUR':
            val = `€ ${currencyVal}`;
            break;
        default:
            throw new Error('Unknown currency format');
    }
    return val;
}


console.log(formatCurrency(1000,'USD'));
// "$ 1,000.00"

Проблемы с этим подходом:

  • Есть куча валют (~300)
  • Некоторые валюты используют «.» в качестве разделителя между тысячами вместо «,»
  • Эти валюты используют «,» в качестве разделителя шагов
    «1000,05 долларов США» будет «1,000,05 евро» в немецких евро.
  • Некоторые валюты имеют разделители тысяч в пользовательских позициях
    1000000 будет ₹10,00,000.00″ вместо $1,000,000,00″

И так далее. Мы не хотим проводить тестирование на всех валютах и ​​во всех браузерах.

Форматирование с использованием строки локали (лучший способ)

До ES2015 и API интернационализации мы все еще могли форматировать число как валюту, используя локаль и форматирование строк. Локаль — это набор параметров, которые позволяют разработчику указывать атрибуты, специфичные для региона, такие как:

  • Формат валюты
  • Формат даты и времени
  • Формат дня недели
  • Формат номера
  • Единица измерения
const cashBalance = 10000; // 🤑

console.log(
  cashBalance.toLocaleString('en-US',
    {style: 'currency', currency: 'USD'}
  )
); // '$10,000.00'

Это прекрасно работает и было рекомендуемым способом до того, как появился API интернационализации ECMAScript. Но некоторые (старые) браузеры используют языковой стандарт системы вместо языкового стандарта, указанного в качестве параметра. Кроме того, поскольку toLocaleString — это метод манипуляции со строками в целом, это неэффективный вариант. Таким образом, была введена спецификация Intl.NumberFormat, и это предпочтительный способ форматирования числа как валюты в JavaScript.

Отформатируйте число как валюту, используя Intl.NumberFormat

new Intl.NumberFormat([locales[, options]])

Первый параметр — это строка локали, представляющая настройки языка и региона. Он состоит из кода языка и кода страны.

en-US: английский +США
de-DE: немецкий + Германия
en-IN: английский + Индия

Параметр options имеет массу опций. Но мы будем придерживаться стиля, валюты и минимальной дроби для этого поста.

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

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

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

Собираем все вместе:

const usDollar = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2
})

const rupeeIndian = Intl.NumberFormat("en-IN", {
    style: "currency",
    currency: "INR",
    minimumFractionDigits: 2
});

const euroGerman = Intl.NumberFormat("de-DE", {
    style: "currency",
    currency: "EUR",
    minimumFractionDigits: 2
});

const price = 1000000.0535;

console.log(usDollar.format(price)); // $1,000,000.05

console.log(rupeeIndian.format(price)); // ₹10,00,000.05

console.log(euroGerman.format(price)); // 1.000.000,05 €

Вот совместимость браузера, если вы хотите сами убедиться, следует ли вам использовать API интернационализации или нет:

И это все, что вам нужно знать о том, как форматировать число как валюту с помощью ECMAScript. Если у вас есть какие-либо вопросы, не стесняйтесь оставлять комментарии ниже.

Первоначально опубликовано на https://www.wisdomgeek.com 5 марта 2021 г.