Intl.NumberFormatによるパーセントフォーマット
Intl.NumberFormatのpercentスタイルを使用して、任意のロケールのパーセント値を正しくフォーマットします。符号表示、小数桁数、ロケール固有のパーセント慣例について学びます。
Intl.NumberFormat
詳細な説明
ロケール対応パーセントフォーマット
パーセント表示はロケールによって異なり、特に数値とパーセント記号の間のスペース、小数点区切り、負の値の表現が異なります。
基本的なパーセントフォーマット
const ratio = 0.1234;
new Intl.NumberFormat('en-US', { style: 'percent' })
.format(ratio); // "12%"
new Intl.NumberFormat('en-US', {
style: 'percent',
minimumFractionDigits: 2,
}).format(ratio); // "12.34%"
new Intl.NumberFormat('fr-FR', {
style: 'percent',
minimumFractionDigits: 2,
}).format(ratio); // "12,34 %"
new Intl.NumberFormat('tr-TR', {
style: 'percent',
minimumFractionDigits: 2,
}).format(ratio); // "%12,34"
重要な観察点
- 入力は比率：12%には0.12を渡します（12ではなく）。
Intl.NumberFormatが自動的に100倍します。 - %前のスペース：フランス語と多くのヨーロッパのロケールはパーセント記号の前にノーブレークスペースを挿入します。
- シンボル位置：トルコ語はパーセント記号を数値の前に配置します。
- 小数点区切り：ロケールの数値フォーマットルールに従います。
精度の制御
new Intl.NumberFormat('en-US', {
style: 'percent',
minimumFractionDigits: 0,
maximumFractionDigits: 2,
}).format(0.1); // "10%"
変化の符号表示
new Intl.NumberFormat('en-US', {
style: 'percent',
signDisplay: 'always',
}).format(0.05); // "+5%"
new Intl.NumberFormat('en-US', {
style: 'percent',
signDisplay: 'exceptZero',
}).format(0); // "0%"
signDisplayオプションはダッシュボードやレポートでの正負の変化表示に便利です。
ユースケース
パーセントフォーマットは、成長率を表示する分析ダッシュボード、割引を表示するECサイト、金利を表示する金融アプリケーション、進捗インジケーターでよく使われます。フランスのユーザーに「+12,5 %」、トルコのユーザーに「%12,5」と正しく表示する必要があるダッシュボードでは、percentスタイルを使用することで手動の文字列操作なしにローカル慣例に従ったフォーマットが保証されます。