数値フォーマットの国際化 — Intl.NumberFormatと桁区切り・通貨・パーセント表示
数値の表示形式は国や言語によって異なります。1,000,000(英語)・1.000.000(ドイツ語)・1 000 000(フランス語)など桁区切り記号が違い、通貨表示やパーセント記号の位置も国際的に差異があります。JavaScriptのIntl.NumberFormatを使うと国際化対応が容易です。
Intl.NumberFormatの使い方
new Intl.NumberFormat("ja-JP").format(1000000) で「1,000,000」、new Intl.NumberFormat("de-DE").format(1000000) で「1.000.000」になります。通貨はnew Intl.NumberFormat("ja-JP", {style: "currency", currency: "JPY"}).format(1500) で「¥1,500」になります。localesには"en-US"・"ja-JP"・"de-DE"・"fr-FR"など任意のロケールが使えます。
桁区切り・小数点の国際的な違い
英語圏はカンマ(,)が千の区切り・ドット(.)が小数点です。ヨーロッパ(ドイツ・フランス等)はドット(.)が千の区切り・カンマ(,)が小数点という逆の表記が一般的です。スイスはアポストロフィ(')が千の区切りです。Webアプリを国際展開する際はロケールに応じた数値表示が必要です。
有効数字・固定小数点・指数表示
new Intl.NumberFormat("en", {maximumFractionDigits: 2}).format(3.14159) で「3.14」、{notation: "compact"} で 1,000,000 が「1M」のようにコンパクト表示になります。{notation: "scientific"} で科学的表記(1.5E3)、{style: "percent"} でパーセント表示になります。Number FormatterではこれらをGUIで試しながら出力できます。
ゼロ埋め・固定幅の数値表示
数値を固定桁で表示するにはnew Intl.NumberFormat("en", {minimumIntegerDigits: 3}).format(5) で「005」のようなゼロ埋めができます。String(n).padStart(3, "0") も同様の効果があります。IDの表示・タイマーの桁数固定・進捗表示などで使います。Number Formatterでは様々なフォーマットオプションを組み合わせてリアルタイムプレビューできます。