Процесс форматирования числа как валюты может быть утомительной задачей. Кажется, что это небольшая задача, но количество строк и пограничных случаев может увеличиваться, если учитывать такие факторы, как интернационализация и различные стандарты форматирования. К счастью, 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 г.