JavaScriptのIntl.NumberFormatで通貨をフォーマットする
JavaScriptのIntl.NumberFormat APIを使用して通貨値を正しくフォーマットする方法。オプション、エッジケース、Webアプリケーションのベストプラクティスを解説。
Development
詳細な説明
通貨フォーマットのためのIntl.NumberFormat
Intl.NumberFormat APIは、JavaScriptで数値を通貨としてフォーマットする標準的な方法です。記号の配置、桁区切り、小数点区切り、グループ化などのロケール固有のフォーマットルールを自動的に処理します。
基本的な使い方
// 英語での米ドル
new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
}).format(1234.56);
// => "$1,234.56"
// 日本円（小数点以下0桁）
new Intl.NumberFormat("ja-JP", {
style: "currency",
currency: "JPY",
}).format(1234);
// => "￥1,234"
// ドイツ語でのユーロ（コンマが小数点区切り）
new Intl.NumberFormat("de-DE", {
style: "currency",
currency: "EUR",
}).format(1234.56);
// => "1.234,56 €"
主要オプション
| オプション | 値 | 説明 |
|---|---|---|
style |
"currency" | 通貨フォーマットに必須 |
currency |
ISO 4217コード | 必須 — "USD"、"EUR"など |
currencyDisplay |
"symbol", "narrowSymbol", "code", "name" | 通貨の表示方法 |
minimumFractionDigits |
0–20 | 最小小数点以下桁数 |
maximumFractionDigits |
0–20 | 最大小数点以下桁数 |
エッジケース
- 負の金額：異なるロケールで負の数のフォーマットが異なります。en-USは-$1.00、一部のロケールは($1.00)や1.00- €を使用
- 小数点以下0桁：JPYをフォーマットする際、
maximumFractionDigits: 0を設定するか、Intlに通貨に基づいて自動処理させる - サーバーサイド：完全なICUデータ付きのNode.js 13+で利用可能
ユースケース
国際的なユーザーに価格を表示するすべてのWebアプリケーションは、手動の文字列連結ではなくIntl.NumberFormatを使用すべきです。右から左のロケール、ナロー記号、会計フォーマットを含む数千のロケール・通貨の組み合わせを正しく処理します。