在 ECMAScript 2016（又称为 ES7）中，新增了两个 String 方法：padStart() 和 padEnd()。这两个方法可以方便地填充字符串，从而让字符串具有固定的宽度。
String#padStart()
padStart() 方法用于在字符串的开头填充指定的字符，使字符串达到指定的长度。该方法的语法如下：
str.padStart(targetLength [, padString])
其中，targetLength 是指定的长度，padString 是用于填充的字符串，默认为 " "（空格）。如果 targetLength 已经等于或者小于原字符串的长度，则不做任何操作，直接返回原字符串。
下面是 padStart() 方法的几个示例：
-- -------------------- ---- ------- --- --- - ------- --- ---- - ---------------- ----------------- -- - ------ --- ---- - ---------------- ---- ----------------- -- ------------ --- ---- - --------------- ---- ----------------- -- -------
在第一个示例中，str.padStart(10) 将字符串 'hello' 的开头填充了 5 个空格，从而让字符串的长度达到了 10。在第二个示例中，str.padStart(10, '-') 将字符串 'hello' 的开头填充了 5 个连字符，从而让字符串的长度达到了 10。在第三个示例中，由于 targetLength 已经等于或者小于原字符串的长度，因此不做任何操作。
String#padEnd()
padEnd() 方法与 padStart() 方法类似，只不过是在字符串的结尾进行填充。该方法的语法如下：
str.padEnd(targetLength [, padString])
其中，targetLength 和 padString 的含义与 padStart() 方法中的相同。
下面是 padEnd() 方法的几个示例：
-- -------------------- ---- ------- --- --- - ------- --- ---- - -------------- ----------------- -- ------ - --- ---- - -------------- ---- ----------------- -- ------------ --- ---- - ------------- ---- ----------------- -- -------
与 padStart() 方法类似，在第一个示例中，str.padEnd(10) 将字符串 'world' 的结尾填充了 5 个空格，从而让字符串的长度达到了 10。在第二个示例中，str.padEnd(10, '-') 将字符串 'world' 的结尾填充了 5 个连字符，从而让字符串的长度达到了 10。在第三个示例中，由于 targetLength 已经等于或者小于原字符串的长度，因此不做任何操作。
总结
padStart() 和 padEnd() 方法可以很方便地填充字符串，从而让字符串具有固定的宽度。这在一些需要对齐显示的场景中尤为有用。
需要注意的是，这两个方法是在 ES2016（即 ES7）中才被引入的，因此在旧版本的 JavaScript 中是无法使用的。如果需要在旧版本中使用这两个方法，可以使用 polyfill 进行兼容。
示例代码
下面是一个使用 padStart() 和 padEnd() 方法对齐输出表格的示例代码：
-- -------------------- ---- -------
--- ---- - -
-------- ------ ----------
------- ----- --------
--------- ----- --------
-------- ----- ---------
-
--- ---------- - ------------------ ----- -- -
------ --------------- -- -- -
------ ----------------- ------------
--
-- --- -- ---
--- ---- --- -- ----- -
--- ------ ---- ------- - ---
------------------------------------- - -- - ------------------------ - -- - --------------------------- - ---
-运行上述代码可以得到以下输出结果：
name age gender Tom 18 male Jerry 22 male Lucy 20 female
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649c9c1c48841e9894959fab