如何显示或隐藏负数的负号？

介绍

不同的上下文需要对负数进行不同的表示。显示温度变化的仪表板需要明确的正负号来指示方向。而显示数值大小的图表只关注绝对值，应该完全隐藏符号。财务报告遵循会计惯例，用括号将负数金额括起来，而不是使用负号。

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 选项接受五个值，用于控制符号的显示时机：

"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 选项为您提供了对正负数显示方式的精确控制。根据每个数字的上下文和用途选择最能向用户传达意义的值。