如何为正数显示加号

介绍

当您在天气应用中显示一个数字（例如 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 选项接受五种值。每种值根据您希望如何处理正数、负数和零的符号而有特定用途。

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 与其他格式化选项（如货币、百分比和小数位数）结合使用，以创建满足您应用需求的精确格式。