在 ES10 中，新增了两个字符串方法：String.prototype.padStart() 和 String.prototype.padEnd()。这两个方法可以让我们更方便地对字符串进行填充操作，例如在前端开发中对数字进行格式化，或对字符串进行对齐等操作。
String.prototype.padStart()
String.prototype.padStart() 方法会在一个字符串的开头添加指定数量的字符，以达到给定的总长度。这个方法的语法比较简单：
------------------------- -- -----------
其中 targetLength 参数表示目标长度，即最终字符串的长度，而 padString 参数则表示要填充的字符串，默认为使用空格填充。
下面是一个例子，将一个数字字符串填充至长度为 8，不足的部分使用 0 填充：
----- ------ - ------ ----- ------------ - ------------------ ----- -------------------------- -- ----------
这个例子中，我们将 number 字符串填充至长度为 8，因为原字符串的长度不足 8，所以使用 padStart() 方法进行填充，并将不足的部分使用 0 填充。
String.prototype.padEnd()
String.prototype.padEnd() 方法跟 String.prototype.padStart() 类似，不同之处在于它在一个字符串的结尾添加指定数量的字符。这个方法的语法如下：
----------------------- -- -----------
其中的 targetLength 和 padString 参数与 padStart() 方法是相同的。下面是一个例子，将一个字符串填充至长度为 10，不足的部分使用 - 填充：
----- ---- - -------- ----- ---------- - --------------- ----- ------------------------ -- ------------
这个例子中，我们将 text 字符串填充至长度为 10，不足的部分使用 - 填充，因为原字符串的长度不足 10。
深入理解 padStart() 和 padEnd()
虽然 String.prototype.padStart() 和 String.prototype.padEnd() 很容易使用，但是我们还需要深入理解它们的原理。这可以帮助我们更好地使用这两个方法，并更好地理解相关的 JavaScript 概念。
1. 只能填充字符串类型
padStart() 和 padEnd() 方法只能对字符串进行填充，如果传入的参数不是字符串类型，则会被自动转为字符串类型的对象。
这意味着如果我们直接传入一个数字，就必须将其转为字符串类型：
----- ------ - ---- -- ---------------- ----- ------------ - ------------------ ----- -- ---------- --------------- -- --- - -------- -- --------------- ----- ------------ - ----------------------------- ----- -------------------------- -- ----------
2. 填充的长度不能小于原字符串的长度
无论是 padStart() 还是 padEnd()，都不能将原字符串的长度变得更短，也就是说，填充的长度不能小于原字符串的长度。如果你传入一个比原字符串长度更小的目标长度，则不会进行填充操作，直接返回原字符串。
----- ---- - -------- -- --------------------- ----- ---------- - -------------- ----- ------------------------ -- -------
3. 不足部分默认填充空格
如果你不传入 padString 参数，则默认会使用空格进行填充操作。
----- ---- - -------- -- --- ------------------ ----- ---------- - ---------------- ------------------------ -- ------ -
4. 使用 padStart() 和 padEnd() 进行字符串对齐
padStart() 和 padEnd() 方法可以帮助我们对字符串进行对齐操作，例如将多个字符串对齐在一起。
----- ---- - --------- --------- --------- -------- ----- --------- - ------------------------- -- -------------- ----- ----------- - ------------- -- ---------------------- - ---- ------------------------------------ -- ----- -- ------ -- ------ -- ----
在这个例子中，我们首先获取所有字符串中最大的长度 maxLength，然后使用 padEnd() 方法将所有字符串都填充至相同长度，最后将它们拼接在一起。这样就能够对齐显示了。
总结
String.prototype.padStart() 和 String.prototype.padEnd() 方法是 JavaScript 里新增的两个字符串方法，它们可以帮助我们对字符串进行填充操作，从而实现更多的字符串操作。使用这两个方法时需要注意传入的参数类型以及填充长度等条件，以免出现错误。对于前端开发来说，这两个方法可以帮助我们更方便地处理字符串，使代码更加简洁可读，提高了开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64debbd8f6b2d6eab39dc4b9