ES7 对字符串的新增方法：padStart() 和 padEnd()-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，字符串是一种很常见的数据类型。在 ES7 中，新增了两个与字符串相关的方法：padStart() 和 padEnd()。这两个方法可以让我们更加方便地处理字符串的长度问题，本文将介绍这两个方法的用法和应用场景。

padStart() 和 padEnd() 的用法

padStart() 和 padEnd() 方法都是在字符串的前面或后面填充指定的字符，使得字符串达到指定的长度。

padStart()

padStart() 方法接收两个参数：

fillString：填充的字符，可以是任意字符。
targetLength：填充后字符串的长度，如果小于原字符串的长度，则不进行填充。

示例代码：

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

在上面的代码中，padStart() 方法将字符串 'hello' 前面填充了 5 个空格，使得字符串的长度达到了 10。

padEnd()

padEnd() 方法与 padStart() 方法类似，也接收两个参数：

fillString：填充的字符，可以是任意字符。
targetLength：填充后字符串的长度，如果小于原字符串的长度，则不进行填充。

示例代码：

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

在上面的代码中，padEnd() 方法将字符串 'hello' 后面填充了 5 个空格，使得字符串的长度达到了 10。

应用场景

padStart() 和 padEnd() 方法可以用于处理字符串的长度问题，特别是在字符串的对齐和格式化方面，非常有用。

对齐

在一些场景下，我们需要将字符串对齐，例如在输出表格时，需要将表格中的每一列对齐。在这种情况下，我们可以使用 padStart() 或 padEnd() 方法来填充空格，使得每一列的长度相同。

示例代码：

// javascriptcn.com 代码示例
const table = [
  ['id', 'name', 'age'],
  ['001', 'Alice', 18],
  ['002', 'Bob', 20],
  ['003', 'Charlie', 22]
];

// 找到每一列的最大长度
const maxLengths = table.reduce((prev, curr) => {
  return curr.map((col, i) => Math.max(prev[i], col.toString().length));
}, [0, 0, 0]);

// 输出表格
table.forEach((row) => {
  console.log(
    row.map((col, i) => col.toString().padEnd(maxLengths[i], ' ')).join(' | ')
  );
});

在上面的代码中，我们先找到每一列的最大长度，然后使用 padEnd() 方法填充空格，使得每一列的长度相同，最后输出表格。

格式化

在一些场景下，我们需要将字符串格式化，例如在输出日期时，需要将日期格式化为指定的格式。在这种情况下，我们可以使用 padStart() 或 padEnd() 方法来填充指定的字符，使得日期格式化为指定的格式。

示例代码：

const date = new Date();
const year = date.getFullYear().toString();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
const formattedDate = `${year}-${month}-${day}`;
console.log(formattedDate); // '2022-01-01'

在上面的代码中，我们使用 padStart() 方法填充 '0'，使得月份和日期都是两位数，从而将日期格式化为 'yyyy-mm-dd' 的格式。

总结

padStart() 和 padEnd() 方法是 ES7 中新增的两个字符串方法，可以用于处理字符串的长度问题，特别是在字符串的对齐和格式化方面，非常有用。在实际开发中，我们可以根据具体的场景选择使用 padStart() 或 padEnd() 方法，从而提高开发效率。

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