在前端开发中，表格的对齐是一个常见的需求。然而，由于表格中的数据长度不一，往往会导致表格的样式不整齐。在 ES7 中，新增了 padStart 和 padEnd 方法，可以很好地解决这个问题。
padStart 和 padEnd 方法
padStart 和 padEnd 方法都是字符串的实例方法，用于在字符串的开头或结尾补充指定的字符，使字符串达到指定的长度。
padStart 方法的语法如下：
str.padStart(targetLength [, padString])
其中，targetLength 表示目标长度，padString 表示用于补充的字符串。如果不传递 padString 参数，默认使用空格字符进行补充。
padEnd 方法的语法与 padStart 方法类似，只是补充字符的位置不同。
实践：表格对齐
假设我们有一个用户列表的表格，包含用户的 ID、姓名和邮箱。我们希望将表格的每一列对齐，使其更加美观。
HTML 结构
-- -------------------- ---- -------
-------
-------
----
-----------
-----------
-----------
-----
--------
-------
----
----------
-----------
-----------------------------
-----
----
----------
-----------
-------------------------
-----
----
----------
-----------
---------------------------
-----
--------
--------CSS 样式
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
}JavaScript 代码
-- -------------------- ---- -------
----- ----- - --------------------------------
----- ---- - -----------------------------------------
-- ---------
----- ------------ - ----------------- ---- -- -
----- ----- - ------------------------------------ ------
-------------------- ------ -- -
---------- - ------------------- -- -- -------------------------
---
------ ----
-- ----
-- ----------
---------------- -- -
----- ----- - ------------------------------------ ------
-------------------- ------ -- -
----- --------- - - ---------------------------- - -------------------------
-- --------------- --- -- -
---------------- - ---------------------------------------------- -----
- ---- -
---------------- -- ----------
-
---
---上述代码中，首先获取了每列的最大宽度，然后对每个单元格进行补白。对于第一列（即 ID 列），使用 padStart 方法在开头补充 0，保证 ID 的位数一致。
指导意义
padStart 和 padEnd 方法可以很好地解决表格对齐的问题，使得表格更加美观。除了表格对齐，这两个方法还可以用于其他场景，比如将数字格式化为指定位数的字符串，或者将字符串格式化为固定长度的字符串等。
在实践中，我们需要注意以下几点：
- 补白的字符需要根据实际情况进行选择，比如在表格中可以使用空格或 0 进行补白。
- 如果需要对字符串进行截断，应该先截断再进行补白。
- padStart 和 padEnd 方法返回的是新的字符串，原字符串不会被修改。
在日常开发中，我们应该善于使用 padStart 和 padEnd 方法，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d38c91a941bf71346c2642
