Как убрать нули в конце числа после запятой?

Введение

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

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

Что такое завершающие нули

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

// These numbers have the same value but different trailing zeros
1.5   // No trailing zeros
1.50  // One trailing zero
1.500 // Two trailing zeros

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

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

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

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

console.log(formatter.format(1.5));
// Output: "1.5"

console.log(formatter.format(1.50));
// Output: "1.5"

console.log(formatter.format(1.123456));
// Output: "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));
// Output: "1.50"

console.log(formatter.format(1));
// Output: "1.00"

console.log(formatter.format(1.234));
// Output: "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));
// Output: "1"

console.log(formatter.format(1.5));
// Output: "1.5"

console.log(formatter.format(1.50));
// Output: "1.5"

console.log(formatter.format(1.23));
// Output: "1.23"

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

Минимум больше нуля

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

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

console.log(formatter.format(1));
// Output: "1.0"

console.log(formatter.format(1.5));
// Output: "1.5"

console.log(formatter.format(1.50));
// Output: "1.5"

console.log(formatter.format(1.234));
// Output: "1.234"

console.log(formatter.format(1.2345));
// Output: "1.235"

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

Когда стоит оставлять нули в конце

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

// Prices should show consistent decimal places
const priceFormatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

console.log(priceFormatter.format(5));
// Output: "$5.00"

console.log(priceFormatter.format(5.5));
// Output: "$5.50"

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

Когда удалять завершающие нули

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

// Statistics look cleaner without trailing zeros
const statsFormatter = new Intl.NumberFormat("en-US", {
  minimumFractionDigits: 0,
  maximumFractionDigits: 2
});

console.log(`Average: ${statsFormatter.format(3.5)} items`);
// Output: "Average: 3.5 items"

console.log(`Total: ${statsFormatter.format(100)} items`);
// Output: "Total: 100 items"

// Percentages often work better without trailing zeros
const percentFormatter = new Intl.NumberFormat("en-US", {
  style: "percent",
  minimumFractionDigits: 0,
  maximumFractionDigits: 1
});

console.log(percentFormatter.format(0.75));
// Output: "75%"

console.log(percentFormatter.format(0.755));
// Output: "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));
// Output: "1,234.5"

console.log(formatterDE.format(1234.5));
// Output: "1.234,5"

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