正の数値にプラス記号を表示する方法

はじめに

気温の変化を表示する天気アプリで5のような数字を表示する場合、ユーザーはこれが5度という絶対温度を表しているのか、プラス5度の変化を表しているのか判断できません。プラス記号がないことで曖昧さが生じます。プラス記号を明示的に+5として表示することで、その値が中立的な測定値ではなく増加を表していることを伝えることができます。

この区別は、変化、差異、またはデルタを表示する際に重要です。株価の変動、口座残高の調整、スコアの差異、温度変化などはすべて、変化の方向を明確にする明示的なプラス記号の恩恵を受けます。JavaScriptのIntl.NumberFormatは、プラス記号とマイナス記号がいつ表示されるかを制御するsignDisplayオプションを提供しています。

デフォルトでの数値表示方法

デフォルトでは、JavaScriptは負の数に対してのみマイナス記号を表示します。正の数とゼロは記号なしで表示されます。

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

console.log(formatter.format(42));
// 出力: "42"

console.log(formatter.format(-42));
// 出力: "-42"

console.log(formatter.format(0));
// 出力: "0"

このデフォルトの動作は、価格、数量、測定値などの絶対値に適しています。しかし、変化や差異を表示する必要がある場合、プラス記号がないと正の値が曖昧になります。

毎日の気温変化を表示する例を考えてみましょう。明示的な記号がなければ、ユーザーは3や5などの数字を見て、それが変化ではなく絶対温度を意味すると誤解する可能性があります。+3や+5のような明示的な記号があれば、その意味は明確になります。

プラス記号を表示するためのsignDisplayの使用

Intl.NumberFormatのsignDisplayオプションは、数値の記号をいつ表示するかを制御します。signDisplayを"always"に設定すると、プラス記号とマイナス記号の両方が表示されます。

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

console.log(formatter.format(42));
// 出力: "+42"

console.log(formatter.format(-42));
// 出力: "-42"

console.log(formatter.format(0));
// 出力: "+0"

これで正の数はプラス記号付きで表示され、負の数はマイナス記号付きで表示され、ゼロはプラス記号付きで表示されます。このフォーマットは、記号が意味を持つ変化を表示するのに適しています。

すべての signDisplay 値を理解する

signDisplay オプションは5つの値を受け付けます。各値は、正の値、負の値、およびゼロの符号をどのように扱いたいかに応じて特定の目的を果たします。

デフォルトの符号の動作のための auto 値

"auto" 値はデフォルトの動作です。負の数（負のゼロを含む）にはマイナス記号を表示しますが、正の数や正のゼロには記号を表示しません。

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

console.log(formatter.format(100));
// 出力: "100"

console.log(formatter.format(-100));
// 出力: "-100"

console.log(formatter.format(0));
// 出力: "0"

"auto" は、符号がない場合は正の値を意味する絶対値を表示する場合に使用します。これは価格、数量、測定値の標準的な形式です。

すべての符号を表示する always 値

"always" 値は、正、負、ゼロを含むすべての数値に符号を表示します。

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

console.log(formatter.format(100));
// 出力: "+100"

console.log(formatter.format(-100));
// 出力: "-100"

console.log(formatter.format(0));
// 出力: "+0"

"always" は、ゼロが変化なしを表す変更やデルタを表示する場合に使用します。ゼロのプラス記号は、ゼロが欠損値ではなく中立値であることを明確にします。

ゼロの符号を非表示にする exceptZero 値

"exceptZero" 値は、正と負の数値に符号を表示しますが、ゼロの符号は省略します。

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

console.log(formatter.format(100));
// 出力: "+100"

console.log(formatter.format(-100));
// 出力: "-100"

console.log(formatter.format(0));
// 出力: "0"

"exceptZero" は、ゼロが正と負の値と視覚的に区別されるべき特別な状態を表す場合に使用します。例えば、ゼロが変化が発生しなかったことを意味するスコア変更を表示する場合などです。

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

"negative" 値は、負の数に対してのみマイナス記号を表示し、負のゼロは除外します。正の数とゼロは記号なしで表示されます。

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

console.log(formatter.format(100));
// 出力: "100"

console.log(formatter.format(-100));
// 出力: "-100"

console.log(formatter.format(-0));
// 出力: "0"

負の値を強調しながら、正の値とゼロを中立的に扱いたい場合は "negative" を使用します。これは負の値が借金を表す口座残高などに適しています。

すべての記号を非表示にする never 値

"never" 値は、負の数であっても記号なしで数値を表示します。

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

console.log(formatter.format(100));
// 出力: "100"

console.log(formatter.format(-100));
// 出力: "100"

console.log(formatter.format(0));
// 出力: "0"

符号に関係なく数値の絶対値を表示する必要がある場合は "never" を使用します。これは方向が色やアイコンなど他の手段ですでに伝えられている場合に、大きさを表示するのに役立ちます。

各 signDisplay オプションの使用タイミング

数値が表す内容とユーザーがそれをどのように解釈する必要があるかに基づいて、signDisplay 値を選択します。

"always" は、符号が方向を示す変化、差異、またはデルタに使用します。温度変化、株価の動き、スコアの差異には、値が増加したか減少したかを示すために明示的な符号が必要です。

"exceptZero" は、ゼロが変化なしを表し、視覚的に中立であるべき変化に使用します。これによりゼロは増加も減少もしない特別なケースとして目立ちます。

"auto" は、数値が変化ではなく量や測定値を表す絶対値に使用します。価格、距離、重量、カウントはデフォルトの符号表示で機能します。

"negative" は、負の数が特別な注意を必要とするが正の数が通常である値に使用します。口座残高や利益計算では、正の残高を標準として扱いながら、借金を強調することがよくあります。

"never" は、方向が別途伝えられる絶対的な大きさに使用します。色やアイコンがすでに正または負を示している場合、符号を削除することで冗長な情報を防ぎます。

通貨記号とプラス記号の表示

通貨フォーマットはsignDisplayと組み合わせることで、口座の変動や取引金額を明示的な符号付きで表示できます。

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

console.log(formatter.format(250.50));
// 出力: "+$250.50"

console.log(formatter.format(-75.25));
// 出力: "-$75.25"

console.log(formatter.format(0));
// 出力: "+$0.00"

このフォーマットは、取引が口座にお金を追加したのか引き出したのかを明確に示します。プラス記号により入金が暗黙的ではなく明示的に表示されます。

通貨フォーマットとexceptZeroを組み合わせることで、変動なしの状態とプラスまたはマイナスの取引を区別できます。

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

console.log(formatter.format(250.50));
// 出力: "+$250.50"

console.log(formatter.format(-75.25));
// 出力: "-$75.25"

console.log(formatter.format(0));
// 出力: "$0.00"

これにより、ゼロは符号なしで表示され、実際の利益や損失と視覚的に区別されます。

パーセンテージとプラス記号の表示

パーセンテージの変化は、値が増加したか減少したかを示すために明示的な符号が必要なことがよくあります。

const formatter = new Intl.NumberFormat("en-US", {
  style: "percent",
  signDisplay: "always",
  minimumFractionDigits: 1,
  maximumFractionDigits: 1
});

console.log(formatter.format(0.0523));
// 出力: "+5.2%"

console.log(formatter.format(-0.0341));
// 出力: "-3.4%"

console.log(formatter.format(0));
// 出力: "+0.0%"

このフォーマットは成長率、金利、パフォーマンスの変化を表示するのに適しています。プラス記号は、ユーザーに推測させるのではなく、プラスの成長を明示的に示します。

ゼロが意味を持つコンテキストでパーセンテージの変化を表示する場合は、exceptZeroを使用してゼロを視覚的に中立にします。

const formatter = new Intl.NumberFormat("en-US", {
  style: "percent",
  signDisplay: "exceptZero",
  minimumFractionDigits: 1,
  maximumFractionDigits: 1
});

console.log(formatter.format(0.0523));
// 出力: "+5.2%"

console.log(formatter.format(0));
// 出力: "0.0%"

符号のないゼロは、変化が発生しなかったことを明確に示します。

signDisplayと小数点以下の桁数の組み合わせ

signDisplayオプションは、他のすべての数値フォーマットオプションと連携します。符号の表示を制御しながら、小数点以下の桁数、丸め、桁区切り記号も制御できます。

const formatter = new Intl.NumberFormat("en-US", {
  signDisplay: "always",
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

console.log(formatter.format(1234.5));
// 出力: "+1,234.50"

console.log(formatter.format(-1234.5));
// 出力: "-1,234.50"

この組み合わせにより、正の値と負の値の両方に明示的な符号を表示しながら、一貫した小数点以下の桁数を確保できます。

大きな変化を表示するために、signDisplayをコンパクト表記と組み合わせることもできます。

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

console.log(formatter.format(1500000));
// 出力: "+1.5M"

console.log(formatter.format(-850000));
// 出力: "-850K"

コンパクトフォーマットにより大きな数値が読みやすくなり、符号は変化の方向を示します。

覚えておくべきこと

Intl.NumberFormatのsignDisplayオプションは、フォーマットされた数値にプラス記号とマイナス記号がいつ表示されるかを制御します。すべての数値に明示的な符号を表示するには"always"を、ゼロの符号を非表示にするには"exceptZero"を、デフォルトの動作には"auto"を、マイナス記号のみを表示するには"negative"を、すべての符号を非表示にするには"never"を使用します。

数値が変化を表すのか絶対値を表すのか、またゼロに特別な視覚的処理が必要かどうかに基づいて、適切なsignDisplay値を選択してください。アプリケーションに必要な正確なフォーマットを作成するために、signDisplayを通貨、パーセンテージ、小数点以下の桁数などの他のフォーマットオプションと組み合わせることができます。