在 ES10 中，新增了两个字符串方法 padStart 和 padEnd，用于填充字符串，方便在字符串前或后添加指定数量的字符以达到对齐或类似美观排版的效果。本文将详细介绍这两个方法的使用技巧，并带有丰富的示例代码以供学习和参考。
padStart 和 padEnd 方法
padStart 和 padEnd 方法都有两个参数，分别为需要填充的字符数量和用于填充的字符。其中，填充字符参数是可选的，默认为 " " 空格字符。如果被填充的字符串长度小于设定的填充字符数量，则会在前面（padStart）或后面（padEnd）添加填充字符，直到字符串长度达到规定的填充字符数量。
const str = "padStart"; console.log(str.padStart(10, "x")); // "xxxpadStart" console.log(str.padEnd(10, "y")); // "padStartyyy"
在上述例子中，我们可以看到 padStart 方法填充了 3 个 "x" 字符到字符串前面，而 padEnd 方法在字符串后面填充了 3 个 "y" 字符，使得字符串长度都达到了 10 个字符。
实战应用
字符串对齐
字符串对齐是 padStart 和 padEnd 方法的经典应用之一。比如我们需要在命令行中输出表格时，为了美观，我们需要让表格中每一列的文本左对齐或右对齐。代码如下：
-- -------------------- ---- ------- ----- --------- - - - ----- -------- ---- --- ------- -------- -- - ----- ------ ---- --- ------- ------ -- - ----- ---------- ---- --- ------- ------ -- -- --- ------ - ----- ---- ------ - -- ---------- - ---------------------------------------------------------------------------------- -
在上述代码中，我们使用 padEnd 和 padStart 方法为每个列的文本进行对齐，以保证表格中所有文本对齐美观。
生成唯一 ID
生成唯一 ID 也是 padStart 和 padEnd 方法的实战应用之一。比如我们需要在前端应用中为每个组件生成唯一 ID，我们可以使用 padStart 方法生成固定长度的 ID。
let id = (Math.random() * 10000).toFixed().toString(); id = id.padStart(5, "0"); // "00726"
在上述代码中，我们生成了一个 0-10000 之间的随机数并四舍五入，最后使用 padStart 方法将其固定为 5 个数字，生成了一个唯一 ID。
总结
ES10 中新增的字符串填充方法 padStart 和 padEnd，是非常实用的字符串方法，可以为前端开发带来更方便的字符串操作方式。使用这两个方法可以实现字符串对齐、生成唯一 ID 等多种实战应用。在使用时需要注意填充字符的数量和填充字符本身的选择，可以根据实际需求灵活使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fc4105f6b2d6eab3217e8f