在前端开发中，字符串处理是非常常见的操作，例如填充字符串、截取字符串、连接字符串等等。为了简化代码，ECMAScript 2018 推出了两个新的字符串方法：String.prototype.padStart 和 String.prototype.padEnd。在本文中，我们将详细介绍这两个方法的使用和实现原理，并提供一些示例代码来帮助读者更好地理解。
String.prototype.padStart 方法
String.prototype.padStart 方法可以在字符串的开头填充一定的字符，直到字符串达到指定的长度。该方法接收两个参数：填充后的字符串长度和填充的字符。
例如，下面的代码使用 padStart 方法在字符串 str 的开头填充 3 个字符 0：
----- --- - ------ ----- ------ - --------------- ----- -------------------- -- --------
这个方法非常有用，可以让字符串对齐或按照一定的格式输出。
下面是一个例子，假设我们有一个数组 list，数组中的每个元素都是一行字符串，我们要输出这些字符串，并在每行字符串的开头显示行号。我们可以使用 padStart 方法对行号进行填充，使得每个行号都占据相同的长度。
----- ---- - --------- -------- ------ ------- ------------------- ------ -- - ----- ---------- - ------ - ------------------------- ----- --------------------------- ---------- ---
上述代码会输出以下结果：
--- ----- --- ----- --- --- --- ---
String.prototype.padEnd 方法
String.prototype.padEnd 方法与 padStart 方法类似，不同之处在于它在字符串的结尾填充一定的字符。
例如，下面的代码使用 padEnd 方法在字符串 str 的结尾填充 3 个字符 =：
----- --- - -------- ----- ------ - ------------- ----- -------------------- -- ----------
下面是一个例子，假设我们要构建一个表格，需要对齐每个单元格的宽度，同时在表格的开头和结尾添加一些分隔符号。我们可以使用 padEnd 方法对每个单元格进行填充，使得每个单元格都占据相同的宽度。
----- ----- - - -------- ------ ---------- --------- ----- ---------- ------- ----- -------- ----------- ----- ------- -- ----- ------- - ---- ----- --------- - --- ----- --------- - ---- -- ----- ----- ------ - ----------------- -- ---------------------- ---------- ----- ---------- - ----------------------- ------------------------ -- ----- ----- ------------- - ---------------------------------- --------------------------- -- ------ --- ---- - - -- - - ------------- ---- - ----- --- - ----------------- -- ---------------------- ---------- ----- ------- - -------------------- --------------------- -
上述代码会输出以下结果：
-------------------------------- -------------------------------- -------------------------------- -------------------------------- -------------------------------
实现原理
padStart 和 padEnd 方法都可以通过以下代码简单实现：
------------------------- - ---------------------- --------- - - -- -
----- --- - ----------------
-- ----------- -- ------------- -
------ ----
- ---- -
----- -------- - ------------ - -----------
----- ------ - ------------------------------------ ----------
------ ------------------
-
-
----------------------- - ---------------------- --------- - - -- -
----- --- - ----------------
-- ----------- -- ------------- -
------ ----
- ---- -
----- -------- - ------------ - -----------
----- ------ - ------------------------------------ ----------
------ ------------------
-
-这段代码首先将字符串转换为字符串类型，然后判断字符串的长度是否达到了目标长度，如果是，则直接返回原字符串。如果不是，则计算需要填充的字符的个数，然后使用 padString 重复这个字符，并取出前面的一部分来填充字符串。注意，如果 padString 的长度大于需要填充的字符的个数，则会直接使用重复后的字符串，而不会截取前面的一部分。
总结
padStart 和 padEnd 方法是 ECMAScript 2018 中非常有用的字符串方法，可以让字符串对齐、美观地输出。在实际应用中，我们常常需要使用这两个方法进行字符串处理。在使用时，需要注意参数的传递和返回值的处理，同时可以自行实现这两个方法，以适应特定的需求。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64e8a51ff6b2d6eab342c649