使用 JavaScript 将数字格式化为百分比

作者

使用 JavaScript 将数字格式化为百分比

Format a Number as a Percent using JavaScript

使用Intl.NumberFormat()构造函数将数字格式化为百分比值。构造函数创建并返回一个对象，我们可以在该对象上调用format()方法根据提供的格式化选项对象格式化数字。

索引.js
function formatAsPercent(num) {
  return new Intl.NumberFormat('default', {
    style: 'percent',
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  }).format(num / 100);
}

console.log(formatAsPercent(35.3)); // 👉️ "35.30%"
console.log(formatAsPercent(100)); // 👉️ "100.00%"
console.log(formatAsPercent(25.5)); // 👉️ "25.50%"

我们创建了一个可重用的函数，它将数字格式化为百分比。

我们使用
Intl.NumberFormat()
构造函数来获取一个Intl.NumberFormat对象。

在
format
方法的调用中，我们将提供的数字除以100直接将传入的值格式化为百分比。

我们将以下 2 个参数传递给Intl.NumberFormat构造函数：

  1. 语言环境字符串，例如defaultor en-US。
  2. 格式化选项对象。
在选项对象中，我们将style属性设置为并指定我们希望格式化值具有最小和最大小数位数。 percent2

您可能需要根据您的用例调整这些选项，但请注意，如果小数位数设置为0，则格式化值将向上或向下舍入。

索引.js
function formatAsPercent(num) {
  return new Intl.NumberFormat('default', {
    style: 'percent',
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
  }).format(num / 100);
}

console.log(formatAsPercent(25.49)); // 👉️ "25%"
console.log(formatAsPercent(25.5)); // 👉️ "26%"

在此示例中，我们将小数位数设置为0。当使用十进制值为或更小的浮点数调用该函数时.49，它会向下舍入，否则该值会向上舍入。

或者，您可以使用parseFloat函数和toFixed方法。

将数字格式化为百分比：

  1. 将数字作为参数传递给parseFloat()函数。
  2. 在结果上调用toFixed()方法。
  3. 在结果中附加百分号%。
索引.js
function formatAsPercent(num) {
  return `${parseFloat(num).toFixed(2)}%`;
}

console.log(formatAsPercent(25.49)); // 👉️ 25.49%
console.log(formatAsPercent(25.5)); // 👉️ 25.50%
console.log(formatAsPercent(25)); // 👉️ 25.00%

这种方法不等同于使用Intl.NumberFormat()构造函数和format()方法，但是更简单一些。

parseFloat函数将

提供的值解析为浮点数，
Number.toFixed
方法使用定点表示法格式化数字。

索引.js
console.log((5).toFixed(3)); // 👉️ "5.000"
console.log((5).toFixed(2)); // 👉️ "5.00"
console.log((5).toFixed(1)); // 👉️ "5.0"

最后一步是将百分号附加到值以将数字格式化为百分比。

–