負の数値のマイナス記号を表示または非表示にする方法

はじめに

文脈によって、負の数値の表現方法は異なります。温度変化を示すダッシュボードでは、方向を示すためにプラス記号とマイナス記号を明示的に表示する必要があります。大きさを表示するグラフでは絶対値のみが重要であり、符号は完全に非表示にする必要があります。財務報告書では、マイナス記号の代わりに負の金額を括弧で囲む会計規則に従います。

JavaScriptのIntl.NumberFormat APIは、フォーマットされた数値に符号を表示するタイミングを制御するsignDisplayオプションを提供します。このオプションにより、負の数値、正の数値、ゼロの符号表示を正確に制御できます。

JavaScriptがデフォルトで負の数値を書式設定する方法

デフォルトでは、Intl.NumberFormatは負の数値にマイナス符号を表示し、正の数値には符号を表示しません。

const formatter = new Intl.NumberFormat('en-US');

formatter.format(-42);
// "-42"

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

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

このデフォルトの動作はほとんどの場合に適していますが、ユースケースで異なる符号処理が必要な場合は上書きできます。

signDisplayオプションで符号の表示を制御する

signDisplayオプションは、符号を表示するタイミングを制御する5つの値を受け入れます。

"auto": 負のゼロを含む負の数値のみに符号を表示(デフォルト)
"never": 符号を表示しない
"always": 正の数値と負の数値の両方に常に符号を表示
"exceptZero": 正の数値と負の数値に符号を表示するが、ゼロには表示しない
"negative": 負のゼロを除く負の数値のみに符号を表示

フォーマッターを作成する際に、オプションオブジェクトでsignDisplayオプションを渡します。

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

マイナス記号を完全に非表示にする

signDisplay: 'never'を使用すると、すべての符号を非表示にし、絶対値のみを表示します。

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

formatter.format(-100);
// "100"

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

formatter.format(-0);
// "0"

この設定はすべての数値から符号を削除するため、-100と100は同じようにフォーマットされます。負のゼロは符号なしで"0"としてフォーマットされます。

このオプションは、データ可視化における絶対変化値、距離計算、誤差範囲など、方向性が重要でない大きさを表示する場合に使用します。

const changes = [-15, 23, -8, 42];

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

changes.map(change => formatter.format(change));
// ["15", "23", "8", "42"]

負の数値のみマイナス記号を表示する

signDisplay: 'auto'オプションはデフォルトの動作です。負の数値には符号を表示しますが、正の数値には表示しません。

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

formatter.format(-100);
// "-100"

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

formatter.format(-0);
// "-0"

このオプションでは、負のゼロが"-0"として表示されることに注意してください。JavaScriptは正のゼロと負のゼロを区別しており、これは特定の数学演算で発生する可能性があります。

他の負の数値には符号を保持しながら、負のゼロの符号を非表示にするには、signDisplay: 'negative'を使用してください。

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

formatter.format(-100);
// "-100"

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

formatter.format(-0);
// "0"

negativeオプションは、負のゼロを特殊なケースとして扱い、符号なしで表示します。これにより、正のゼロと負のゼロの区別がユーザーにとって重要でない文脈で、混乱を招く表示を防ぐことができます。

ゼロを除くすべての数値に符号を表示する

signDisplay: 'exceptZero'を使用すると、正の数値と負の数値の両方に符号を表示しますが、値が正確にゼロの場合は符号を省略します。

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

formatter.format(-100);
// "-100"

formatter.format(100);
// "+100"

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

formatter.format(-0);
// "0"

正の数値はプラス記号付きで表示されます。ゼロの値は、正でも負でも、符号なしで表示されます。

このオプションは、ゼロが変化なしを意味する変化量やデルタを表示する場合に適しています。"+0"や"-0"を表示すると混乱を招きますが、"0"を表示することで意味が明確になります。

const deltas = [5, -3, 0, -0, 12];

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

deltas.map(delta => formatter.format(delta));
// ["+5", "-3", "0", "0", "+12"]

すべての数値に符号を表示する

signDisplay: 'always'を使用すると、正の数値とゼロを含むすべての数値に符号を表示します。

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

formatter.format(-100);
// "-100"

formatter.format(100);
// "+100"

formatter.format(0);
// "+0"

formatter.format(-0);
// "-0"

この設定は、正の数値と正のゼロにプラス記号を追加します。負のゼロはマイナス記号を保持し、区別が視覚的に明確になります。

温度変化、標高変化、財務上の損益など、すべての値で方向性を強調する必要がある場合は、このオプションを使用してください。

const temperatures = [-5, 0, 3, -2];

const formatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'celsius',
  signDisplay: 'always'
});

temperatures.map(temp => formatter.format(temp));
// ["-5°C", "+0°C", "+3°C", "-2°C"]

符号表示と通貨フォーマットの組み合わせ

signDisplayオプションは、通貨フォーマットを含むすべてのフォーマットスタイルで機能します。currencySign: 'accounting'と組み合わせることで、会計規則に従った形式を作成できます。

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

formatter.format(-1234.56);
// "($1,234.56)"

会計表記では、マイナス記号の代わりに負の金額を括弧で囲みます。この規則により、財務報告書で負の数値がより視覚的に区別しやすくなります。

会計表記を異なるsignDisplay値と組み合わせることができます。

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

always.format(1234.56);
// "+$1,234.56"

always.format(-1234.56);
// "($1,234.56)"

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

never.format(-1234.56);
// "$1,234.56"

signDisplay: 'always'では、正の金額にプラス記号が表示され、負の金額には引き続き括弧が使用されます。signDisplay: 'never'では、正の金額と負の金額の両方が符号や括弧なしで表示されます。

各符号表示オプションを使用するタイミング

数値が何を表し、ユーザーがどのように解釈するかに基づいて、signDisplay値を選択してください。

負の数値を明確に識別する必要がある標準的な数値フォーマットには、signDisplay: 'auto'を使用します。これはデフォルトであり、価格、カウント、測定値、およびほとんどの汎用的な数値表示に適しています。

方向性が重要でない絶対値や大きさを表示する場合は、signDisplay: 'never'を使用します。これは、距離計算、誤差範囲、絶対変化値、および方向性を持たない大きさを示すデータ可視化に適しています。

標準的な負の数値フォーマットが必要だが、負のゼロの表示を避けたい場合は、signDisplay: 'negative'を使用してください。これにより、正のゼロと負のゼロの区別がユーザーにとって意味を持たない数学的または科学的な文脈で、混乱を招く"-0"の表示を防ぐことができます。

ゼロが変化なしを意味する変化量やデルタを表示する場合は、signDisplay: 'exceptZero'を使用してください。これにより、増減が明確になり、混乱を招く"+0"や"-0"の表示を避けることができます。温度変化、株価の変動、パフォーマンス指標などに適しています。

すべての値で方向性が重要であり、増加と減少の両方を強調したい場合は、signDisplay: 'always'を使用してください。温度変化、標高差、財務パフォーマンスレポートなどでは、このフォーマットを使用して正の値と負の値を同等に明示的に表示することがよくあります。

// Standard pricing: use auto (default)
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).format(-50);
// "-$50.00"

// Absolute price difference: use never
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  signDisplay: 'never'
}).format(-50);
// "$50.00"

// Price change: use exceptZero
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  signDisplay: 'exceptZero'
}).format(50);
// "+$50.00"

// Temperature change: use always
new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'celsius',
  signDisplay: 'always'
}).format(3);
// "+3°C"

signDisplayオプションを使用すると、アプリケーションで正の数値と負の数値がどのように表示されるかを正確に制御できます。表示する各数値の文脈と目的に基づいて、ユーザーに意味を最もよく伝える値を選択してください。