如何去除小数点后的尾随零？

介绍

在格式化数字时，一些值在小数点后自然会有尾随零。例如，数字 1.5 可能显示为 1.50，或者 3 可能显示为 3.00。这些尾随零在需要一致显示分位（如价格）时是有意义的，但在显示统计数据或测量值时看起来可能显得多余。

JavaScript 的 Intl.NumberFormat 提供了对尾随零显示的控制。您可以根据需要配置格式化器来移除它们、保留它们，或应用不同的规则。

什么是尾随零

尾随零是出现在数字小数点后末尾的零。它们不会改变数字的数学值，但会影响数字的显示方式。

// 这些数字的值相同，但尾随零不同
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"

货币格式化程序默认使用这种方法。两个金额都显示为精确的两位小数，使其易于比较，并强化了这些是货币值的概念。

何时移除尾随零

在显示统计数据、百分比、测量值或任何尾随零不提供信息的值时，请移除尾随零。这会使输出更简洁、更易读。

// 统计数据在没有尾随零时看起来更简洁
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"

两个格式化程序都移除了尾随零，并以一位小数显示数字。不同之处在于，美国英语格式使用句号作为小数点，逗号作为千位分隔符，而德语格式则相反。