ES2017 新增的两个字符串方法 String.prototype.padStart() 和 String.prototype.padEnd() 可以帮助我们轻松地增加字符串的长度，并在前面或后面填充指定的字符。
padStart() 方法
padStart() 方法用于在字符串的开头添加指定的字符，使字符串长度达到指定的长度。
padStart() 方法包含两个参数：第一个参数是期望的字符串长度，第二个参数是用于填充的字符。如果不提供第二个参数，默认使用空格填充。
以下是 padStart() 方法的示例代码：
const str = '123'; const paddedStr = str.padStart(5, '0'); console.log(paddedStr); // 输出 '00123'
在这个例子中，我们期望字符串的长度为 5，使用 0 字符填充字符串的开头，得到了 "00123" 的结果。
padEnd() 方法
padEnd() 方法用于在字符串的结尾添加指定的字符，使字符串长度达到指定的长度。
padEnd() 方法也包含两个参数：第一个参数是期望的字符串长度，第二个参数是用于填充的字符。如果不提供第二个参数，默认使用空格填充。
以下是 padEnd() 方法的示例代码：
const str = '123'; const paddedStr = str.padEnd(5, '0'); console.log(paddedStr); // 输出 '12300'
在这个例子中，我们期望字符串的长度为 5，使用 0 字符填充字符串的结尾，得到了 "12300" 的结果。
需要注意的细节
我们需要注意以下几个细节：
- 如果指定的长度小于字符串本身的长度，则不会进行填充。
- 如果填充的字符长度为多个字符，则填充直到字符串达到指定的长度为止。
- 如果省略第二个参数，则默认使用空格进行填充。
以下是示例代码：
-- -------------------- ---- ------- ----- --- - -------- ----- ---------- - ---------------- --------- ------------------------ -- -- ----------------- ----- ---------- - -------------- --------- ------------------------ -- -- ----------------- ----- ---------- - --------------- --------- ------------------------ -- -- ------- ----- ---------- - ------------- --------- ------------------------ -- -- ------- ----- ---------- - ----------------- ------------------------ -- -- - ------
应用场景
我们可以在以下场景中使用 padStart() 和 padEnd() 方法：
- 输出对齐的表格
- 格式化字符串，如日期、时间等
- 构建类似订单号、流水号的字符串
使用 padStart() 和 padEnd() 方法可以使得字符串的操作更加方便灵活，并且不同于手动添加字符串，不会出现错误和遗漏。
结论
在这篇文章中，我们学习了 ECMAScript 2017 中的 String.prototype.padStart() 和 String.prototype.padEnd() 方法，理解了它们的作用和用法，并提供了示例代码和应用场景。
使用 padStart() 和 padEnd() 方法可以帮助我们轻松地增加字符串的长度，并在前面或后面填充指定的字符，为我们的前端开发带来便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6739a0a0317fbffedf17bfe4