千の位の区切り記号の表示を制御する方法

はじめに

数値123456をフォーマットすると、千の位をカンマで区切った"123,456"、または区切り記号のない"123456"が表示される場合があります。桁のグループを区切る文字はグループ区切り記号と呼ばれ、英語圏では一般的に千の位の区切り記号として知られています。

異なる文脈では異なるフォーマットが必要です。財務レポートでは通常、大きな数値を読みやすくするためにグループ区切り記号が表示されます。シリアル番号、製品コード、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"をデフォルトとします。

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