Intl.NumberFormatによるコンパクト数値表記(1K、1M、1B)
Intl.NumberFormatのcompact表記を使用して、大きな数値を1K、1M、1Bのようなコンパクトな省略形に任意のロケールでフォーマットします。short vs long表示とロケール固有の省略形について学びます。
Intl.NumberFormat
詳細な説明
コンパクト数値表記
コンパクト表記は大きな数値を短く読みやすい形式に省略します。ソーシャルメディア(1.2Kいいね)、ダッシュボード(3.5M売上)、分析で一般的です。
基本的なコンパクトフォーマット
const short = { notation: 'compact', compactDisplay: 'short' };
new Intl.NumberFormat('en-US', short).format(1500);
// "1.5K"
new Intl.NumberFormat('en-US', short).format(1500000);
// "1.5M"
ロケール固有の省略形
const n = 1500000;
new Intl.NumberFormat('en', { notation: 'compact' }).format(n);
// "1.5M"
new Intl.NumberFormat('ja', { notation: 'compact' }).format(n);
// "150万"
new Intl.NumberFormat('de', { notation: 'compact' }).format(n);
// "1,5 Mio."
new Intl.NumberFormat('hi', { notation: 'compact' }).format(n);
// "15 लाख"
東アジアの万ベースシステム
| 数値 | 英語 | 日本語 | 中国語 |
|---|---|---|---|
| 10,000 | 10K | 1万 | 1万 |
| 1,000,000 | 1M | 100万 | 100万 |
| 100,000,000 | 100M | 1億 | 1亿 |
通貨との組み合わせ
new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
notation: 'compact',
}).format(5600000); // "$5.6M"
ユースケース
コンパクト表記は、ダッシュボード、ソーシャルメディアメトリクス、財務サマリー、限られたスペースで大きな数値を表示する必要があるUIにとって不可欠です。日本のユーザーは「万」単位を、インドのユーザーは「lakh」と「crore」を、ドイツのユーザーは「Mio.」と「Mrd.」を期待します。Intl.NumberFormatを使用することでこれらの省略形が正しいロケール慣例を使用することが保証されます。