在现代的 JavaScript 开发中，字符填充是一项经常出现的需求。一个非常常见的场景就是让字符串与某个固定长度对齐，这时我们就需要用到 String.padStart() 方法来实现。
方法介绍
padStart() 方法接收两个参数：第一个为目标字符串长度，第二个为用来填充的字符串。如果被操作字符串本身已经达到或超过指定长度，则不会进行任何操作。
方法示例：
const str = 'hello' console.log(str.padStart(10, '-')) // -------hello
上面代码将 'hello' 填充至长度为 10 的字符串，用 '-' 进行填充。
字符填充应用场景
字符串填充通常用于输出对齐场景，比如：
- 表格输出时，每列的宽度需要一致；
- 日志输出时，需要将时间和日志内容分开输出，且时间部分需要左对齐；
- 数字前补零；
- ...
padStart() 方法详解
填充字符串需要注意的问题
当用空格 ' ' 或者其他单字符进行填充时，通常会忽略掉中英文字符长度不同的问题，导致对齐出现问题（如下图所示）。
——————————————————————————————— | 编号 | 姓名 | 年龄 | ——————————————————————————————— | 1 | 小明 | 18 | ——————————————————————————————— | 10 | 小花 | 21 | ———————————————————————————————
在这种情况下，我们需要用到 JavaScript 内置的 String.prototype.padStart() 方法进行字符填充。该方法会将目标字符串左侧填充至指定长度，填充时，以给定字符串重复拼接直到达到长度要求。
实现步骤
- 确定填充的长度和填充使用的字符串。
- 对需要进行填充的文本使用 padStart() 方法进行填充，并传入填充的长度和填充使用的字符串。
- 验证填充后的文本是否已经与其他文本对齐。
例如，下面是一个应用场景常见的例子：输出固定格式的时刻（类似于日志）。
-- -------------------- ---- ------- ----- --- - - - ----- ----------- ---------- -------- -------- --------- -- - ----- ----------- ---------- -------- ------ ---------- -- - ----- ----------- ---------- -------- --------- ----- - - ------------------- --------- -- - --------------------------------- - ------------ --
上述代码会输出类似这样的结果：
2020/01/01 08:00:00 - request received 2020/02/12 20:30:01 - query completed 2020/03/31 17:22:33 - response sent
总结
ECMAScript 2017 的 String.padStart() 方法为 JavaScript 开发者提供了一种轻松、高效地填充字符串的方式。通过掌握该方法的使用，我们可以极大地提升字符处理的效率和代码质量，让我们的应用更加规范化，易于维护。
示例代码
-- -------------------- ---- ------- ----- --- - ------- ---------------------------- ----- -- ------------ ----- --- - - - ----- ----------- ---------- -------- -------- --------- -- - ----- ----------- ---------- -------- ------ ---------- -- - ----- ----------- -------- - ------------------------------------------------------------------------------ -------- ------------------------------------------------------------------------------------------------------------------------