コンパクト形式で1Kと1 thousandのどちらを選択するか
compactDisplayオプションを使用して、コンパクト数値を略語または単語で表示するかを制御する
はじめに
大きな数値をコンパクト表記で書式設定すると、数値1500はデフォルトで1.5Kになります。この略語形式は、モバイル画面やダッシュボードカードなどのスペースが限られたインターフェースで効果的に機能します。ただし、一部のコンテキストでは、桁数を完全に表記することが有益です。同じ数値を1.5Kではなく1.5 thousandと表示でき、簡潔さと引き換えに明確さを提供します。
JavaScriptのIntl.NumberFormatは、この選択を制御するためのcompactDisplayオプションを提供します。K、M、Bなどの略語を使用する短い表示と、thousand、million、billionのように桁数を完全に表記する長い表示を選択できます。このオプションにより、コンパクト数値がユーザーにどのように表示されるかを正確に制御できます。
compactDisplayオプションが制御する内容
compactDisplayオプションは、notationを"compact"に設定した場合にのみ機能します。これは2つの値を受け入れます:"short"と"long"です。short値は1.5Kのような略語出力を生成し、long値は1.5 thousandのような完全表記出力を生成します。
const shortFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "short"
});
console.log(shortFormatter.format(1500));
// Output: "1.5K"
const longFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long"
});
console.log(longFormatter.format(1500));
// Output: "1.5 thousand"
compactDisplayオプションは、省略した場合デフォルトで"short"になります。これは、長い表示を明示的に要求しない限り、コンパクト表記が略語を使用することを意味します。
短いコンパクト表示で数値を書式設定する
短いコンパクト表示は、桁数を表すために1文字の略語を使用します。この形式は、可読性を維持しながら水平スペースを最小限に抑えます。
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "short"
});
console.log(formatter.format(1500));
// Output: "1.5K"
console.log(formatter.format(2400000));
// Output: "2.4M"
console.log(formatter.format(7800000000));
// Output: "7.8B"
console.log(formatter.format(5600000000000));
// Output: "5.6T"
フォーマッターは、数値の桁数に基づいて適切な略語を自動的に選択します。千にはK、百万にはM、十億にはB、兆にはTを使用します。
短縮表示は、数値を限られたスペースに収める必要がある場合に適しています。モバイルインターフェース、データテーブル、チャートラベル、ダッシュボードカードなどでは、省略された数値のコンパクトな幅が役立ちます。
長い短縮表示で数値をフォーマットする
長い短縮表示では、桁の単位を省略せずに完全に表記します。このフォーマットは、水平方向のスペースを追加で使用する代わりに、より明確な表示を提供します。
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long"
});
console.log(formatter.format(1500));
// Output: "1.5 thousand"
console.log(formatter.format(2400000));
// Output: "2.4 million"
console.log(formatter.format(7800000000));
// Output: "7.8 billion"
console.log(formatter.format(5600000000000));
// Output: "5.6 trillion"
フォーマッターは完全な桁の単位を使用するため、ユーザーが省略形を解釈する必要なく、数値のスケールが即座に明確になります。K、M、Bの表記に馴染みのないユーザーにとって、千、百万、十億という表記の方がアクセスしやすくなります。
長い表示は、スペースよりも明確さが重要なコンテキストで適しています。教育コンテンツ、財務レポート、アクセシビリティ重視のインターフェース、正式な文書などでは、完全に表記された桁の単位が役立ちます。
短い短縮表示と長い短縮表示を比較する
短い表示と長い表示の違いは、同じ数値を両方のオプションでフォーマットすると明確になります。
const shortFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "short"
});
const longFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long"
});
const numbers = [1500, 45000, 2400000, 950000000];
numbers.forEach(num => {
console.log(`${num}:`);
console.log(` Short: ${shortFormatter.format(num)}`);
console.log(` Long: ${longFormatter.format(num)}`);
});
// Output:
// 1500:
// Short: 1.5K
// Long: 1.5 thousand
// 45000:
// Short: 45K
// Long: 45 thousand
// 2400000:
// Short: 2.4M
// Long: 2.4 million
// 950000000:
// Short: 950M
// Long: 950 million
短い表示は一貫して使用する文字数が少なくなります。省略形のKは1文字ですが、thousandはスペースを含めて8文字です。この差は、テーブルやリストに多数の数値を表示する際に増幅されます。
長い表示は各数値に対してより多くのコンテキストを提供します。ユーザーはMが何を表すかを解読する必要なく、2.4 millionと読むことができます。この明示性は、省略された数値フォーマットにあまり馴染みのないユーザーに役立ちます。
短縮表示が言語によってどのように異なるか
短い短縮表示と長い短縮表示の両方は、指定したロケールに適応します。言語によって、異なる省略形と桁の単位が使用されます。
const locales = ["en-US", "fr-FR", "de-DE", "es-ES"];
locales.forEach(locale => {
const shortFormatter = new Intl.NumberFormat(locale, {
notation: "compact",
compactDisplay: "short"
});
const longFormatter = new Intl.NumberFormat(locale, {
notation: "compact",
compactDisplay: "long"
});
console.log(`${locale}:`);
console.log(` Short: ${shortFormatter.format(2400000)}`);
console.log(` Long: ${longFormatter.format(2400000)}`);
});
// Output:
// en-US:
// Short: 2.4M
// Long: 2.4 million
// fr-FR:
// Short: 2,4 M
// Long: 2,4 millions
// de-DE:
// Short: 2,4 Mio.
// Long: 2,4 Millionen
// es-ES:
// Short: 2,4 M
// Long: 2,4 millones
フランス語では複数形にするためにsを追加します。ドイツ語では短縮形としてMio.を使用し、長い形式ではMillionenを使用します。スペイン語では複数形にmillonesを使用します。各言語は、短い形式と長い形式の両方に独自の文法規則を適用します。
フォーマッターは、ロケールに基づいてこれらのバリエーションを自動的に処理します。言語ごとに個別のフォーマットロジックを維持する必要はありません。
アジア言語では、まったく異なる数値のグループ化システムが使用されることがよくあります。
const jaFormatter = new Intl.NumberFormat("ja-JP", {
notation: "compact",
compactDisplay: "short"
});
console.log(jaFormatter.format(15000000));
// Output: "1500万"
const zhFormatter = new Intl.NumberFormat("zh-CN", {
notation: "compact",
compactDisplay: "short"
});
console.log(zhFormatter.format(15000000));
// Output: "1500万"
日本語と中国語では、千ではなく万単位でグループ化されます。「万」という文字は1万を表すため、15,000,000は15Mではなく1500万となります。Intl APIは、このような数値システムの根本的な違いを自動的に処理します。
短縮コンパクト表示を使用するタイミング
短縮コンパクト表示は、すべての文字が重要となるスペースに制約のあるコンテキストで最も効果的です。モバイルインターフェースは水平方向のスペースが限られているため、省略された数値は画面にコンテンツを収めるために不可欠です。
複数の数値を表示するデータテーブルは、均一な幅の恩恵を受けます。1.5K、2.4M、7.8Bを使用することで、列の配置が維持され、折り返しが防止されます。一貫した省略形式により、ユーザーは数値の列を素早くスキャンできます。
ダッシュボードカードとメトリクスパネルは、情報密度を最大化するために短縮表示を使用します。複数のプラットフォームにわたってフォロワー数、閲覧数、エンゲージメントメトリクスを表示するダッシュボードでは、すべてのメトリクスを同時に画面に収めるためにコンパクトなフォーマットが必要です。
グラフの軸とラベルは、重複や混雑を避けるために最小限のテキストが必要です。1.5 millionの代わりに1.5Mを使用することで、軸ラベルを回転または切り詰めることなく読みやすく保ちます。
インタラクティブマップやデータビジュアライゼーションは、数値をオーバーレイやツールチップとして表示する際に短縮表示の恩恵を受けます。省略形式により、テキストが基礎となるコンテンツを隠すことを防ぎます。
長縮コンパクト表示を使用するタイミング
長縮コンパクト表示は、スペース効率よりも明確性とアクセシビリティが重要な場合に最も効果的です。大きな数値について教える教育コンテンツは、桁数を明示することで恩恵を受けます。人口統計や経済数値について学ぶ学生は、規模を理解するために明示的な桁数の単語が必要です。
財務報告書や正式な文書では、曖昧さを避けるために完全表示を使用します。収益が240万と記載されたビジネスレポートは、2.4Mよりも明確です。特に、略語の慣例に馴染みのない読者にとっては重要です。
アクセシビリティを重視したインターフェースでは、スクリーンリーダーが完全に綴られた単語をより自然に発音するため、完全表示が有効です。スクリーンリーダーが「1.5千」と読み上げる方が、「1.5K」よりも自然に聞こえます。後者は「1ポイント5ケー」や「1ポイント5K」と読まれる可能性があります。
印刷レイアウトはデジタルインターフェースよりも水平方向のスペースが広いため、完全表示が実用的です。印刷されたレポート、インフォグラフィック、プレゼンテーションは、レイアウトの問題を引き起こすことなく追加の文字を収容できます。
ユーザーが略語に馴染みがない可能性のある状況では、完全表示が必要です。国際的な視聴者、非技術系ユーザー、またはデジタルリテラシーが低いユーザーにとって、「千」「百万」「十億」は、K、M、Bよりも認識しやすいです。
コンパクト表示を他のフォーマットオプションと組み合わせる
compactDisplayオプションは、他のすべての数値フォーマットオプションと連携します。短縮表示と完全表示を選択しながら、小数点以下の桁数、グループ化、その他のフォーマットを制御できます。
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long",
maximumFractionDigits: 2
});
console.log(formatter.format(1234567));
// Output: "1.23 million"
console.log(formatter.format(9876543));
// Output: "9.88 million"
maximumFractionDigitsオプションは小数点の精度を制御し、compactDisplayは桁数のフォーマットを制御します。これらのオプションは連携して、必要な正確なフォーマットを生成します。
コンパクト表示を通貨フォーマットと組み合わせて、完全に綴られた桁数で金額を表示できます。
const formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
notation: "compact",
compactDisplay: "long"
});
console.log(formatter.format(2400000));
// Output: "$2.4 million"
console.log(formatter.format(750000));
// Output: "$750 thousand"
このフォーマットは、通貨記号と完全に綴られた桁数の両方が明確さを提供する財務報告書や予算概要で、大きな金額を表示する際に適しています。
コンパクト表示は、変化や差分を表示するために符号表示とも連携します。
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long",
signDisplay: "always"
});
console.log(formatter.format(1500000));
// Output: "+1.5 million"
console.log(formatter.format(-850000));
// Output: "-850 thousand"
明示的な記号と完全表記された桁数の組み合わせにより、変化がユーザーに即座に明確になります。
覚えておくべきこと
compactDisplayオプションは、コンパクト表記で省略形を使用するか、完全表記の単語を使用するかを制御します。1.5Kのような省略形の出力には"short"を設定し、1.5 thousandのような完全表記の出力には"long"を設定します。このオプションは省略された場合、デフォルトで"short"になります。
スペースが限られている場合や、一貫した幅が必要な多数の数値を表示する場合は短縮表示を使用します。スペース効率よりも明確性とアクセシビリティが重要な場合は完全表示を使用します。フォーマッターは短縮形式と完全形式の両方について、ロケール固有のバリエーションを自動的に処理します。
compactDisplayを小数点以下の桁数、通貨、符号表示などの他のフォーマットオプションと組み合わせて、アプリケーションに必要な正確な数値フォーマットを作成します。