在前端开发中，我们经常需要对字符串进行格式化操作。ECMAScript 2019 引入了两个新方法：字符串.padStart() 和字符串.padEnd()，用于填充字符串。这两个方法可以让我们在字符串的开头或结尾填充指定数量的字符，从而达到格式化输出的效果。
字符串.padStart()
字符串.padStart() 方法用于在字符串的开头填充指定数量的字符。该方法接受两个参数：要填充的长度和填充的字符。如果要填充的长度小于等于原字符串的长度，则不会进行任何操作。
const str = 'hello'; console.log(str.padStart(10, 'x')); // "xxxxxhello" console.log(str.padStart(2, 'x')); // "hello"
在上面的示例中，第一个 console.log() 输出的结果是 "xxxxxhello"，因为要填充的长度是 10，填充的字符是 'x'，所以在原字符串的开头填充了 5 个 'x'。第二个 console.log() 输出的结果是原字符串，因为要填充的长度是 2，小于等于原字符串的长度，所以不会进行任何操作。
字符串.padEnd()
字符串.padEnd() 方法用于在字符串的结尾填充指定数量的字符。该方法也接受两个参数：要填充的长度和填充的字符。如果要填充的长度小于等于原字符串的长度，则不会进行任何操作。
const str = 'hello'; console.log(str.padEnd(10, 'x')); // "helloxxxxx" console.log(str.padEnd(2, 'x')); // "hello"
在上面的示例中，第一个 console.log() 输出的结果是 "helloxxxxx"，因为要填充的长度是 10，填充的字符是 'x'，所以在原字符串的结尾填充了 5 个 'x'。第二个 console.log() 输出的结果是原字符串，因为要填充的长度是 2，小于等于原字符串的长度，所以不会进行任何操作。
应用场景
字符串.padStart() 和字符串.padEnd() 方法在前端开发中有很多应用场景。比如，我们可以使用这两个方法来格式化日期时间：
-- -------------------- ---- ------- ----- ---- - --- ------- ----- ---- - ------------------------------ ----- ----- - ---------------- - ------------------------- ----- ----- --- - ------------------------------------- ----- ----- ---- - -------------------------------------- ----- ----- ------ - ---------------------------------------- ----- ----- ------ - ---------------------------------------- ----- ----- ------------- - ------------------------ ----------------------------- ---------------------------
在上面的示例中，我们使用字符串.padStart() 方法来确保月份、日期、小时、分钟和秒数都是两位数。最终的结果是一个格式为 "yyyy-mm-dd hh:mm:ss" 的日期时间字符串。
总结
字符串.padStart() 和字符串.padEnd() 方法是 ECMAScript 2019 新增的两个方法，用于在字符串的开头或结尾填充指定数量的字符。这两个方法在前端开发中有很多应用场景，比如格式化日期时间。我们可以利用这两个方法来简化代码，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6516c31195b1f8cacdf142d4