ES7 中的补白方法 padStart/padEnd 在表格对齐中的实践-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，表格的对齐是一个常见的需求。然而，由于表格中的数据长度不一，往往会导致表格的样式不整齐。在 ES7 中，新增了 padStart 和 padEnd 方法，可以很好地解决这个问题。

padStart 和 padEnd 方法

padStart 和 padEnd 方法都是字符串的实例方法，用于在字符串的开头或结尾补充指定的字符，使字符串达到指定的长度。

padStart 方法的语法如下：

str.padStart(targetLength [, padString])

其中，targetLength 表示目标长度，padString 表示用于补充的字符串。如果不传递 padString 参数，默认使用空格字符进行补充。

padEnd 方法的语法与 padStart 方法类似，只是补充字符的位置不同。

实践：表格对齐

假设我们有一个用户列表的表格，包含用户的 ID、姓名和邮箱。我们希望将表格的每一列对齐，使其更加美观。

HTML 结构

// www.javascriptcn.com code example
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>邮箱</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>zhangsan@example.com</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>lisi@example.com</td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>wangwu@example.com</td>
    </tr>
  </tbody>
</table>

CSS 样式

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ccc;
  padding: 10px;
}

JavaScript 代码

// www.javascriptcn.com code example
const table = document.querySelector('table');
const rows = Array.from(table.querySelectorAll('tr'));

// 获取每列的最大宽度
const maxColWidths = rows.reduce((acc, row) => {
  const cells = Array.from(row.querySelectorAll('td, th'));
  cells.forEach((cell, index) => {
    acc[index] = Math.max(acc[index] || 0, cell.textContent.length);
  });
  return acc;
}, []);

// 对每个单元格进行补白
rows.forEach(row => {
  const cells = Array.from(row.querySelectorAll('td, th'));
  cells.forEach((cell, index) => {
    const padString = ' '.repeat(maxColWidths[index] - cell.textContent.length);
    if (cell.cellIndex === 0) {
      cell.textContent = cell.textContent.padStart(maxColWidths[index], '0');
    } else {
      cell.textContent += padString;
    }
  });
});

上述代码中，首先获取了每列的最大宽度，然后对每个单元格进行补白。对于第一列（即 ID 列），使用 padStart 方法在开头补充 0，保证 ID 的位数一致。

指导意义

padStart 和 padEnd 方法可以很好地解决表格对齐的问题，使得表格更加美观。除了表格对齐，这两个方法还可以用于其他场景，比如将数字格式化为指定位数的字符串，或者将字符串格式化为固定长度的字符串等。

在实践中，我们需要注意以下几点：

补白的字符需要根据实际情况进行选择，比如在表格中可以使用空格或 0 进行补白。
如果需要对字符串进行截断，应该先截断再进行补白。
padStart 和 padEnd 方法返回的是新的字符串，原字符串不会被修改。

在日常开发中，我们应该善于使用 padStart 和 padEnd 方法，提高代码的可读性和可维护性。

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

ES7 中的补白方法 padStart/padEnd 在表格对齐中的实践