在前端开发中，我们经常需要对字符串进行处理，其中一个常见的需求是对字符串进行补全，以满足特定的长度要求。在 ES8 中，新增了一个 String 方法 padEnd()，可以轻松实现字符串补全的功能。本文将详细介绍该方法的使用方法和注意事项，并提供示例代码，希望能够给读者带来帮助。
String.prototype.padEnd() 方法的基本介绍
padEnd() 方法可以在原字符串的末尾添加指定数量的字符，使其达到指定长度。其语法如下所示：
str.padEnd(targetLength[, padString])
其中，targetLength 参数表示需要补全的长度，是一个整数；padString 参数表示用于补全的字符，如果未指定，则默认用空格补全。需要注意的是，如果原字符串已经大于等于 targetLength，则不会进行补全，直接返回原字符串。
下面是一个简单的示例：
const str = 'hello'; console.log(str.padEnd(10)); // 'hello ' console.log(str.padEnd(10, '*')); // 'hello*****' console.log(str.padEnd(3)); // 'hello'
在上面的示例中，第一个 padEnd() 方法的参数为 10，未指定 padString，所以使用了默认的空格进行补全；第二个 padEnd() 方法的参数同样为 10，但指定了 padString 为 *；第三个 padEnd() 方法的参数为 3，小于原字符串的长度，所以不进行补全。运行后的输出结果如注释所示。
String.prototype.padEnd() 方法的深度解析
参数 targetLength 的处理方式
targetLength 参数是 padEnd() 方法的必需参数，并且必须为正整数，否则将会被转换为 0。当 padEnd() 方法的参数为非数字时，会将参数转为数字。如果转换后的目标长度小于或等于原字符串的长度，那么将不会进行补全。
下面是一个示例：
const str = 'abc';
console.log(str.padEnd(0)); // 'abc'
console.log(str.padEnd(2)); // 'abc'
console.log(str.padEnd('5')); // 'abc '
console.log(str.padEnd('hello')); // 'abc'
console.log(str.padEnd(Math.PI)); // 'abc'在上面的示例中，第一个 padEnd() 方法的参数为 0，小于原字符串的长度，所以不进行补全；第二个 padEnd() 方法的参数为 2，等于原字符串的长度，同样不进行补全；第三个 padEnd() 方法的参数为 '5'，转换为数字 5，进行了 2 个空格的补全；第四个 padEnd() 方法的参数为 'hello'，无法转换为数字，所以被转换为 0，不进行补全；第五个 padEnd() 方法的参数为 Math.PI，转换为数字 3，进行了 2 个空格的补全。
参数 padString 的处理方式
padString 参数是可选参数，它指定要在字符串的末尾添加的字符。如果未指定该参数，则默认添加空格。需要注意的是，如果该参数是空字符串，则会抛出异常：
const str = 'hello'; console.log(str.padEnd(10, '')); // 抛出 TypeError 异常
在上面的示例中，未指定 padString 参数，因此默认添加空格进行补全。如果将 padString 参数设置为空字符串，则会抛出 TypeError 异常。
padEnd() 方法的实现原理
使用 padEnd() 方法进行补全字符串时，会分两步进行。第一步是计算需要补全的字符数，第二步是添加补全字符串。
在第一步中，如果原字符串长度比目标长度要大或等于，那么直接返回原字符串。否则，需要补全的字符数等于目标长度与原字符串长度的差值。
在第二步中，如果未指定 padString 参数，则默认使用空格进行补全。如果指定 padString 参数，则使用该参数进行补全。如果需要补全的字符数等于 0，则直接返回原字符串。如果需要补全的字符数大于 0，且补全字符串长度小于等于需要补全的字符数，则将补全字符串复制多次，使得其长度等于需要补全的字符数。最后，将复制后的补全字符串添加到原字符串的末尾，生成补全后的新字符串。
示例代码
下面代码中，我们将输入的字符串补全长度为 10，用空格进行补全。其中，使用了 padEnd() 方法补全字符串，并使用了 repeat() 方法复制补全字符串：
-- -------------------- ---- -------
-------- -------------- ------------- -
----- --------- - - --
-- ------------- - ----------- -
------ ----
- ---- -
----- ------ - ------------ - -----------
----- ------ - ------ - ---------------- - ------------------ ------- - --------------------------------- - --------------------------- --------
------ ------------------------ --------
-
-
------------------------------ ----- -- ------ -
---------------------------- ------- ----- -- ------ ------
------------------------------ ----- -- -------在上面的示例代码中，我们定义了一个 padString() 函数，它接收两个参数，分别是需要补全的字符串和目标长度。在函数内部，首先根据两个参数的关系判断是否需要进行补全。如果目标长度参数小于原长度，则直接返回原字符串；否则，根据目标长度和原长度计算需要补全的字符数，并使用 padEnd() 方法进行补全。在补全字符串时，先判断是否指定了补全字符 padString，如果未指定，则使用默认的空格字符。然后，根据需要补全的字符数计算出补全字符串的长度，如果补全字符串长度小于需要补全的字符数，则使用 repeat() 方法复制补全字符串多次，直到长度等于需要补全的字符数为止，最后将补全字符串添加在原字符串的末尾，生成补全后的新字符串。
总结
通过本文的介绍，我们了解了 ES8 中新增的 String.prototype.padEnd() 方法，它可以方便地实现字符串补全的功能。在使用该方法时，需要注意参数的处理方式和方法的实现原理。希望本文的详细介绍和示例代码能够帮助读者更好地理解该方法的使用方法和注意事项，为开发者在实际项目中应用该方法提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65191cb795b1f8cacd1569b5