Как отображать валюту: символ, код или название

Введение

Когда вы показываете цену или денежную сумму, нужно решить, как представить валюту. Цена товара может отображаться как $25, USD 25 или 25 долларов США. Каждый формат подходит для разных целей и лучше работает в определённых ситуациях.

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

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

Как работает опция currencyDisplay

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

Доступны четыре варианта:

symbol отображает локализованный символ валюты, например $ или €
narrowSymbol показывает компактный символ, например $ вместо US$
code выводит код валюты по ISO, например USD или EUR
name отображает полное название валюты, например долларов США или евро

Каждый формат по-разному визуально представляет одну и ту же сумму. Выбор зависит от требований интерфейса, доступного места и ожиданий вашей аудитории.

Использование формата символа для повседневных отображений

Формат symbol является значением по умолчанию для currencyDisplay. Он показывает локализованный символ валюты, который пользователи в выбранной локали ожидают увидеть.

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

console.log(formatter.format(25));
// Output: "$25.00"

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

Символ адаптируется в зависимости от локали и валюты. Если вы форматируете доллары США для немецкой локали, форматер использует локализованный символ с указанием страны.

const usFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'symbol'
});

console.log(usFormatter.format(25));
// Output: "$25.00"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'symbol'
});

console.log(deFormatter.format(25));
// Output: "25,00 $"

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

Если вы форматируете евро для разных локалей, символ евро сохраняется, но правила форматирования меняются.

const usFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'symbol'
});

console.log(usFormatter.format(25));
// Output: "€25.00"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'symbol'
});

console.log(deFormatter.format(25));
// Output: "25,00 €"

Формат символа хорошо подходит, когда пользователи работают только с одной валютой. Например, на американском e-commerce сайте цены в USD можно показывать со знаком доллара, а на европейском — с символом евро.

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

const usFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'CAD',
  currencyDisplay: 'symbol'
});

console.log(usFormatter.format(25));
// Output: "CA$25.00"

Форматер добавляет CA$, чтобы отличить канадские доллары от американских при форматировании для американской локали.

Использование narrowSymbol для компактных отображений

Формат narrowSymbol отображает символ валюты без префикса страны. Это создает более компактное представление, которое удобно для интерфейсов с ограниченным пространством.

const symbolFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'symbol'
});

console.log(symbolFormatter.format(25));
// Output: "$25.00"

const narrowFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'narrowSymbol'
});

console.log(narrowFormatter.format(25));
// Output: "$25.00"

Для долларов США в американской локали оба формата дают одинаковый результат, потому что префикс страны не требуется. Разница становится заметной при форматировании валют, для которых обычно указывается страна.

const symbolFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'CAD',
  currencyDisplay: 'symbol'
});

console.log(symbolFormatter.format(25));
// Output: "CA$25.00"

const narrowFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'CAD',
  currencyDisplay: 'narrowSymbol'
});

console.log(narrowFormatter.format(25));
// Output: "$25.00"

Узкий формат символа убирает префикс CA, оставляя только значок доллара. Это экономит место, но теряется различие между канадским и американским долларом.

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

Узкий формат также влияет на другие валюты в разных локалях.

const narrowFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'narrowSymbol'
});

console.log(narrowFormatter.format(25));
// Output: "25,00 €"

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

Использование кода для однозначного отображения

Формат code отображает код валюты по ISO 4217 вместо символа. Этот трёхбуквенный код однозначно определяет каждую валюту без путаницы.

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

console.log(formatter.format(25));
// Output: "USD 25.00"

Код появляется вместо символа, сразу показывая, какая валюта указана. Такой формат работает во всех локалях с единообразными сокращениями.

const usFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'code'
});

console.log(usFormatter.format(25));
// Output: "EUR 25.00"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'code'
});

console.log(deFormatter.format(25));
// Output: "25,00 EUR"

Код EUR появляется в обоих форматах, но расположение и форматирование чисел соответствуют локальным стандартам. Такое сочетание универсальных кодов валют и локального форматирования чисел делает этот формат полезным для международных задач.

Формат с кодом устраняет путаницу между валютами с одинаковыми символами.

const usdFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'code'
});

console.log(usdFormatter.format(25));
// Output: "USD 25.00"

const cadFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'CAD',
  currencyDisplay: 'code'
});

console.log(cadFormatter.format(25));
// Output: "CAD 25.00"

const audFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'AUD',
  currencyDisplay: 'code'
});

console.log(audFormatter.format(25));
// Output: "AUD 25.00"

Каждому варианту доллара присваивается отдельный код. Пользователи сразу могут отличить доллары США, канадские доллары и австралийские доллары.

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

Минус такого подхода — меньшая привычность. Большинство пользователей узнают $, но могут не сразу понять, что значит CAD. Используйте коды, если ваша аудитория их понимает или если точность важнее привычности.

Использование полного названия валюты для максимальной ясности

Формат name отображает полное название валюты на языке локали. Это полностью исключает путаницу, какую валюту обозначает сумма.

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

console.log(formatter.format(25));
// Output: "25.00 US dollars"

Название валюты пишется полностью, что не оставляет сомнений в том, о какой сумме идет речь. Такой формат особенно полезен для доступности: экранные дикторы четко произносят названия валют, а символы могут озвучиваться по-разному.

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

const enFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'name'
});

console.log(enFormatter.format(25));
// Output: "25.00 euros"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'name'
});

console.log(deFormatter.format(25));
// Output: "25,00 Euro"

const frFormatter = new Intl.NumberFormat('fr-FR', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'name'
});

console.log(frFormatter.format(25));
// Output: "25,00 euros"

В английском — euros, в немецком — Euro, во французском — euros. API автоматически учитывает эти языковые различия, включая нужные формы во множественном числе.

Разные валюты отображаются на соответствующем языке для каждой локали.

const enFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'JPY',
  currencyDisplay: 'name'
});

console.log(enFormatter.format(1000));
// Output: "1,000 Japanese yen"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'JPY',
  currencyDisplay: 'name'
});

console.log(deFormatter.format(1000));
// Output: "1.000 Japanische Yen"

В английском — Japanese yen, в немецком — Japanische Yen. Такая локализация помогает пользователям понять незнакомые валюты на своем языке.

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

Компромисс — это место на экране. Названия валют значительно длиннее, чем символы или коды. Компактному мобильному интерфейсу будет сложно уместить «25,00 долларов США», тогда как «$25,00» поместится без проблем.

Как выбрать правильный формат отображения

Выбирайте значение currencyDisplay с учётом ограничений по месту, уровня знакомства аудитории и возможной неоднозначности.

Используйте symbol для повседневных интерфейсов, где пользователи работают с одной валютой. Интернет-магазины, страницы с ценами и потребительские приложения отлично подходят для символов. Пользователи быстро узнают символы, а сами символы занимают минимум места.

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

Используйте code, когда нужно чётко различать несколько валют без двусмысленности. Финансовые приложения, конвертеры валют, международные бизнес-инструменты и бухгалтерские системы требуют точности, которую дают коды. Этот формат также хорошо подходит для технических случаев, где символы могут вызвать проблемы.

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

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

Учитывайте уровень экспертизы пользователя. Финансовые специалисты понимают коды валют. Обычные пользователи ожидают увидеть символы. Международным пользователям могут понадобиться коды для различения валют. Пользователям с особыми потребностями по доступности удобнее использовать названия.

Совмещение currencyDisplay с другими опциями

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

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

console.log(formatter.format(25.5));
// Output: "USD 25.50"

Формат кода отображается с заданными настройками десятичных знаков. currencyDisplay можно комбинировать с любыми другими опциями, такими как signDisplay, notation или пользовательскими правилами округления.

Различные форматы отображения работают с бухгалтерским стилем.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'name',
  currencySign: 'accounting'
});

console.log(formatter.format(-25));
// Output: "(25.00 US dollars)"

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

Что важно помнить

Опция currencyDisplay определяет, как отображаются валютные единицы в отформатированных суммах. Используйте symbol для привычного повседневного отображения, narrowSymbol для компактных интерфейсов с ограниченным пространством, code для однозначных международных случаев и name для максимальной ясности и доступности.

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