Как показать плюс для положительных чисел

Введение

Когда вы показываете число, например 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 для отображения плюса

Опция signDisplay в Intl.NumberFormat управляет тем, когда показывать знаки для чисел. Установите 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 принимает пять значений. Каждое значение подходит для определённой ситуации, в зависимости от того, как вы хотите отображать знаки для положительных, отрицательных и нулевых значений.

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"

Компактный формат делает большие числа удобочитаемыми, а знак показывает направление изменения.

Что важно помнить

Опция signDisplay в Intl.NumberFormat определяет, когда плюсы и минусы появляются в отформатированных числах. Используйте "always", чтобы явно показывать знаки для всех чисел, "exceptZero" чтобы скрывать знак у нуля, "auto" для стандартного поведения, "negative" чтобы показывать только минусы, и "never" чтобы скрывать все знаки.

Выбирайте подходящее значение signDisplay в зависимости от того, показываете ли вы изменения или абсолютные значения, и нужно ли выделять ноль. Комбинируйте signDisplay с другими опциями форматирования — валютой, процентами, знаками после запятой — чтобы получить нужный формат для вашего приложения.