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

Введение

Когда вы отображаете число, например, 5, в приложении погоды, показывающем изменение температуры, пользователи не могут понять, представляет ли это абсолютную температуру в 5 градусов или изменение на плюс 5 градусов. Отсутствие знака плюс создает двусмысленность. Явно показывая знак плюс как +5, вы даете понять, что значение представляет собой увеличение, а не нейтральное измерение.

Это различие важно при отображении изменений, разниц или дельт. Изменения цен на акции, корректировки баланса счета, разницы в счете и колебания температуры выигрывают от явных знаков плюса, которые уточняют направление изменения. В JavaScript параметр signDisplay в Intl.NumberFormat позволяет управлять отображением знаков плюс и минус.

Как числа отображаются по умолчанию

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

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

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"

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

Что нужно помнить

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

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