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

はじめに

異なるコンテキストでは、負の数の表現方法も異なります。温度変化を示すダッシュボードでは、方向を示すために明示的なプラス記号とマイナス記号が必要です。大きさを表示するチャートでは絶対値のみが重要であり、符号は完全に非表示にすべきです。財務報告では、会計慣行に従ってマイナス記号の代わりに負の金額を括弧で囲みます。

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'は、すべての値に方向が重要であり、増加と減少の両方を強調したい場合に使用します。温度変化、標高差、財務パフォーマンスレポートでは、正と負の値を同様に明示するためにこの形式がよく使用されます。

// 標準的な価格表示：auto（デフォルト）を使用
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).format(-50);
// "-$50.00"

// 絶対価格差：neverを使用
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  signDisplay: 'never'
}).format(-50);
// "$50.00"

// 価格変動：exceptZeroを使用
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  signDisplay: 'exceptZero'
}).format(50);
// "+$50.00"

// 温度変化：alwaysを使用
new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'celsius',
  signDisplay: 'always'
}).format(3);
// "+3°C"

signDisplayオプションを使用すると、アプリケーションでの正と負の数値の表示方法を正確に制御できます。表示する各数値のコンテキストと目的に基づいて、ユーザーに意味を最もよく伝える値を選択してください。