ES8 中如何使用字符串的 padStart() 和 padEnd() 方法为字符串填充字符？
在前端开发中，我们常常需要对字符串进行填充，以满足特定的格式要求。ES8 中新增了 padStart() 和 padEnd() 方法，可以帮助我们快速地填充字符串。本文将详细讲解这两个方法的使用方法，并提供实际应用场景和示例代码，以指导读者正确地使用这两个方法。
一、padStart() 和 padEnd() 方法概述
padStart() 和 padEnd() 方法是 ECMA 规范中新增的字符串方法，它们可以让我们对字符串进行填充。这两个方法的语法如下：
str.padStart(targetLength [, padString]) str.padEnd(targetLength [, padString])
其中，str 表示原始字符串，targetLength 表示填充后字符串的目标长度，padString 表示用于填充的字符串。
padStart() 方法将对原字符串的头部进行填充，padEnd() 方法将对原字符串的尾部进行填充。
如果不提供 padString 参数，则默认使用空格进行填充。
二、实际应用示例
下面是一些实际应用示例，来说明 padStart() 和 padEnd() 方法的使用方法和应用场景。
- 数据库数据补齐
在前端开发中，我们经常需要将从后端获取的数据进行格式化展示。比如，从数据库中获取的电话号码字段只包含数字，我们需要将其格式化为带有分隔符的电话号码，如 "(XXX) XXX-XXXX"。
使用 padStart() 和 padEnd() 方法，我们可以很方便地对电话号码进行填充。示例代码如下：
const phoneNumber = "1234567890";
const formattedPhoneNumber = `(${phoneNumber.padStart(3, "0")}) ${phoneNumber.substring(3, 6)}-${phoneNumber.substring(6, 10)}`;
console.log(formattedPhoneNumber); // Output: (123) 456-7890在上面的代码中，我们首先使用 padStart() 方法对电话号码的区号进行填充，保证其长度为 3。然后使用 substring() 方法获取电话号码中的区号、前三位和后四位，并组合为格式化后的字符串。
- 对齐输出字符串
我们有时需要让输出的字符串左对齐或右对齐。使用 padStart() 和 padEnd() 方法，我们可以很方便地控制字符串的对齐方式。
下面是一个输出字符串左对齐的示例代码：
const str = "Hello World"; console.log(str.padEnd(20, " ")); // Output: "Hello World "
在上面的代码中，我们使用 padEnd() 方法将 str 填充到长度为 20，填充的字符使用空格。因为 str 的长度为 11，所以填充后的字符串为 "Hello World "。
如果我们希望输出字符串右对齐，只需要改为使用 padStart() 方法即可。
三、结论
本文通过对 padStart() 和 padEnd() 方法的概述和实际应用示例展示了这两个方法的用途和使用方法，并且提供了一些常见的应用场景。使用 padStart() 和 padEnd() 方法可以帮助我们更方便地操作字符串，提高前端开发效率。建议读者在工作中积极尝试这两个方法，并结合实际需求灵活使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6709ca5ed91dce0dc87bb7f2