通貨記号の代わりに通貨の正式名称を表示するにはどうすればよいですか？
currencyDisplayオプションを使用して「$」の代わりに「US dollars」を表示する
はじめに
通貨記号は国際的なアプリケーションにおいて曖昧さを生み出します。ドル記号 $ は米ドル、カナダドル、オーストラリアドル、そして他の十数カ国の通貨を表します。ユーザーは記号だけでどの通貨を意味しているのか判断できません。
通貨の正式名称を使用することでこの混乱を解消できます。$1,234.56 と表示する代わりに、1,234.56 US dollars（1,234.56 米ドル）と表示します。これにより通貨が明示され、ユーザーは正確に何を見ているのか理解できます。
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));
// 出力: 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));
// 出力: $100.00
code
ISO 4217の3文字の通貨コードを表示します。
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'code'
});
console.log(formatter.format(100));
// 出力: USD 100.00
name
ローカライズされた通貨の正式名称を表示します。
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'name'
});
console.log(formatter.format(100));
// 出力: 100.00 US dollars
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
of()メソッドにISO 4217通貨コードを渡します。このメソッドはローカライズされた通貨名を返します。
どのロケールでも通貨名を取得できます。
// フランス語で通貨名を取得
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よりも100.00 US dollarsの方が理解しやすくなります。
スペースに制約があり、文脈から通貨が明確な場合はコンパクトな表示のために通貨記号を使用してください。明確さとアクセシビリティが優先される場合は正式名称を使用してください。