在 ES9 中，新增了两个字符串方法 padStart() 和 padEnd()，可以用来在字符串的开头或结尾填充一些字符。这两个方法为我们解决了一些常见的字符串格式化问题，如表格对齐、时间格式化等。
padStart()
padStart() 方法将给定字符串填充到指定长度开头，使用另一个字符串填充。如果当前字符串长度大于或等于指定的长度，则返回原字符串。
其语法为：
str.padStart(targetLength [, padString])
其中参数 targetLength 为目标字符串长度，padString 为填充所使用的字符串。如果未指定 padString，则使用空格来填充。
下面是一个简单的示例，将字符串填充到一个指定长度：
const str = '123'; console.log(str.padStart(5, '0')); // '00123'
上面的代码中，我们在字符串 '123' 的开头填充了两个字符 '0'，使其长度变为了 5。
padEnd()
padEnd() 方法将给定字符串填充到指定长度结尾，使用另一个字符串填充。同样，如果当前字符串长度大于或等于指定的长度，则返回原字符串。
其语法为：
str.padEnd(targetLength [, padString])
与 padStart() 方法相同，参数 targetLength 为目标字符串长度，padString 为填充所使用的字符串。如果未指定 padString，则使用空格来填充。
下面是一个使用 padEnd() 方法的示例，将字符串填充到一个指定长度并在结尾添加标点符号：
const str = 'abc'; console.log(str.padEnd(6, '.')); // 'abc...'
在以上示例中，我们使用 padEnd() 方法在字符串 'abc' 的结尾填充了三个 '.' 字符，使其长度变为了 6。需要注意的是，如果我们填充的字符串不足以完成填充，padStart() 和 padEnd() 方法会将填充字符串复制到指定长度。
使用示例
下面我们来实际运用 padStart() 和 padEnd() 方法，在实际项目中解决字符串填充问题。
数字格式化
比如我们需要格式化时间，将小时、分钟和秒分别填充到两位，并用冒号连接。我们可以这样写：
const date = new Date();
const hour = date.getHours().toString().padStart(2, '0');
const minute = date.getMinutes().toString().padStart(2, '0');
const second = date.getSeconds().toString().padStart(2, '0');
console.log(`${hour}:${minute}:${second}`); // '08:59:30'表格对齐
我们可以利用 padStart() 和 padEnd() 方法来解决表格单元格的对齐问题。比如我们有一个表格，需要将 Name 单元格左对齐， Age 单元格右对齐。我们可以这样写：
-- -------------------- ---- -------
----- ----- - -
-------- ------ --------
--------- ----- ---- -------
------- ----- ---- ----------
----------- ----- ----------
-
----- --------- - ---------------- -- --
------------------------- -- ----------------
----- ----------- - ----- ------ -- -----------------
----- ------------ - ----- ------ -- -------------------
--- ------ --- -- ------ -
----- ---- - -------------- -- --
- --- - - ----------------- ------------- - ------------------ --------------
------- --
-----------------
-输出结果如下：
Name Age City Alice 21 New York Bob 32 Los Angeles Charlie 56 Chicago
总结
ES9 中的 padStart() 和 padEnd() 方法在字符串填充的场景中提供了便利性和可读性。
这两个方法让字符串格式化变得更加方便，可以在时间格式化、日志输出、表格对齐、文件名填充等场景中广泛应用。同时，这些场景也涉及了日常前端开发中常见的问题。因此，学会使用这两个方法可以让我们的开发工作更加高效和便捷。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b73d04add4f0e0fffd0c13