通貨を記号、コード、または名称で表示する方法
currencyDisplayオプションを使用して、通貨を$、USD、または米ドルのいずれで表示するかを制御する
はじめに
価格や金額を表示する際、通貨をどのように表現するかを決定する必要があります。商品価格は$25、USD 25、または25米ドルとして表示される場合があります。各形式は異なる目的を果たし、異なるコンテキストでより適切に機能します。
記号形式は、ユーザーが期待する通貨を把握している日常的なショッピングインターフェースに適しています。コード形式は、複数の通貨が表示される国際ビジネス文書において曖昧さを排除します。名称形式は、アクセシビリティツールや教育コンテンツに対して最大限の明確性を提供します。
JavaScriptは、Intl.NumberFormat内のcurrencyDisplayオプションを提供し、通貨の表示方法を制御します。このレッスンでは、利用可能な4つの形式、ロケール間での違い、および特定のユースケースに適した形式の選択方法について説明します。
currencyDisplayオプションの理解
currencyDisplayオプションは、金額をフォーマットする際に通貨単位がどのように表示されるかを制御します。数値自体は変更せず、通貨の表現方法のみを変更します。
4つの値が利用可能です:
symbolは$や€などのローカライズされた通貨記号を表示しますnarrowSymbolはUS$ではなく$などのコンパクトな記号を表示しますcodeはUSDやEURなどのISO通貨コードを表示しますnameは米ドルやユーロなどの完全な通貨名を表示します
各形式は、同じ金額の異なる視覚的表現を作成します。選択は、ユーザーインターフェースの要件、利用可能なスペース、およびオーディエンスの期待によって決まります。
日常表示でのシンボル形式の使用
symbol形式はデフォルトのcurrencyDisplay値です。特定のロケールのユーザーが見慣れたローカライズされた通貨記号を表示します。
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'symbol'
});
console.log(formatter.format(25));
// Output: "$25.00"
この形式は、ユーザーにとって最も馴染みのある表現を生成します。アメリカ人はドル記号を、ヨーロッパ人はユーロ記号を、イギリスのユーザーはポンド記号を見ることを期待します。
シンボルはロケールと通貨の両方に基づいて適応します。ドイツのロケールで米ドルをフォーマットすると、フォーマッターは国の指定を含むローカライズされたシンボルを使用します。
const usFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'symbol'
});
console.log(usFormatter.format(25));
// Output: "$25.00"
const deFormatter = new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'symbol'
});
console.log(deFormatter.format(25));
// Output: "25,00 $"
ドイツのフォーマッターがドル記号を金額の後に配置し、小数点区切り文字にカンマを使用していることに注目してください。これらのロケール固有の規則は自動的に適用されます。
異なるロケールでユーロをフォーマットすると、ユーロ記号は表示されますが、フォーマット規則は変わります。
const usFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'EUR',
currencyDisplay: 'symbol'
});
console.log(usFormatter.format(25));
// Output: "€25.00"
const deFormatter = new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR',
currencyDisplay: 'symbol'
});
console.log(deFormatter.format(25));
// Output: "25,00 €"
シンボル形式は、ユーザーが単一の通貨コンテキスト内で操作する場合に適しています。米ドルで価格を表示する米国のeコマースサイトは、ドル記号を安全に使用できます。ユーロで価格を表示するヨーロッパのサイトは、ユーロ記号を使用できます。
ただし、複数の通貨が類似した記号を共有する場合、シンボル形式は曖昧さを生じる可能性があります。カナダドル、オーストラリアドル、米ドルはすべてドル記号を使用します。このような場合、一部のロケールでは曖昧さを解消するために国のプレフィックスを追加します。
const usFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'CAD',
currencyDisplay: 'symbol'
});
console.log(usFormatter.format(25));
// Output: "CA$25.00"
フォーマッターは、米国のロケールでフォーマットする際に、カナダドルを米ドルと区別するためにCA$を追加します。
コンパクト表示でのnarrowSymbol形式の使用
narrowSymbol形式は、国のプレフィックスなしで通貨記号を表示します。これにより、スペースが限られたインターフェースで適切に機能する、よりコンパクトな表現が作成されます。
const symbolFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'symbol'
});
console.log(symbolFormatter.format(25));
// Output: "$25.00"
const narrowFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'narrowSymbol'
});
console.log(narrowFormatter.format(25));
// Output: "$25.00"
米国ロケールで米ドルを表示する場合、両方の形式は同じ出力を生成します。これは国コードのプレフィックスが不要なためです。この違いは、通常であれば国の指定を含む可能性のある通貨をフォーマットする際に明らかになります。
const symbolFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'CAD',
currencyDisplay: 'symbol'
});
console.log(symbolFormatter.format(25));
// Output: "CA$25.00"
const narrowFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'CAD',
currencyDisplay: 'narrowSymbol'
});
console.log(narrowFormatter.format(25));
// Output: "$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));
// Output: "25,00 €"
各ロケールは、現地の慣習に基づいて独自のnarrow symbol形式を定義しています。
明確な表示のためのcode形式の使用
code形式は、記号の代わりにISO 4217通貨コードを表示します。この3文字のコードは、各通貨を曖昧さなく一意に識別します。
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'code'
});
console.log(formatter.format(25));
// Output: "USD 25.00"
コードは記号の代わりに表示され、金額がどの通貨を表しているかが即座に明確になります。この形式は、一貫した略語を使用してすべてのロケールで機能します。
const usFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'EUR',
currencyDisplay: 'code'
});
console.log(usFormatter.format(25));
// Output: "EUR 25.00"
const deFormatter = new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR',
currencyDisplay: 'code'
});
console.log(deFormatter.format(25));
// Output: "25,00 EUR"
EURコードは両方の形式で表示されますが、位置と数値のフォーマットはロケールの慣習に従います。この普遍的な通貨コードとロケール固有の数値フォーマットの組み合わせにより、code形式は国際的なコンテキストで価値があります。
code形式は、記号を共有する通貨間の混乱を排除します。
const usdFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'code'
});
console.log(usdFormatter.format(25));
// Output: "USD 25.00"
const cadFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'CAD',
currencyDisplay: 'code'
});
console.log(cadFormatter.format(25));
// Output: "CAD 25.00"
const audFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'AUD',
currencyDisplay: 'code'
});
console.log(audFormatter.format(25));
// Output: "AUD 25.00"
各ドル通貨には固有のコードが割り当てられます。ユーザーは米ドル、カナダドル、オーストラリアドルを即座に区別できます。
金融レポート、国際請求書、会計システム、および通貨の明確性が重要なあらゆる状況でコード形式を使用してください。この形式は、記号がエンコードの問題を引き起こす可能性があるAPIやデータエクスポートでも適切に機能します。
トレードオフは認知度の低下です。ほとんどの消費者は$を認識しますが、CADが何を表すかをすぐに理解できない場合があります。対象者がコードを理解している場合、または精度が認知度よりも重要な場合にコードを使用してください。
最大限の明確性のための名称形式の使用
name形式は、ロケールの言語で完全な通貨名を表示します。これにより、金額がどの通貨を表しているかが完全に明確になります。
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'name'
});
console.log(formatter.format(25));
// Output: "25.00 US dollars"
通貨名が完全に表示されるため、金額が何を表しているかについて曖昧さがありません。この形式はアクセシビリティにとって特に価値があります。スクリーンリーダーは通貨名を明確に読み上げることができますが、記号は一貫性のない方法で読み上げられる可能性があります。
名称はロケールに適応し、適切な言語で表示されます。
const enFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'EUR',
currencyDisplay: 'name'
});
console.log(enFormatter.format(25));
// Output: "25.00 euros"
const deFormatter = new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR',
currencyDisplay: 'name'
});
console.log(deFormatter.format(25));
// Output: "25,00 Euro"
const frFormatter = new Intl.NumberFormat('fr-FR', {
style: 'currency',
currency: 'EUR',
currencyDisplay: 'name'
});
console.log(frFormatter.format(25));
// Output: "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));
// Output: "1,000 Japanese yen"
const deFormatter = new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'JPY',
currencyDisplay: 'name'
});
console.log(deFormatter.format(1000));
// Output: "1.000 Japanische Yen"
英語ではJapanese yenと表示され、ドイツ語ではJapanische Yenと表示されます。このローカライゼーションにより、ユーザーは馴染みのない通貨を自分の言語で理解できます。
明確性がスペースよりも重要な場合は名称形式を使用してください。教育コンテンツ、アクセシビリティ重視のインターフェース、ユーザーが馴染みのない通貨に遭遇する可能性のある状況では、完全に表記された名称が有益です。この形式は、通貨名が記号よりも処理しやすい音声インターフェースでも適切に機能します。
トレードオフは表示スペースです。通貨名は記号やコードよりも大幅に長くなります。コンパクトなモバイルインターフェースでは、$25.00なら問題なく表示できる場所に「25.00米ドル」を収めるのは困難な場合があります。
適切な表示形式の選択
スペースの制約、ユーザーの慣れ、曖昧性の懸念に基づいてcurrencyDisplayの値を選択してください。
単一通貨で操作するユーザー向けの日常的なインターフェースにはsymbolを使用してください。Eコマースサイト、価格ページ、コンシューマーアプリケーションは記号との相性が良好です。ユーザーは記号を素早く認識でき、記号は最小限のスペースで済みます。
スペースが極めて限られており、通貨のコンテキストが明確な場合は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));
// Output: "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));
// Output: "(25.00 US dollars)"
会計フォーマットの括弧は、スペルアウトされた通貨名と組み合わされます。
覚えておくべきこと
currencyDisplayオプションは、フォーマットされた金額における通貨単位の表示方法を制御します。日常的な表示にはsymbol、スペースが限られたコンパクトなインターフェースにはnarrowSymbol、曖昧さのない国際的なコンテキストにはcode、最大限の明確性とアクセシビリティにはnameを使用してください。
利用可能なスペース、ユーザーの専門知識、通貨間の曖昧さが懸念事項であるかどうかに基づいてフォーマットを選択してください。currencyDisplayを他のフォーマットオプションと組み合わせて、アプリケーションに必要な正確な表現を作成してください。