在 ES8 中，JavaScript 引入了 String.prototype.padEnd() 和 String.prototype.padStart() 方法，它们可以让我们更方便地将一个字符串填充到指定的长度。在本文中，我们将手动实现这两个方法，并探讨实现的细节和技巧。
实现 padEnd() 方法
padEnd() 方法可以将一个字符串填充到指定的长度，如果指定长度小于当前字符串的长度，则返回原始字符串。具体用法如下：
const str = 'hello'; console.log(str.padEnd(10, 'world')); // "helloworld" console.log(str.padEnd(3, 'world')); // "hello"
我们可以用以下代码实现 padEnd() 方法：
-- -------------------- ---- -------
----------------------- - ---------------------- ---------- -
------------ - ------------------------- -- -- ------------ -----
--------- - ---------------- -- - --- -- ------ -----------------
-- ------------ - ------------- -
------ -------------
-
------------ -- ------------
-- ------------- - ----------------- -
-- ------------- --------- --------
--------- -- ----------------------------- - ------------------
-
------ ------------ - ------------------ --------------
--首先我们检查 targetLength，如果它不是一个整数，我们就将其截断。然后检查是否传了 padString，如果没有指定，默认使用空格填充。
然后我们检查原始字符串的长度是否大于 targetLength，如果是，就返回原始字符串。否则，我们计算填充的数量，以便为输入字符串添加填充。
由于我们不想一直重复 padString 的字符，我们要检查填充字符串的长度是否比所需的长度短。如果是，我们就将其复制到长度足够，最后将其添加到原始字符串的末尾，返回构造的新字符串。
实现 padStart() 方法
padStart() 方法与 padEnd() 方法类似，不同之处在于它将填充字符串添加到字符串的开头而不是结尾。具体用法如下：
const str = 'hello'; console.log(str.padStart(10, 'world')); // "helloworld" console.log(str.padStart(3, 'world')); // "hello"
我们可以以下代码实现 padStart() 方法：
-- -------------------- ---- -------
------------------------- - ---------------------- ---------- -
------------ - -------------------------
--------- - ---------------- -- - ---
-- ------------ - ------------- -
------ -------------
-
------------ -- ------------
-- ------------- - ----------------- -
--------- -- ----------------------------- - ------------------
-
------ ------------------ ------------- - -------------
--这个方法和 padEnd() 方法非常相似，除了在字符串末尾添加字符外，它在字符串开头添加字符。
总结
在本文中，我们介绍了如何手动实现 ES8 中的 padEnd() 和 padStart() 方法。我们了解了如何处理 targetLength 和 padString 的默认值，如何检查填充字符串的长度，以避免重复计算，并演示了如何在字符串的末尾或开头添加填充字符。
虽然这些方法看起来很简单，但在某些情况下，它们可以极大地简化代码，使代码更易于阅读和理解。现在我们已经手动实现了它们，我们更好地理解了它们的细节和算法，并且知道如果需要在没有这些方法的情况下手动执行此操作，我们可以使用什么方法和技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cb6cd45ad90b6d04208007