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

Введение

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

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

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

Понимание опции currencyDisplay

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

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

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

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

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

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

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

console.log(formatter.format(25));
// Вывод: "$25.00"

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

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

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

console.log(usFormatter.format(25));
// Вывод: "$25.00"

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

console.log(deFormatter.format(25));
// Вывод: "25,00 $"

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

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

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

console.log(usFormatter.format(25));
// Вывод: "€25.00"

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

console.log(deFormatter.format(25));
// Вывод: "25,00 €"

Формат с символом хорошо работает, когда пользователи работают в контексте одной валюты. Американский сайт электронной коммерции, показывающий цены в долларах США, может безопасно использовать знак доллара. Европейский сайт, показывающий цены в евро, может использовать символ евро.

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

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

console.log(usFormatter.format(25));
// Вывод: "CA$25.00"

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

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

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

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

console.log(symbolFormatter.format(25));
// Вывод: "$25.00"

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

console.log(narrowFormatter.format(25));
// Вывод: "$25.00"

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

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

console.log(symbolFormatter.format(25));
// Вывод: "CA$25.00"

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

console.log(narrowFormatter.format(25));
// Вывод: "$25.00"

Формат narrow symbol удаляет префикс CA, показывая только знак доллара. Это экономит место, но теряет различие между канадскими и американскими долларами.

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

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

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

console.log(narrowFormatter.format(25));
// Вывод: "25,00 €"

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

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

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

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

console.log(formatter.format(25));
// Вывод: "USD 25.00"

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

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

console.log(usFormatter.format(25));
// Вывод: "EUR 25.00"

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

console.log(deFormatter.format(25));
// Вывод: "25,00 EUR"

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

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

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

console.log(usdFormatter.format(25));
// Вывод: "USD 25.00"

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

console.log(cadFormatter.format(25));
// Вывод: "CAD 25.00"

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

console.log(audFormatter.format(25));
// Вывод: "AUD 25.00"

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

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

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

Использование формата имени для максимальной ясности

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

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

console.log(formatter.format(25));
// Вывод: "25.00 US dollars"

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

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

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

console.log(enFormatter.format(25));
// Вывод: "25.00 euros"

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

console.log(deFormatter.format(25));
// Вывод: "25,00 Euro"

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

console.log(frFormatter.format(25));
// Вывод: "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));
// Вывод: "1,000 Japanese yen"

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

console.log(deFormatter.format(1000));
// Вывод: "1.000 Japanische Yen"

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

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

Недостатком является пространство. Названия валют значительно длиннее, чем символы или коды. Компактный мобильный интерфейс может столкнуться с трудностями при отображении 25.00 US dollars, где $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));
// Вывод: "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));
// Вывод: "(25.00 долларов США)"

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

Что нужно запомнить

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

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