ES8 是 ECMAScript 的第八个版本，其中新增了一些非常实用的特性，包括对 Array 原型的 padStart 和 padEnd 方法。这两个方法的作用可以简单地理解为“补全字符串”，它们可以在字符串的前面和后面添加指定数量的字符，让字符串达到指定长度。这些新增的方法提供了一个更简单、更直观的方式来格式化字符串，同时也提高了代码的可读性和可维护性。
padStart 和 padEnd 的具体用法
padStart 和 padEnd 方法的语法差不多，它们的参数也基本相同。下面是 padStart 的语法：
str.padStart(targetLength [, padString])
targetLength 是必须指定的参数，它表示字符串需要达到的长度。padString 是一个可选参数，表示用来填充字符串的字符，如果不指定，会用空格来填充。
padEnd 的语法与 padStart 相同，只是它是在字符串的结尾处添加填充字符。
padStart 和 padEnd 的应用
接下来，我们来看一些具体的应用场景。
1. 格式化日期和时间
很多时候，我们需要将日期和时间格式化成指定的字符串格式。例如，下面的代码将日期格式化成“YYYY/MM/DD”的格式：
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const formatted = `${year}/${month.toString().padStart(2, '0')}/${day.toString().padStart(2, '0')}`;
console.log(formatted); // 输出：2021/05/31这里用到了 padStart 方法，确保月份和日期的值始终是两位数，例如“09”而不是“9”。
2. 对齐文本
在某些场景里，我们需要对齐文本，以达到更美观的效果。例如，下面的代码输出三个单词，并将它们左对齐：
-- -------------------- ---- ------- ----- ----- - --------- --------- ---------- ----- --------- - -------------------------- -- -------------- --- ------ ---- -- ------ - ---------------------------------- - ---- - -- --- -- ----- -- ------ -- ------
这里用到了 Math.max 方法和 map 方法，来找到最长的单词长度。然后，使用 for 循环输出每个单词，并用空格字符填充，直到它们的长度达到最大值。
3. 生成序列号
在某些场景里，我们需要生成一系列的序列号，例如在打印机打印编号时。下面的代码使用 padStart 方法来生成一系列的编号：
-- -------------------- ---- ------- ----- ---- - --------- --------- ---------- ----- ------ - ------------------------------ --- ---- - - -- - - ------------ ---- - ----- --- - ----------------------------- ----- --------------------- ------------- - -- --- -- ----- ----- -- ----- ------ -- ----- ------
这里使用了 toString 方法将数字转换成字符串，并使用 padStart 方法将数字前面填充零，使得编号的长度固定。然后，使用模板字符串来输出每个编号和对应的元素。
总结
padStart 和 padEnd 方法为我们提供了一种更加简单、直观、可读的方式来格式化字符串。与传统的字符串拼接、substring、slice 等方法相比，padStart 和 padEnd 方法更为灵活，更加高效。在我们的日常开发中，这些方法一定会经常被用到，因此熟练掌握它们的使用方法，可以有效地提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646d633f968c7c53b0c13460