How do you remove trailing zeros after the decimal point?

Introduction

When you format numbers, some values naturally have trailing zeros after the decimal point. The number 1.5 might display as 1.50, or 3 might display as 3.00. These trailing zeros can make sense for prices where you want to show cents consistently, but they look unnecessary when displaying statistics or measurements.

JavaScript's Intl.NumberFormat gives you control over whether trailing zeros appear. You can configure the formatter to remove them, keep them, or apply different rules depending on your needs.

What trailing zeros are

Trailing zeros are zeros that appear at the end of a number after the decimal point. They do not change the mathematical value of the number, but they affect how the number looks when displayed.

// 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

Trailing zeros can appear when you specify how many decimal places to show. If a number has fewer significant digits than the number of decimal places you specified, the formatter adds zeros to fill the remaining positions.

How Intl.NumberFormat displays fraction digits by default

By default, Intl.NumberFormat displays up to 3 fraction digits and removes trailing zeros. This means most numbers appear without unnecessary zeros.

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"

The formatter treats 1.5 and 1.50 as the same value and displays them identically. Numbers with more than 3 decimal places are rounded to 3 digits.

Set the minimum and maximum fraction digits

The minimumFractionDigits and maximumFractionDigits options control how many digits appear after the decimal point. These two options work together to determine whether trailing zeros appear.

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"

When minimumFractionDigits and maximumFractionDigits are set to the same value, every number displays with exactly that many decimal places. Numbers with fewer digits get trailing zeros added, and numbers with more digits get rounded.

Remove trailing zeros

To remove trailing zeros, set minimumFractionDigits to 0 and maximumFractionDigits to the maximum number of decimal places you want to allow. This configuration tells the formatter to display between 0 and N decimal places, using only as many as needed.

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"

The formatter displays whole numbers without a decimal point, numbers with one decimal place as-is, and removes any trailing zeros that would have appeared. Numbers are still rounded to the maximum number of decimal places if they exceed it.

Set a minimum greater than zero

You can set minimumFractionDigits to a value greater than zero while still allowing trailing zeros to be removed. This ensures at least some decimal places always appear, while removing zeros beyond that minimum.

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"

The number 1 displays as 1.0 because the minimum is 1 decimal place. The number 1.5 displays as-is. The number 1.50 has its trailing zero removed. Numbers with more than 3 decimal places are rounded to 3.

When to keep trailing zeros

Keep trailing zeros when you need to show consistent precision across all numbers. This is common for prices, financial amounts, and measurements where the number of decimal places conveys meaning.

// 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"

Currency formatters use this approach by default. Both amounts display with exactly 2 decimal places, making them easy to compare and reinforcing that these are monetary values.

When to remove trailing zeros

Remove trailing zeros when displaying statistics, percentages, measurements, or any value where the trailing zeros add no information. This creates cleaner, more readable output.

// 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%"

The statistics and percentages display only the decimal places they need. Whole numbers appear without decimal points, and numbers with meaningful decimal digits show them without unnecessary trailing zeros.

How locale affects decimal display

The position of the decimal point and digit grouping characters vary by locale, but the rules for trailing zeros work the same way across all locales. The minimumFractionDigits and maximumFractionDigits options have the same effect regardless of which locale you use.

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"

Both formatters remove trailing zeros and display the number with one decimal place. The difference is that the US English format uses a period for the decimal point and commas for thousands separators, while the German format uses the opposite convention.