用 ES9 的字符串填充方法解决 JavaScript 数学运算的格式化问题-JavaScript中文网-JavaScript教程资源分享门户

引言

在前端开发中，经常需要对数字进行格式化输出，例如显示为货币格式、百分比格式等。如果直接将数字转为字符串，很难满足这些需求，需要使用特定的格式化方法。而 ES9 引入了字符串填充方法，使得数值格式化变得更加方便和灵活。

本文将介绍如何使用 ES9 的字符串填充方法解决 JavaScript 数学运算的格式化问题，并提供实例代码。

数值格式化

数值格式化是将数字按照一定的规则转换为字符串输出。常见的格式包括四舍五入、保留小数位数、添加分隔符等。在 JavaScript 中，可以使用以下方法进行数值格式化：

toFixed()：保留指定小数位数，并将数字转为字符串。
toExponential()：将数字表示为科学计数法，并转为字符串。
toPrecision()：根据数字值的大小自动选择 toFixed() 或 toExponential() 进行转换，并保留指定有效数字位数。将数字转为字符串。

这些方法虽然能够实现较为基本的数值格式化，但对于实际需求来说还远远不够。

ES9 字符串填充方法

ES9 引入了以下字符串填充方法，用于在字符串中添加填充字符，实现不同的数值格式化方式。

padStart()

padStart() 方法用于在字符串左侧添加填充字符，直到字符串达到指定长度。该方法有两个参数：

targetLength：填充后目标字符串长度，必填。
padString：填充字符，选填。默认为 " "（空格）。

示例代码如下：

const str = "123";
console.log(str.padStart(6, "0")); // 输出 "000123"
console.log(str.padStart(4)); // 输出 " 123"

padEnd()

padEnd() 方法用于在字符串右侧添加填充字符，直到字符串达到指定长度。该方法有两个参数：

targetLength：填充后目标字符串长度，必填。
padString：填充字符，选填。默认为 " "（空格）。

示例代码如下：

const str = "123";
console.log(str.padEnd(6, "0")); // 输出 "123000"
console.log(str.padEnd(4)); // 输出 "123 "

数值格式化示例

给数字添加千位分隔符

我们常常会需要将一个大数字添加千位分隔符，使其更易于用户阅读。使用 toLocaleString() 方法可以实现该功能，但需要注意该方法在不同浏览器中的实现可能不同。使用 ES9 的字符串填充方法 padStart() 可以更为稳妥地实现千位分隔符的添加。

function addCommas(num) {
  const str = num.toString().split(".");
  str[0] = str[0].padStart(Math.ceil(str[0].length / 3) * 3, "0");
  return str[0].replace(/(\d{3})/g, "$1,").replace(/,$/, "") + (str[1] ? "." + str[1] : "");
}

console.log(addCommas(12345678.9012)); // 输出 "12,345,678.9012"

给小数补全位数

在某些情况下，我们需要给小数补全位数，例如将小数保留两位。使用 toFixed() 方法可以实现该功能，但其对于整数没有任何作用，因此会产生额外的开销。使用 ES9 的字符串填充方法 padEnd() 可以更好地实现该功能。

function addDecimal(num, digits = 2) {
  const str = num.toString().split(".");
  str[1] = str[1] ? str[1].padEnd(digits, "0").substr(0, digits) : "0".repeat(digits);
  return str.join(".");
}

console.log(addDecimal(123.45)); // 输出 "123.45"
console.log(addDecimal(123)); // 输出 "123.00"

总结

ES9 的字符串填充方法为 JavaScript 的数值格式化提供了更多的灵活性和自由度。通过本文的介绍，我们可以更加清晰地了解如何应用这些新特性。

使用 ES9 的字符串填充方法方便实现数值格式化问题。这种方法更为灵活和高效，可以让我们在开发过程中更好地应对各种需求，提高程序的可读性和实用性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64fc3b72f6b2d6eab3215114