在 JavaScript 中，字符串操作一直是前端开发中最基础也最常用的功能之一，ECMAScript 2017 标准中新增的字符串填充方法 String.padStart() 和 String.padEnd() 可以让我们在字符串填充中更加自由和方便地控制填充位置和填充字符，以达到更好的格式显示效果。本文将详细介绍这两个方法的使用方法及其深度和学习以及指导意义，并提供实际的示例代码供读者参考。
1. String.padStart()
String.padStart() 方法用于在当前字符串的开头，补全指定长度的字符。该方法接收两个参数，第一个参数是填充后的字符串总长度，第二个参数是用于填充的字符，填充字符可以为空，如果不传入，则自动默认使用空格字符填充。如果当前字符串的长度已经等于或者超过了指定的长度，则不会进行任何填充。
下面是使用 String.padStart() 方法的基本示例：
--- --- - -------- ---------------------------- ------ -- ------------
上面代码中，str.padStart(10, "*") 将 str 字符串的长度补全到 10，使用 * 字符进行填充，结果字符串为 "*****hello"。
需要注意的是，如果我们希望生成的填充字符长度不足用于填满字符串剩余长度时，方法会将填充字符进行截取，取填充字符前部分进行填充，例如：
--- --- - -------- ---------------------------- --------- -- ------------
在上述示例中，由于填充字符 oops 的长度不足以填充整个字符串，所以 String.padStart() 方法会将 oops 字符进行截取，只取其前面两个字符 oo 进行填充，最终结果为 "oopsophell"。
2. String.padEnd()
String.padEnd() 方法与 String.padStart() 方法类似，不同之处在于其补全的字符是从字符串的结尾开始，填充指定长度的字符。该方法同样接收两个参数，第一个参数是填充后的字符串总长度，第二个参数是用于填充的字符，填充字符同样可以为空，如果不传入，则自动默认使用空格字符进行填充。
下面是使用 String.padEnd() 方法的基本示例：
--- --- - -------- -------------------------- ------ -- ------------
在上述示例中，str.padEnd(10, "*") 将 str 字符串的长度补全到 10，使用 * 字符进行填充，结果字符串为 "hello*****"。
需要注意的是，类似 String.padStart() 的行为，如果我们提供的填充字符长度不足用于填满字符串时，方法会将填充字符进行截取，取填充字符前部分进行填充。
3. 示例代码
下面是使用 String.padStart() 和 String.padEnd() 方法的实际示例代码：
3.1. 示例 1
以下代码使用 String.padStart() 方法和 String.padEnd() 方法生成空心三角形的形状。
-------- -------------------- -
--- -------- - ---
--- ---- - - -- - -- ----- ---- -
--- --- - ------------ - - - ---
--- ------- - - ------------- - ---
--- - ------- - --------------- - - - -- - -- - --------
-------- -- --- - -----
-
------ ---------
-
-------------------------------上述代码中，createTriangle() 函数接收一个参数 size，用于指定空心三角形的大小。函数使用了 String.repeat() 方法生成填充字符串，以及使用 String.padEnd() 方法将每行填充到指定长度，从而达到最终的效果。
3.2. 示例 2
以下代码使用 String.padStart() 方法和 String.padEnd() 方法格式化时间字符串。
-------- ---------------- - --- ----- - -------------------------------------- ----- --- ------- - ---------------------------------------- ----- --- ------- - ---------------------------------------- ----- ------ --------------------------------- - -------------------------- ---------
上述代码中，formatTime() 函数接收一个时间对象 time，并将其以 HH:mm:ss 的格式进行格式化。函数使用了 String.padStart() 方法将每个时间数值格式化为两位的字符串，以达到最终的效果。
4. 结论
经过本文的介绍，读者已经了解了如何使用 ECMAScript 2017 中的 String.padStart() 和 String.padEnd() 方法对字符串进行填充。这两个方法不仅可以让我们更方便地控制字符串填充的位置和填充字符，还可以让我们更自由地进行字符串格式化和输出。同时，我们也通过实际示例代码的演示，更加直观地了解了这两个方法的实际应用场景和使用技巧。希望读者可以在日常的前端开发中，充分利用这两个方法，提高开发效率和代码可读性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66f80c1fc5c563ced5ba38d7