Как отображать полные названия валют вместо символов?
Используйте опцию currencyDisplay, чтобы показывать "доллары США" вместо "$"
Введение
Символы валют создают неоднозначность в международных приложениях. Знак доллара $ обозначает доллары США, канадские доллары, австралийские доллары и валюты более десятка других стран. Пользователи не могут определить, какую валюту вы имеете в виду, только по символу.
Полные названия валют устраняют эту путаницу. Вместо отображения $1,234.56 вы показываете 1,234.56 долларов США. Валюта становится явной, и пользователи точно понимают, что они видят.
JavaScript предоставляет два подхода для отображения полных названий валют. Вы можете форматировать суммы с названиями валют с помощью Intl.NumberFormat или получать отдельные названия валют с помощью Intl.DisplayNames.
Форматирование сумм с полными названиями валют
Опция currencyDisplay в Intl.NumberFormat управляет тем, как валюты отображаются в форматированных суммах. Установите её значение в "name", чтобы отображать полное название валюты.
const formatter = new Intl.NumberFormat('ru-RU', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'name'
});
console.log(formatter.format(1234.56));
// Вывод: 1 234,56 доллара США
Форматировщик включает полное название валюты после суммы. Название следует грамматическим правилам указанной локали.
Значения опции currencyDisplay
Опция currencyDisplay принимает четыре значения, которые определяют, как валюта будет отображаться.
symbol (по умолчанию)
Отображает локализованный символ валюты.
const formatter = new Intl.NumberFormat('ru-RU', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'symbol'
});
console.log(formatter.format(100));
// Вывод: $100,00
code
Отображает трёхбуквенный код валюты по стандарту ISO 4217.
const formatter = new Intl.NumberFormat('ru-RU', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'code'
});
console.log(formatter.format(100));
// Вывод: USD 100,00
name
Отображает полное локализованное название валюты.
const formatter = new Intl.NumberFormat('ru-RU', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'name'
});
console.log(formatter.format(100));
// Вывод: 100,00 доллара США
narrowSymbol
Отображает компактный формат символа без указания страны.
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'narrowSymbol'
});
console.log(formatter.format(100));
// Вывод: $100.00
Опция narrowSymbol выводит $ вместо US$ для долларов США. Используйте это, если контекст делает валюту очевидной.
Как локаль влияет на названия валют
Локаль, которую вы передаете в Intl.NumberFormat, определяет язык и грамматику названия валюты.
const usdollar = 1234.56;
// Английский
const enFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'name'
});
console.log(enFormatter.format(usdollar));
// Вывод: 1,234.56 US dollars
// Французский
const frFormatter = new Intl.NumberFormat('fr-FR', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'name'
});
console.log(frFormatter.format(usdollar));
// Вывод: 1 234,56 dollars des États-Unis
// Японский
const jaFormatter = new Intl.NumberFormat('ja-JP', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'name'
});
console.log(jaFormatter.format(usdollar));
// Вывод: 1,234.56 米ドル
Каждая локаль предоставляет свой перевод названия валюты. Формат числа также изменяется в соответствии с конвенциями локали.
Получение названий валют без указания сумм
Используйте Intl.DisplayNames, если вам нужно только название валюты без форматирования суммы.
const currencyNames = new Intl.DisplayNames('en-US', {
type: 'currency'
});
console.log(currencyNames.of('USD'));
// Вывод: US Dollar
console.log(currencyNames.of('EUR'));
// Вывод: Euro
console.log(currencyNames.of('JPY'));
// Вывод: Japanese Yen
Передавайте коды валют ISO 4217 в метод of(). Метод возвращает локализованное название валюты.
Вы можете получить названия валют на любом языке.
// Получение названий валют на французском
const frCurrencyNames = new Intl.DisplayNames('fr-FR', {
type: 'currency'
});
console.log(frCurrencyNames.of('USD'));
// Вывод: dollar des États-Unis
console.log(frCurrencyNames.of('EUR'));
// Вывод: 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.
Используйте символы валют для компактного отображения, где есть ограничения по пространству, а контекст делает валюту понятной. Используйте полные названия, когда приоритетом являются ясность и доступность.