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

はじめに

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

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

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

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

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

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

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

console.log(formatter.format(0));
// Output: "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));
// Output: "+42"

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

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

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

すべてのsignDisplay値の理解

signDisplayオプションは5つの値を受け入れます。各値は、正の値、負の値、ゼロの値の記号をどのように処理するかに応じて、特定の目的を果たします。

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

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

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

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

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

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

記号がないことが正の値を意味する絶対値を表示する場合は、"auto"を使用します。これは、価格、カウント、測定値の標準形式です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

console.log(formatter.format(0));
// Output: "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));
// Output: "+$250.50"

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

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

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

通貨フォーマットをexceptZeroと組み合わせて、変動なしと正または負の取引を区別できます。

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

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

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

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

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

パーセンテージでプラス記号を表示する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

この組み合わせにより、プラスとマイナスの両方の値に明示的な記号を表示しながら、一貫した小数点以下の桁数が保証されます。

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

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

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

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

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

覚えておくべきこと

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

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