在 ES7 中，JavaScript 引入了新的字符串方法 String.prototype.padStart 和 padEnd。这些方法可以在字符串的前面或后面添加指定数量的字符，用于对齐文本或填充字符串。
在本文中，我们将详细介绍这两个函数，并提供使用示例和最佳实践。
String.prototype.padStart
padStart 可以在字符串的前面添加指定数量的字符，使字符串的总长度达到指定的最小长度。使用 padStart 函数，您需要提供用于填充的字符和最小字符串长度。
下面是 padStart 的语法：
str.padStart(targetLength [, padString])
其中，targetLength 是目标字符串长度，padString 是填充字符串。
使用 padStart 函数的最基本示例：
const str = 'foo'; const result = str.padStart(5, ' '); // 输出：' foo'
在这个示例中，最终字符串的长度为 5，因为在字符串的前面添加了两个空格。
您也可以使用一个默认的填充字符（空格）来填充字符串，如下所示：
const str = 'foo'; const result = str.padStart(5); // 输出：' foo'
在这个示例中，没有明确指定填充字符，因为默认的填充字符是空格。
String.prototype.padEnd
padEnd 可以在字符串的后面添加指定数量的字符，使字符串的总长度达到指定的最小长度。使用 padEnd 函数，您需要提供用于填充的字符和最小字符串长度。
下面是 padEnd 的语法：
str.padEnd(targetLength [, padString])
其中，targetLength 是目标字符串长度，padString 是填充字符串。
使用 padEnd 函数的最基本示例：
const str = 'foo'; const result = str.padEnd(5, ' '); // 输出：'foo '
在这个示例中，最终字符串的长度为 5，因为在字符串的后面添加了两个空格。
您也可以使用一个默认的填充字符（空格）来填充字符串，如下所示：
const str = 'foo'; const result = str.padEnd(5); // 输出：'foo '
在这个示例中，没有明确指定填充字符，因为默认的填充字符是空格。
最佳实践
在实际应用中，这两个函数可以用于格式化输出的字符串。例如，当您需要在表格中对齐列的数据时，您可以使用 padStart 或 padEnd 函数来填充数据，并使它们具有相同的长度。
以下是一个使用 padStart 函数格式化表格的示例：
-- -------------------- ---- -------
----- ------- - -------- ------ ------------
----- ---- - -
-------- ----- ---- -------
--------- ----- ----------
------- ----- ---- -----------
--
----- ------------ - ------------------ -- ---------------
---------------- -- -
------------------- ------ -- -
----- ----------- - ------------------------
-- ------------ - -------------------- -
------------------- - ------------
-
---
---
----- --------- - -------------------- ------ -- -
----- ----- - --------------------
------ -------------------- - ---
--------- - ---
-----------------------
-- -------- - --- - -------- -
----- -------------- - ---------------------- --
---------------- - -- -- --------------
------------
----------------------------
-- ---------------------------------
---------------- -- -
----- ------- - --------------- ------ -- -
----- ----- - --------------------
------ ------------------------------ - ---
--------- - ---
---------------------
---
-- ---
-- ----- - -- - --- ---- -
-- ------ - -- - ------ -
-- ---- - -- - --- --------- -在这个示例中，我们首先找到每一列中最长的值，然后使用 padEnd 函数将每个单元格的数据解决为相同长度。最后，我们使用 padEnd 函数将标题字符串和表格中的每一行格式化为相同的长度，以便所有列都对齐。
结论
在本文中，我们介绍了 ES7 中的 String.prototype.padStart 和 padEnd 函数，以及相应的语法和示例。希望您能将这些函数用于格式化输出的字符串或其他类似用途中，并从本文所述的最佳实践中受益。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f764c6c5c563ced599a656