在前端开发中，字符串是一个必不可少的数据类型。在 ES8 中，新增了字符串填充方法 padStart() 和 padEnd()，可以很方便地填充字符串，避免繁琐的字符串拼接操作。本篇文章将详细介绍 padStart() 和 padEnd() 方法的使用以及指导意义。
padStart()
padStart() 方法可以在字符串的前面填充指定的字符，使字符串达到指定的长度。padStart() 方法的语法如下：
str.padStart(targetLength [, padString])
其中，
- targetLength：必需。字符串目标长度，如果当前字符串长度小于目标长度，会在字符串的前面填充指定的字符。
- padString：可选。填充字符，默认为“ ”（空格）。
下面是一个示例代码：
const str = 'abc'; console.log(str.padStart(6, '0')); // '00abc' console.log(str.padStart(6)); // ' abc' console.log(str.padStart(2, '0')); // 'abc'
在第一个例子中，由于目标长度为 6，而当前字符串长度为 3，所以会在字符串前面填充两个 0，从而得到结果“00abc”。
在第二个例子中，由于不传入 padString 参数，所以默认填充空格，因此得到的结果是“ abc”。
在第三个例子中，由于目标长度为 2，而当前字符串长度为 3，所以不做任何填充，输出结果为“abc”。
padEnd()
padEnd() 方法可以在字符串的后面填充指定的字符，使字符串达到指定的长度。padEnd() 方法的语法如下：
str.padEnd(targetLength [, padString])
其中，
- targetLength：必需。字符串目标长度，如果当前字符串长度小于目标长度，会在字符串的后面填充指定的字符。
- padString：可选。填充字符，默认为“ ”（空格）。
下面是一个示例代码：
const str = 'xyz'; console.log(str.padEnd(6, '0')); // 'xyz000' console.log(str.padEnd(6)); // 'xyz ' console.log(str.padEnd(2, '0')); // 'xyz'
在第一个例子中，由于目标长度为 6，而当前字符串长度为 3，所以会在字符串后面填充三个 0，从而得到结果“xyz000”。
在第二个例子中，由于不传入 padString 参数，所以默认填充空格，因此得到的结果是“xyz ”。
在第三个例子中，由于目标长度为 2，而当前字符串长度为 3，不做任何填充，输出结果为“xyz”。
指导意义
padStart() 和 padEnd() 方法可以帮助我们更方便地操作字符串，避免繁琐的字符串拼接操作。在实际开发中，我们可以用这两个方法来格式化字符串输出，使输出的结果更加整洁、易懂。
在使用过程中，需要注意以下几点：
- 如果不传入 padString 参数，则默认填充空格。
- 如果目标长度小于或等于当前字符串长度，则不做任何填充，直接返回原字符串。
- 如果 padString 参数的长度过长，则会在输出结果中被截断。
总结
本文详细介绍了 ES8 中新增的字符串填充方法 padStart() 和 padEnd() 的使用方法及其指导意义。在实际开发中，我们可以用这两个方法来方便地操作字符串，使输出的结果更加整洁、易懂。需要注意的是，在使用过程中需注意传入参数的类型和范围，以避免出现意外情况。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a793daadd4f0e0ff0b7e71