Как убрать конечные нули после десятичной точки?

Введение

При форматировании чисел некоторые значения естественным образом имеют конечные нули после десятичной точки. Число 1.5 может отображаться как 1.50, а 3 — как 3.00. Эти конечные нули могут быть уместны для цен, где вы хотите последовательно показывать центы, но они выглядят излишними при отображении статистики или измерений.

Intl.NumberFormat в JavaScript предоставляет вам контроль над тем, будут ли отображаться конечные нули. Вы можете настроить форматирование так, чтобы удалять их, сохранять или применять разные правила в зависимости от ваших потребностей.

Что такое конечные нули

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

// Эти числа имеют одинаковое значение, но разное количество конечных нулей
1.5   // Без конечных нулей
1.50  // Один конечный нуль
1.500 // Два конечных нуля

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

Как Intl.NumberFormat отображает дробные цифры по умолчанию

По умолчанию Intl.NumberFormat отображает до 3 дробных цифр и удаляет конечные нули. Это означает, что большинство чисел отображаются без лишних нулей.

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

console.log(formatter.format(1.5));
// Вывод: "1.5"

console.log(formatter.format(1.50));
// Вывод: "1.5"

console.log(formatter.format(1.123456));
// Вывод: "1.123"

Форматировщик рассматривает 1.5 и 1.50 как одно и то же значение и отображает их одинаково. Числа с более чем 3 десятичными знаками округляются до 3 цифр.

Установите минимальное и максимальное количество знаков после запятой

minimumFractionDigits и maximumFractionDigits определяют, сколько знаков будет отображаться после десятичной точки. Эти два параметра работают вместе, чтобы определить, будут ли отображаться завершающие нули.

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

console.log(formatter.format(1.5));
// Вывод: "1.50"

console.log(formatter.format(1));
// Вывод: "1.00"

console.log(formatter.format(1.234));
// Вывод: "1.23"

Когда minimumFractionDigits и maximumFractionDigits установлены на одно и то же значение, каждое число отображается с точно таким количеством знаков после запятой. Числа с меньшим количеством знаков получают завершающие нули, а числа с большим количеством знаков округляются.

Удаление завершающих нулей

Чтобы удалить завершающие нули, установите minimumFractionDigits в 0 и maximumFractionDigits в максимальное количество знаков после запятой, которое вы хотите разрешить. Эта конфигурация указывает форматеру отображать от 0 до N знаков после запятой, используя только необходимое количество.

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

console.log(formatter.format(1));
// Вывод: "1"

console.log(formatter.format(1.5));
// Вывод: "1.5"

console.log(formatter.format(1.50));
// Вывод: "1.5"

console.log(formatter.format(1.23));
// Вывод: "1.23"

Форматер отображает целые числа без десятичной точки, числа с одним знаком после запятой как есть и удаляет любые завершающие нули, которые могли бы появиться. Числа по-прежнему округляются до максимального количества знаков после запятой, если они его превышают.

Установите минимальное значение больше нуля

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

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

console.log(formatter.format(1));
// Вывод: "1.0"

console.log(formatter.format(1.5));
// Вывод: "1.5"

console.log(formatter.format(1.50));
// Вывод: "1.5"

console.log(formatter.format(1.234));
// Вывод: "1.234"

console.log(formatter.format(1.2345));
// Вывод: "1.235"

Число 1 отображается как 1.0, потому что минимум составляет 1 знак после запятой. Число 1.5 отображается как есть. Число 1.50 имеет удаленный завершающий ноль. Числа с более чем 3 знаками после запятой округляются до 3.

Когда сохранять конечные нули

Сохраняйте конечные нули, когда нужно показать одинаковую точность для всех чисел. Это часто встречается в ценах, финансовых суммах и измерениях, где количество десятичных знаков имеет значение.

// Цены должны показывать одинаковое количество десятичных знаков
const priceFormatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

console.log(priceFormatter.format(5));
// Вывод: "$5.00"

console.log(priceFormatter.format(5.5));
// Вывод: "$5.50"

Форматировщики валют используют этот подход по умолчанию. Обе суммы отображаются с точностью до 2 десятичных знаков, что упрощает их сравнение и подчеркивает, что это денежные значения.

Когда удалять конечные нули

Удаляйте конечные нули при отображении статистики, процентов, измерений или любых значений, где конечные нули не несут информации. Это создает более чистый и читаемый вывод.

// Статистика выглядит чище без конечных нулей
const statsFormatter = new Intl.NumberFormat("en-US", {
  minimumFractionDigits: 0,
  maximumFractionDigits: 2
});

console.log(`Среднее: ${statsFormatter.format(3.5)} элементов`);
// Вывод: "Среднее: 3.5 элементов"

console.log(`Итого: ${statsFormatter.format(100)} элементов`);
// Вывод: "Итого: 100 элементов"

// Проценты часто лучше смотрятся без конечных нулей
const percentFormatter = new Intl.NumberFormat("en-US", {
  style: "percent",
  minimumFractionDigits: 0,
  maximumFractionDigits: 1
});

console.log(percentFormatter.format(0.75));
// Вывод: "75%"

console.log(percentFormatter.format(0.755));
// Вывод: "75.5%"

Статистика и проценты отображают только те десятичные знаки, которые необходимы. Целые числа отображаются без десятичных точек, а числа с значимыми десятичными знаками показывают их без лишних конечных нулей.

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

Положение десятичной точки и символов группировки цифр зависит от локали, но правила для конечных нулей одинаковы для всех локалей. Опции minimumFractionDigits и maximumFractionDigits оказывают одинаковое влияние независимо от используемой локали.

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

const formatterDE = new Intl.NumberFormat("de-DE", {
  minimumFractionDigits: 0,
  maximumFractionDigits: 2
});

console.log(formatterEN.format(1234.5));
// Вывод: "1,234.5"

console.log(formatterDE.format(1234.5));
// Вывод: "1.234,5"

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