桁区切り記号の表示をどのように制御しますか？

はじめに

数値 123456 をフォーマットする場合、千の位を区切るカンマ付きの "123,456" や、区切り文字なしの "123456" のように表示されることがあります。桁区切り文字は、英語圏では一般的に「桁区切り記号」（thousands separator）と呼ばれています。

状況によって異なるフォーマットが必要です。財務報告書では、大きな数値を読みやすくするために桁区切り記号を表示するのが一般的です。シリアル番号、製品コード、ID番号などの技術的な表示では、混乱を避けるために桁区切り記号を省略するのが一般的です。Intl.NumberFormat の useGrouping オプションは、フォーマットされた出力にこれらの区切り文字を表示するかどうかを制御します。

このガイドでは、桁区切り記号の有効化と無効化の方法、地域によるバリエーション、そしてアプリケーションでそれぞれの設定を使用するタイミングについて説明します。

useGrouping false で桁区切り記号を無効化する

useGrouping を false に設定すると、フォーマットされた数値からすべての桁区切り記号が削除されます。

const formatter = new Intl.NumberFormat('en-US', {
  useGrouping: false
});

formatter.format(123456);
// "123456"

formatter.format(1234567.89);
// "1234567.89"

フォーマットされた出力には、数値がどれだけ大きくても、カンマやその他の桁区切り文字は含まれません。小数点区切り文字は残ります。これは useGrouping が桁のグループ化のみに影響し、小数点のフォーマットには影響しないためです。

これは通貨やユニットを含むすべての数値スタイルに適用されます。

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  useGrouping: false
}).format(1234567.89);
// "$1234567.89"

new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  useGrouping: false
}).format(50000);
// "50000 km"

通貨記号とユニットラベルは通常通り表示されますが、数字には内部区切り文字がありません。

useGrouping true で桁区切り記号を有効化する

useGrouping を true に設定すると、桁区切り記号が含まれます。これはデフォルトの動作であるため、意図を明確にしたい場合や、設定を上書きする場合にのみ明示的に指定する必要があります。

const formatter = new Intl.NumberFormat('en-US', {
  useGrouping: true
});

formatter.format(123456);
// "123,456"

formatter.format(1234567.89);
// "1,234,567.89"

フォーマッターは英語の慣習に従って、3桁ごとにカンマを挿入します。これにより、大きな数値を視覚的に読み取りやすくなります。

true がデフォルトであるため、次の2つのフォーマッターは同等です。

new Intl.NumberFormat('en-US', { useGrouping: true });
new Intl.NumberFormat('en-US');

両方のフォーマッターは出力に桁区切り記号を含めます。

ロケールによって異なるグループ化を理解する

異なるロケールでは、グループ化に異なる文字を使用し、異なるグループ化パターンに従います。useGroupingオプションはグループ化を行うかどうかを制御し、ロケールによってどの文字がどこに表示されるかが決まります。

new Intl.NumberFormat('en-US', {
  useGrouping: true
}).format(1234567);
// "1,234,567"

new Intl.NumberFormat('de-DE', {
  useGrouping: true
}).format(1234567);
// "1.234.567"

new Intl.NumberFormat('fr-FR', {
  useGrouping: true
}).format(1234567);
// "1 234 567"

英語ではカンマ、ドイツ語ではピリオド、フランス語ではスペースを使用します。これらはすべてグループ区切り文字ですが、それぞれのロケールの慣習に従って異なる見た目になります。

一部のロケールでは異なるグループ化パターンを使用します。インドの数字表記では、最初の3桁をグループ化し、その後は2桁ごとにグループ化します。

new Intl.NumberFormat('en-IN', {
  useGrouping: true
}).format(1234567);
// "12,34,567"

グループ区切り文字は右から3桁後に表示され、その後は2桁ごとに表示されるため、1,234,567ではなく12,34,567となります。

useGrouping: falseでグループ化を無効にすると、区切り文字がまったく表示されないため、これらのロケール固有の違いはなくなります。

new Intl.NumberFormat('en-IN', {
  useGrouping: false
}).format(1234567);
// "1234567"

高度なグループ化制御に文字列値を使用する

useGroupingオプションは、グループ区切り文字がいつ表示されるかをより細かく制御する文字列値を受け入れます。これらの値はIntl.NumberFormat V3仕様の一部であり、最新のブラウザでサポートされています。

"always"値はtrueと同等で、常にグループ区切り文字を表示します。

new Intl.NumberFormat('en-US', {
  useGrouping: 'always'
}).format(1234);
// "1,234"

"auto"値はグループ化に関するロケールの設定に従います。ほとんどのロケールではグループ区切り文字の表示が好まれるため、実際には"auto"は"always"と似ています。これはnotationが"compact"でない場合のデフォルト値です。

new Intl.NumberFormat('en-US', {
  useGrouping: 'auto'
}).format(1234);
// "1,234"

"min2"値は、最初のグループに少なくとも2桁の数字がある場合にのみグループ区切り文字を表示します。4桁の数字の場合、区切り文字は表示されません。

new Intl.NumberFormat('en-US', {
  useGrouping: 'min2'
}).format(1234);
// "1234"

new Intl.NumberFormat('en-US', {
  useGrouping: 'min2'
}).format(12345);
// "12,345"

数字1234の最初のグループには1桁しかない（1）ため、区切り文字は表示されません。数字12345の最初のグループには2桁（12）あるため、区切り文字が表示されます。

この動作は、一部のロケールが自然に数字をフォーマットする方法と一致します。例えば、スペイン語では通常、4桁の数字にはグループ区切り文字を省略します。

new Intl.NumberFormat('es-ES', {
  useGrouping: 'auto'
}).format(1234);
// "1234"

new Intl.NumberFormat('es-ES', {
  useGrouping: 'auto'
}).format(12345);
// "12.345"

"auto"値はこれらのロケール設定を尊重しますが、"always"値はそれらを上書きします。

new Intl.NumberFormat('es-ES', {
  useGrouping: 'always'
}).format(1234);
// "1.234"

桁区切り記号を無効にするタイミングの選択

数値が数量ではなくコード、識別子、または技術的な値を表す場合には、桁区切り記号を無効にしてください。

シリアル番号や製品コードには桁区切り記号を使用すべきではありません。

const serialNumber = 1234567890;

new Intl.NumberFormat('en-US', {
  useGrouping: false
}).format(serialNumber);
// "1234567890"

これにより、区切り記号が実際の値の一部であるかどうかについての混乱を防ぎます。ユーザーが 1,234,567,890 を見た場合、コンマが意味を持つのか、あるいは他の場所で数値を入力する際にコンマを入力すべきかどうか疑問に思うかもしれません。

郵便番号、電話番号（単純な数値としてフォーマットされる場合）、およびその他の固定形式の識別子は、桁区切りを無効にすることで恩恵を受けます。

const zipCode = 90210;

new Intl.NumberFormat('en-US', {
  useGrouping: false,
  minimumIntegerDigits: 5
}).format(zipCode);
// "90210"

デバッグやログ記録のための技術的な表示では、正確な数値表現を示すために通常は桁区切りを無効にすべきです。

console.log(`Processing ${
  new Intl.NumberFormat('en-US', {
    useGrouping: false
  }).format(bytesProcessed)
} bytes`);
// "Processing 1234567 bytes"

数値のフォーム入力では、ユーザーが区切り記号を入力すべきかどうかについての混乱を避けるために、編集中は桁区切りを無効にすることがよくあります。ユーザーが値の入力を完了した後、フォーマットされた表示で桁区切りを表示することができます。

桁区切り記号を有効にするタイミングの選択

ユーザーが素早く読んで理解する必要がある数量、測定値、または金額を表す数値には、桁区切り記号を有効にしてください。

金融金額は桁区切り記号があると読みやすくなります。

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  useGrouping: true
}).format(1234567.89);
// "$1,234,567.89"

区切り記号は、ユーザーが一目で $1,234,567 と $123,456 を素早く区別するのに役立ちます。

統計データ、分析ダッシュボード、およびカウントを表示するレポートは桁区切りの恩恵を受けます。

const pageViews = 5432198;

new Intl.NumberFormat('en-US', {
  useGrouping: true
}).format(pageViews);
// "5,432,198 views"

大きな測定値は桁区切りがあるとより読みやすくなります。

new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  useGrouping: true
}).format(384400);
// "384,400 km"

この距離（月までのおおよその距離）は、384400 よりも 384,400 として読む方が簡単です。

ユーザーが数値の大きさを理解する必要があるあらゆる状況では、桁区切り記号が役立ちます。区切り記号は、脳がデジタルをチャンクで処理するのに役立つ視覚的なランドマークを作成します。

4桁の表示をよりすっきりさせるためにmin2を使用する

"min2"の値は、4桁または5桁になる可能性のある数値に対してよりすっきりした外観を提供します。例えば、年号は通常、区切り文字なしの方が見栄えが良くなります。

new Intl.NumberFormat('en-US', {
  useGrouping: 'min2'
}).format(2025);
// "2025"

new Intl.NumberFormat('en-US', {
  useGrouping: 'always'
}).format(2025);
// "2,025"

年号を表す場合、ほとんどの読者は2,025よりも2025の方が自然だと感じます。"min2"設定は、この動作を自動的に提供します。

特定の範囲の価格もこのアプローチの恩恵を受けます。

const price = 1299;

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  useGrouping: 'min2'
}).format(price);
// "$1299.00"

一部の小売業者は、心理的に価格が安く感じられるようにカンマなしで$1299のように価格を表示することを好みます。価格が4桁を超えると、区切り文字が表示されます。

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  useGrouping: 'min2'
}).format(12999);
// "$12,999.00"

これにより、数値の大きさを手動でチェックすることなく、価格範囲全体で一貫した動作が得られます。

コンパクト表記がグループ化にどのように影響するかを理解する

コンパクト表記を使用する場合、デフォルトのuseGroupingの動作は"auto"ではなく"min2"に変わります。これにより、コンパクトフォーマットで不要な区切り文字が防止されます。

new Intl.NumberFormat('en-US', {
  notation: 'compact'
}).format(1234);
// "1.2K"

new Intl.NumberFormat('en-US', {
  notation: 'compact',
  useGrouping: 'always'
}).format(1234);
// "1.2K"

コンパクト表記はすでに数値を省略しているため、内部のグループ区切り文字は冗長になります。フォーマッタはこれを自動的に処理しますが、必要に応じてオーバーライドすることができます。

どのグループ化設定がアクティブかを確認する

resolvedOptions()メソッドは、フォーマッタが実際に使用しているuseGroupingの値を表示します。

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
});

formatter.resolvedOptions().useGrouping;
// "auto"

フォーマッタが明示的にuseGroupingを設定せずに作成されたとしても、解決されたオプションはデフォルト値の"auto"を表示します。

const compactFormatter = new Intl.NumberFormat('en-US', {
  notation: 'compact'
});

compactFormatter.resolvedOptions().useGrouping;
// "min2"

コンパクト表記フォーマッタは、解決されたオプションに示されているように、"auto"ではなく"min2"をデフォルトとします。

このメソッドは、フォーマッタが使用する実際の設定を明らかにすることで、予期しないグループ化の動作をデバッグするのに役立ちます。