在前端开发中，字符串处理是非常常见的操作，例如填充字符串、截取字符串、连接字符串等等。为了简化代码，ECMAScript 2018 推出了两个新的字符串方法：String.prototype.padStart 和 String.prototype.padEnd。在本文中，我们将详细介绍这两个方法的使用和实现原理，并提供一些示例代码来帮助读者更好地理解。
String.prototype.padStart 方法
String.prototype.padStart 方法可以在字符串的开头填充一定的字符，直到字符串达到指定的长度。该方法接收两个参数：填充后的字符串长度和填充的字符。
例如，下面的代码使用 padStart 方法在字符串 str 的开头填充 3 个字符 0：
const str = "123"; const result = str.padStart(6, "0"); console.log(result); // "000123"
这个方法非常有用，可以让字符串对齐或按照一定的格式输出。
下面是一个例子，假设我们有一个数组 list，数组中的每个元素都是一行字符串，我们要输出这些字符串，并在每行字符串的开头显示行号。我们可以使用 padStart 方法对行号进行填充，使得每个行号都占据相同的长度。
const list = ["hello", "world", "foo", "bar"];
list.forEach((item, index) => {
const lineNumber = (index + 1).toString().padStart(2, "0");
console.log(`${lineNumber}: ${item}`);
});上述代码会输出以下结果：
01: hello 02: world 03: foo 04: bar
String.prototype.padEnd 方法
String.prototype.padEnd 方法与 padStart 方法类似，不同之处在于它在字符串的结尾填充一定的字符。
例如，下面的代码使用 padEnd 方法在字符串 str 的结尾填充 3 个字符 =：
const str = "hello"; const result = str.padEnd(8, "="); console.log(result); // "hello==="
下面是一个例子，假设我们要构建一个表格，需要对齐每个单元格的宽度，同时在表格的开头和结尾添加一些分隔符号。我们可以使用 padEnd 方法对每个单元格进行填充，使得每个单元格都占据相同的宽度。
-- -------------------- ---- ------- ----- ----- - - -------- ------ ---------- --------- ----- ---------- ------- ----- -------- ----------- ----- ------- -- ----- ------- - ---- ----- --------- - --- ----- --------- - ---- -- ----- ----- ------ - ----------------- -- ---------------------- ---------- ----- ---------- - ----------------------- ------------------------ -- ----- ----- ------------- - ---------------------------------- --------------------------- -- ------ --- ---- - - -- - - ------------- ---- - ----- --- - ----------------- -- ---------------------- ---------- ----- ------- - -------------------- --------------------- -
上述代码会输出以下结果：
name------|age-------|gender---- ----------|----------|---------- Alice-----|20--------|female---- Bob-------|25--------|male------ Charlie--|30--------|male------
实现原理
padStart 和 padEnd 方法都可以通过以下代码简单实现：
-- -------------------- ---- -------
------------------------- - ---------------------- --------- - - -- -
----- --- - ----------------
-- ----------- -- ------------- -
------ ----
- ---- -
----- -------- - ------------ - -----------
----- ------ - ------------------------------------ ----------
------ ------------------
-
-
----------------------- - ---------------------- --------- - - -- -
----- --- - ----------------
-- ----------- -- ------------- -
------ ----
- ---- -
----- -------- - ------------ - -----------
----- ------ - ------------------------------------ ----------
------ ------------------
-
-这段代码首先将字符串转换为字符串类型，然后判断字符串的长度是否达到了目标长度，如果是，则直接返回原字符串。如果不是，则计算需要填充的字符的个数，然后使用 padString 重复这个字符，并取出前面的一部分来填充字符串。注意，如果 padString 的长度大于需要填充的字符的个数，则会直接使用重复后的字符串，而不会截取前面的一部分。
总结
padStart 和 padEnd 方法是 ECMAScript 2018 中非常有用的字符串方法，可以让字符串对齐、美观地输出。在实际应用中，我们常常需要使用这两个方法进行字符串处理。在使用时，需要注意参数的传递和返回值的处理，同时可以自行实现这两个方法，以适应特定的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e8a51ff6b2d6eab342c649