Привет, товарищи программисты, я хочу поговорить о кое-чем довольно обыденном, но невероятно важном: форматировании валюты в JavaScript. Я работаю в этой области уже много лет, и, несмотря на то, что я работал над широким кругом проектов, эта тема неожиданно возникла во время одного из моих проектов веб-разработки. Это не кричаще, но правильное понимание имеет значение.

Intl.NumberFormat в помощь

К счастью, в JavaScript есть готовое решение для обработки интернационализации: Intl API. Этот глобальный объект представляет собой кладезь методов для обработки дат, чисел и валют, среди прочего.

Для наших целей волшебство происходит с методом Intl.NumberFormat. Позвольте мне показать вам, как это работает с некоторым кодом.

const amount = 1234.56;
const formatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
});

console.log(formatter.format(amount));  // "$1,234.56"

Что мы здесь делаем, так это инициализируем новый экземпляр Intl.NumberFormat с «en-US» в качестве локали и объект параметров, в котором мы указываем стиль как «валюту» и валюту как «USD». Когда мы запускаем formatter.format(amount), мы получаем наше число в формате строки валюты с символом доллара США.

В этом суть. Но как насчет других валют или локалей? Вот где действительно проявляется универсальность Intl.NumberFormat.

const amount = 1234.56;
const formatterEuro = new Intl.NumberFormat('de-DE', {
    style: 'currency',
    currency: 'EUR',
});

console.log(formatterEuro.format(amount));  // "1.234,56 €"

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

Помните об углах

Хотя Intl.NumberFormat мощный, он не идеален.

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

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

console.log(formatter.format(amountInCents / 100));  // "$1,234.56"

Подведение итогов

Форматирование валюты в JavaScript может быть не первым делом в списке изучения разработчика, но когда вы имеете дело с интернационализированными приложениями, очень удобно знать, как использовать такие инструменты, как Intl.NumberFormat.

Это все для этого поста. Я просто хотел поделиться своим опытом форматирования валюты и надеюсь, что вы нашли его полезным. Давайте продолжать учиться и совершенствовать свое ремесло по ходу дела.



Присоединяйтесь к Medium по моей реферальной ссылке — Leo G.
Прочитайте все истории от Leo G. (и тысяч других авторов на Medium). Ваш членский взнос напрямую поддерживает Leo G…medium.com



  1. Веб-документы MDN: Intl.NumberFormat: исчерпывающее руководство по Intl.NumberFormat от веб-документов MDN Mozilla.
  2. Как использовать JavaScript Intl API для форматирования дат, валют и чисел: исчерпывающее руководство, описывающее основы JavaScript Intl API, включая форматирование валюты.