在前端开发中，我们经常会遇到需要对齐文本的情况。在过去，我们可能需要手动使用空格或其他符号进行填充，这样做既繁琐又容易出错。但是，ES8 中引入的字符串填充方法 padStart 和 padEnd 可以轻松地解决这个问题。
padStart 和 padEnd 的用法
padStart 和 padEnd 是字符串的两个方法，它们分别用于在字符串的开头和结尾填充指定的字符，以达到对齐的效果。
这两个方法的语法相同，都需要传入两个参数：
- fillString：填充的字符，可以是任意字符，包括空格、数字、字母等。
- targetLength：填充后字符串的长度，如果原字符串长度等于或大于 targetLength，则不进行填充。
下面是 padStart 和 padEnd 的示例代码：
const str = 'hello'; const paddedStr1 = str.padStart(10, '-'); const paddedStr2 = str.padEnd(10, '-'); console.log(paddedStr1); // '-----hello' console.log(paddedStr2); // 'hello-----'
在这个示例中，我们首先定义了一个字符串 str，然后使用 padStart 和 padEnd 方法将其填充为指定长度的字符串。在这个例子中，我们使用了“-”作为填充字符，填充后的字符串长度为 10。
padStart 和 padEnd 的应用场景
padStart 和 padEnd 的应用场景非常广泛，下面我们将介绍一些常见的用法。
对齐数字
当我们需要对齐数字时，padStart 和 padEnd 可以非常方便地实现这个功能。下面是一个示例代码：
-- -------------------- ---- ------- ----- ---- - ---- ----- ---- - ----- ----- ---- - ------ ----- ---------- - --------------------------- ----- ----- ---------- - --------------------------- ----- ----- ---------- - --------------------------- ----- ------------------------ -- -------- ------------------------ -- -------- ------------------------ -- --------
在这个示例中，我们首先定义了三个数字 num1、num2 和 num3，然后使用 toString 方法将它们转换为字符串。接着，我们使用 padStart 方法将它们填充为长度为 6 的字符串，并使用“0”作为填充字符。通过这种方式，我们可以轻松地将数字对齐。
对齐表格
在前端开发中，我们经常需要使用表格来展示数据。当表格中的内容长度不一致时，我们需要手动进行处理才能实现对齐。使用 padStart 和 padEnd 方法可以大大简化这个过程，下面是一个示例代码：
-- -------------------- ---- ------- ----- ----- - - --------- ------- ---- -------- ----------- ------- ----- -------- ---------- --- ---- ------- -- ----- ----------- - ------------- -- - ----------------- - --- ----------------- - --- ------------------ - --- --- ---------------------------
在这个示例中，我们定义了一个包含三行数据的表格。然后，我们使用 map 方法遍历每一行数据，并使用 padStart 和 padEnd 方法将其填充为指定长度的字符串。最后，我们使用 console.table 方法将填充后的表格打印出来。
总结
padStart 和 padEnd 是 ES8 中引入的字符串填充方法，可以轻松地实现对齐的功能。它们的语法简单易懂，应用场景广泛。在实际开发中，我们可以根据具体情况灵活使用这两个方法，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6565b416d2f5e1655deed547