在前端开发中，字符串的填充是一项非常基础的操作。在过去的版本中，我们通常使用循环或者递归来实现字符串填充，但是这种方法非常繁琐且容易出错。ES8中新增了字符串填充方法 padStart 和 padEnd，可以大大简化我们的代码。
padStart 和 padEnd 的用法
padStart 和 padEnd 方法都接收两个参数：填充后字符串的长度和填充用的字符串。其中，填充后字符串的长度必须大于或等于原字符串的长度，否则填充方法将不会执行任何操作。
const str = 'hello'; console.log(str.padStart(10, '0')); // '00000hello' console.log(str.padEnd(10, '0')); // 'hello00000'
在上面的例子中，我们将字符串 'hello' 填充到长度为10，并用字符 '0' 进行填充。通过调用 padStart 方法，我们在字符串 'hello' 的左侧填充了5个 '0'，最终结果为 '00000hello'；而调用 padEnd 方法，则在字符串 'hello' 的右侧填充了5个 '0'，最终结果为 'hello00000'。
padStart 和 padEnd 的应用场景
padStart 和 padEnd 方法的应用场景非常广泛，尤其是在字符串格式化和对齐输出方面非常有用。
字符串格式化
在字符串格式化中，我们通常需要将一些数据按照一定的格式进行输出，例如将数字输出为货币格式，将日期输出为特定的格式等。通过 padStart 和 padEnd 方法，我们可以轻松地实现字符串的格式化，而不需要使用繁琐的循环和递归。
const currency = 10000;
console.log(currency.toLocaleString('en-US').padStart(15, '$')); // $10,000.00在上面的例子中，我们将数字 10000 格式化为货币格式，并用字符 '$' 进行填充。通过调用 padStart 方法，我们在左侧填充了5个 '$'，最终结果为 '$10,000.00'。
对齐输出
在对齐输出中，我们通常需要将一系列字符串对齐输出，以便于查看和比较。通过 padStart 和 padEnd 方法，我们可以轻松地实现字符串的对齐输出，而不需要使用繁琐的计算和对齐算法。
-- -------------------- ---- ------- ----- ---- - - - ----- -------- ---- --- ------ -- -- - ----- ------ ---- --- ------ -- -- - ----- ---------- ---- --- ------ -- -- -- ----------------------------- - ---------------- - -------------------- --------------- ----- ---- ----- -- -- - --------------------------- - ------------------------- - ----------------------------- ---
在上面的例子中，我们将一系列数据按照一定的格式进行对齐输出。通过调用 padEnd 方法，我们在每个字符串的右侧填充了一定的空格，以便于对齐输出。最终结果如下所示：
Name Age Score Alice 20 90 Bob 21 80 Charlie 22 70
总结
使用 ES8 的字符串填充方法 padStart 和 padEnd 可以大大简化我们的代码，尤其是在字符串格式化和对齐输出方面非常有用。通过掌握 padStart 和 padEnd 的用法，我们可以更加轻松地实现字符串的填充和格式化，提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65cb0e26add4f0e0ff4d4a29