ES8 中新的 String.prototype.padStart() 和 String.prototype.padEnd() 方法

在 ES8 中，新增了两个字符串方法 padStart() 和 padEnd()，它们可以用来填充字符串，让字符串达到指定的长度。

String.prototype.padStart()

padStart() 方法用于在字符串的前面填充指定的字符，直到字符串达到指定的长度为止。该方法接受两个参数，第一个参数是填充后字符串的总长度，第二个参数是用于填充的字符，默认是空格。

const str = 'hello';
const padStr = str.padStart(10, 'a');
console.log(padStr); // 'aaaaahello'

在上面的例子中，我们将字符串 hello 前面填充了 5 个字符 a，使得字符串总长度为 10。

如果不传入第二个参数，则默认使用空格进行填充：

const str = 'hello';
const padStr = str.padStart(10);
console.log(padStr); // '     hello'

String.prototype.padEnd()

padEnd() 方法与 padStart() 方法类似，不同之处在于它是在字符串的结尾处进行填充。

const str = 'hello';
const padStr = str.padEnd(10, 'a');
console.log(padStr); // 'helloaaaaa'

在上面的例子中，我们将字符串 hello 后面填充了 5 个字符 a，使得字符串总长度为 10。

同样地，如果不传入第二个参数，则默认使用空格进行填充：

const str = 'hello';
const padStr = str.padEnd(10);
console.log(padStr); // 'hello     '

应用场景

这两个方法的应用场景非常广泛，例如：

1. 对齐输出

在控制台输出时，经常需要对齐输出，这时候就可以使用 padStart() 或 padEnd() 方法。

// javascriptcn.com 代码示例
const data = [
  { name: 'Alice', age: 18 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 32 },
];

console.log('Name'.padEnd(10), 'Age'.padStart(5));
data.forEach(item => {
  console.log(item.name.padEnd(10), item.age.toString().padStart(5));
});

输出结果如下：

Name       Age
Alice      18
Bob        25
Charlie    32

2. 生成固定长度的随机字符串

有时候需要生成固定长度的随机字符串，这时候就可以使用 padStart() 或 padEnd() 方法。

// javascriptcn.com 代码示例
function generateRandomString(length) {
  const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
  let str = '';
  for (let i = 0; i < length; i++) {
    const randomIndex = Math.floor(Math.random() * chars.length);
    str += chars[randomIndex];
  }
  return str;
}

const randomStr = generateRandomString(10);
console.log(randomStr.padEnd(20, '-'));

输出结果如下：

nZ3Gn2H8lD----------

总结

padStart() 和 padEnd() 方法是 ES8 中新增的字符串方法，它们可以用来填充字符串，让字符串达到指定的长度。这两个方法的应用场景非常广泛，可以用来对齐输出、生成固定长度的随机字符串等。在实际开发中，我们可以根据具体需求灵活使用这两个方法。

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