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を使用することでこれらの省略形が正しいロケール慣例を使用することが保証されます。

試してみる — Locale String Tester

フルツールを開く