通貨記号の代わりに完全な通貨名を表示する方法
currencyDisplayオプションを使用して「$」の代わりに「米ドル」を表示する
はじめに
通貨記号は国際的なアプリケーションにおいて曖昧さを生み出します。ドル記号$は、米ドル、カナダドル、オーストラリアドル、その他十数か国以上の通貨を表します。記号だけでは、どの通貨を意味しているのかユーザーは判断できません。
完全な通貨名を使用することで、この混乱を解消できます。$1,234.56を表示する代わりに、1,234.56 US dollarsを表示します。通貨が明示的になり、ユーザーは表示内容を正確に理解できます。
JavaScriptは完全な通貨名を表示するための2つのアプローチを提供しています。Intl.NumberFormatを使用して通貨名付きで金額をフォーマットするか、Intl.DisplayNamesを使用して独立した通貨名を取得できます。
完全な通貨名で金額をフォーマットする
Intl.NumberFormatのcurrencyDisplayオプションは、フォーマットされた金額における通貨の表示方法を制御します。完全な通貨名を表示するには、"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オプションは、通貨の表示方法を決定する4つの値を受け入れます。
symbol(デフォルト)
ローカライズされた通貨記号を表示します。
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'symbol'
});
console.log(formatter.format(100));
// Output: $100.00
code
3文字の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よりも100.00 US dollarsの方が理解しやすくなります。
スペースに制約があり、文脈から通貨が明確な場合はコンパクトな表示のために通貨記号を使用します。明確性とアクセシビリティを優先する場合は完全な名称を使用します。