Как отображать полные названия валют вместо символов?

Введение

Символы валют вызывают путаницу в международных приложениях. Знак доллара $ обозначает доллары США, канадские доллары, австралийские доллары и валюты ещё более десятка стран. Пользователь не может понять, о какой валюте идёт речь, только по символу.

Полные названия валют устраняют эту неясность. Вместо отображения $1,234.56 вы показываете 1,234.56 US dollars. Валюта становится явно указана, и пользователи точно понимают, что видят.

JavaScript предлагает два способа отображения полных названий валют. Можно форматировать суммы с названиями валют с помощью Intl.NumberFormat или получить отдельные названия валют через Intl.DisplayNames.

Форматирование сумм с полными названиями валют

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

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

console.log(formatter.format(1234.56));
// Output: 1,234.56 US dollars

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

Значения опции currencyDisplay

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

symbol (по умолчанию)

Показывает локализованный символ валюты.

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

console.log(formatter.format(100));
// Output: $100.00

code

Показывает трёхбуквенный код валюты по ISO 4217.

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

console.log(formatter.format(100));
// Output: USD 100.00

name

Показывает полное локализованное название валюты.

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

console.log(formatter.format(100));
// Output: 100.00 US dollars

narrowSymbol

Показывает компактный символ валюты без указания страны.

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

console.log(formatter.format(100));
// Output: $100.00

Опция narrowSymbol выводит $ вместо US$ для долларов США. Используйте это, если из контекста и так понятно, о какой валюте речь.

Как локаль влияет на названия валют

Локаль, которую вы передаёте в Intl.NumberFormat, определяет язык и грамматическую форму названия валюты.

const usdollar = 1234.56;

// English
const enFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'name'
});
console.log(enFormatter.format(usdollar));
// Output: 1,234.56 US dollars

// French
const frFormatter = new Intl.NumberFormat('fr-FR', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'name'
});
console.log(frFormatter.format(usdollar));
// Output: 1 234,56 dollars des États-Unis

// Japanese
const jaFormatter = new Intl.NumberFormat('ja-JP', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'name'
});
console.log(jaFormatter.format(usdollar));
// Output: 1,234.56 米ドル

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

Получение названий валют без суммы

Используйте Intl.DisplayNames, если нужно получить только название валюты без форматирования суммы.

const currencyNames = new Intl.DisplayNames('en-US', {
  type: 'currency'
});

console.log(currencyNames.of('USD'));
// Output: US Dollar

console.log(currencyNames.of('EUR'));
// Output: Euro

console.log(currencyNames.of('JPY'));
// Output: Japanese Yen

Передавайте коды валют по стандарту ISO 4217 в метод of(). Метод вернёт локализованное название валюты.

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

// Get currency names in French
const frCurrencyNames = new Intl.DisplayNames('fr-FR', {
  type: 'currency'
});

console.log(frCurrencyNames.of('USD'));
// Output: dollar des États-Unis

console.log(frCurrencyNames.of('EUR'));
// Output: euro

Когда использовать полные названия валют

Используйте полные названия валют в следующих случаях.

Финансовые отчёты и выписки

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

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

console.log(`Total revenue: ${formatter.format(1500000)}`);
// Output: Total revenue: 1,500,000.00 US dollars

Мультивалютные приложения

Показывайте полные названия, когда пользователи работают с несколькими валютами одновременно.

const currencies = [
  { code: 'USD', amount: 1000 },
  { code: 'EUR', amount: 850 },
  { code: 'GBP', amount: 750 }
];

currencies.forEach(item => {
  const formatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: item.code,
    currencyDisplay: 'name'
  });
  console.log(formatter.format(item.amount));
});
// Output:
// 1,000.00 US dollars
// 850.00 euros
// 750.00 British pounds

Интерфейсы выбора валюты

Отображайте названия валют в выпадающих списках или списках выбора.

const currencies = ['USD', 'EUR', 'GBP', 'JPY', 'CAD'];
const displayNames = new Intl.DisplayNames('en-US', {
  type: 'currency'
});

const options = currencies.map(code => ({
  value: code,
  label: displayNames.of(code)
}));

console.log(options);
// Output:
// [
//   { value: 'USD', label: 'US Dollar' },
//   { value: 'EUR', label: 'Euro' },
//   { value: 'GBP', label: 'British Pound' },
//   { value: 'JPY', label: 'Japanese Yen' },
//   { value: 'CAD', label: 'Canadian Dollar' }
// ]

Доступность

Экранные дикторы лучше озвучивают полные названия валют, чем символы. Пользователи с нарушением зрения лучше понимают 100.00 US dollars, чем $100.00.

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