ES9 中新增的字符串原型方法 padStart 和 padEnd 的使用实践-JavaScript中文网-JavaScript教程资源分享门户

ES9 中新增的字符串原型方法 padStart 和 padEnd 的使用实践

在 ES9 中，为了让字符串拼接更加方便，新增了两种字符串原型方法：padStart 和 padEnd。

padStart 和 padEnd 的主要作用是在字符串的头部和尾部填充指定的字符，使得字符串达到指定长度。其中，padStart 用于在字符串头部填充，padEnd 则是在字符串尾部填充。

下面我们来看一些使用示例和技巧。

假设我们需要让一个字符串达到指定长度，但是如果字符串长度不够，我们需要在字符串头部或尾部填充指定字符，以达到指定长度。

例如，我们需要让字符串 "hello" 的长度达到 10，用 * 号填充，则可以使用 padStart 方法：

const str = "hello";
const paddedStr = str.padStart(10, "*");
console.log(paddedStr); // "*****hello"

这里的第一个参数是字符串的目标长度，第二个参数是用于填充的字符。也可以只提供填充字符，这样就可以使用默认长度来填充字符串：

const str = "hello";
const paddedStr = str.padStart(10);
console.log(paddedStr); // "     hello" (10 spaces before "hello")

同样的效果也可以用 padEnd 方法实现：

const str = "hello";
const paddedStr = str.padEnd(10, "*");
console.log(paddedStr); // "hello*****"

当我们填充字符串时，需要注意目标长度的设置，否则可能会导致填充不足或填充过多。

例如，下面的代码想要用 # 号填充字符串达到 6 个字符的长度：

const str = "hi";
const paddedStr = str.padEnd(6, "#");
console.log(paddedStr); // "hi####"

但是，由于填充字符 # 的长度为 1，填充 4 个 # 号只能达到 4 个字符的长度，不足目标长度，因此需要在填充字符后面再添加 2 个 # 号：

const str = "hi";
const paddedStr = str.padEnd(6, "##");
console.log(paddedStr); // "hi####"

同样的效果可以用 padStart 实现。

padStart 和 padEnd 不仅可以用于填充字符串，还可以用于填充数字。例如，我们需要输出一段数字序列：

可以用 padStart 方法来实现：

for (let i = 1; i <= 10; i++) {
  const numStr = i.toString().padStart(3, "0");
  console.log(numStr);
}

这里的目标长度是 3，填充字符是 0。

当我们需要输出一段二进制数列时，padStart 方法也可以派上用场。

例如，我们需要输出 0 到 10 的二进制表示：

for (let i = 0; i <= 10; i++) {
  const binaryStr = i.toString(2).padStart(4, "0");
  console.log(binaryStr);
}

这里的 toString(2) 将数字转为了二进制字符串，目标长度是 4，填充字符是 0。

padStart 和 padEnd 还可以配合 slice 方法一起使用，来实现按照长度截取字符串的操作。例如，下面的代码将一个字符串分成两段，第一段长度为 3，第二段长度为 7：

const str = "Hello, world!";
const slicedStr = str.padEnd(10).slice(0, 3) + " " + str.padStart(15).slice(-7);
console.log(slicedStr); // "Hel   rld!"

这里的 padEnd 和 padStart 分别用于将原字符串头部和尾部填充指定字符，然后再使用 slice 方法按照长度截取所需的部分。

ES9 中新增的字符串原型方法 padStart 和 padEnd 可以极大地简化字符串拼接的操作，不仅可以用于填充字符串长度，还可以用于填充数字和二进制表示。但是在使用过程中需要注意目标长度的设置，否则可能会填充不足或填充过多。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65ab3c68add4f0e0ff4dc325