在 JavaScript 中，字符串是一个很基础且重要的数据类型，经常用于文本处理、拼接等场景。ES8 新增加的 String.padStart() 与String.padEnd() 方法为我们提供了更加方便的方式来进行字符串填充操作。在这篇文章中，我们将详细探讨这两个方法的使用方法、实现原理以及应用场景。
String.padStart()
String.padStart() 方法是在原字符串前补足指定长度的字符，直至达到指定长度。具体语法如下：
String.padStart(targetLength, padString)
其中，targetLength 参数表示目标长度，即填充后的字符串长度，padString 参数则是用来填充的字符或字符串。需要注意的是，如果 padString 参数长度小于等于原字符串长度，则不会进行填充操作。以下是一些示例代码：
console.log("hello".padStart(10)); // " hello"
console.log("hello".padStart(10, "ab")); // "ababahello"
console.log("hello".padStart(8, "ab")); // "abhello"
console.log("hello".padStart(5, "!")); // "hello"上述示例中，通过不同的参数值，我们可以看到方法的不同效果。可以看到，如果不指定填充字符，则默认使用空白字符进行填充。如果填充字符的长度小于等于原字符串长度，则不执行填充操作。
需要注意的是，该方法返回的是一个新字符串，并不会修改原字符串。如果需要修改原字符串，则需要自行实现字符串拼接操作。
String.padEnd()
String.padEnd() 方法与 String.padStart() 方法类似，只不过是在字符串尾部进行填充操作。具体语法如下：
String.padEnd(targetLength, padString)
和 String.padStart() 方法一样，targetLength 参数表示目标长度，padString 参数则是用来填充的字符或字符串。以下是一些示例代码：
console.log("hello".padEnd(10)); // "hello "
console.log("hello".padEnd(10, "ab")); // "helloababa"
console.log("hello".padEnd(8, "ab")); // "helloaba"
console.log("hello".padEnd(5, "!")); // "hello"应用场景
String.padStart() 与 String.padEnd() 方法一般用于对齐字符串或数字。我们来看一个实际的应用场景：在控制台中输出表格。通常情况下，我们可以通过手动计算字符长度来对齐表格中的内容，但是这种方式相对繁琐且难以维护。现在，我们可以使用 String.padStart() 方法来快速实现对齐。以下是简单的示例代码：
-- -------------------- ---- -------
----- ---- - -
------ ----- ---- --- ----- ----------
------ ----- ---- --- ----- ----------
------ ----- ---- --- ----- ---------
--
-- ---------
----- ------ - -
----- ------------
---- ------------
----- -----------
--
----------------- -- -
----------------------------- -- -
----------- - --------------------- ------------------
---
---
-- ------
--- ------ - ----
------------------------------- -- -
------ -- - --- -------------------- - ------------------ ---
---
--------------------
-- ------
----------------- -- -
--- --- - ----
------------------------------- -- -
--- -- - -------------------------------- ---
---
-----------------
---在上述示例中，我们通过计算表格中每列的最大长度，来实现对齐输出。使用 String.padEnd() 方法可以很方便地将每列的内容进行对齐。这种方式不仅代码简洁，而且扩展性好，便于后续维护和修改。
总结
ES8 新增加的 String.padStart() 与 String.padEnd() 方法为我们提供了一个方便、简洁的字符串填充方案。在实际开发中，这两个方法可以用来对齐字符串、拼接字符串等操作。同时，也为一些复杂的任务提供了更加灵活、高效的解决方案。在使用时，需要注意一些细节问题，如填充字符的长度、返回值的类型等方面。通过本文的介绍和示例代码，相信大家已经掌握了这两个方法的基本应用和注意事项，欢迎大家在实际开发中使用和实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a2372048841e9894e86378