ES7 中的字符串填充方法为字符串提供了更方便的格式化输出的方式。本文将详细介绍 ES7 中的字符串填充方法以及如何使用它们来写出高效、简洁而易读的代码。
padStart 和 padEnd
ES7 中引入的字符串填充方法包括 padStart 和 padEnd 两个方法，它们的作用为在字符串的头部或尾部填充指定长度的字符串。这两个方法的使用方式基本相同，它们的区别在于填充的位置不同。
padStart
padStart 方法可以在字符串的头部填充指定长度的字符串，以达到指定长度的效果。这个方法接收两个参数，第一个参数是填充后的总长度，第二个参数是用来填充的字符串。
示例代码：
const str = 'hello'; console.log(str.padStart(10, 'abc')); // 'abcabchello' console.log(str.padStart(5, 'abc')); // 'hello' console.log(str.padStart(8)); // ' hello'
上面的例子中，我们分别使用了不同的填充字符串和总长度来进行测试，可以看到输出结果符合预期。当用于填充的字符串的长度大于等于总长度时，填充操作不会进行。
padEnd
padEnd 方法同样可以填充指定长度的字符串，不同的是它在原字符串的尾部进行填充。同 padStart 方法一样，这个方法也接收两个参数，分别是填充后的总长度和用来填充的字符串。
示例代码：
const str = 'hello'; console.log(str.padEnd(10, 'abc')); // 'helloabcabc' console.log(str.padEnd(5, 'abc')); // 'hello' console.log(str.padEnd(8)); // 'hello '
同样可以看到输出结果符合预期。
适用场景
字符串填充方法在一些需要对齐输出的场景中很有用。比如在写表格、日志打印等操作时，我们需要把不同的数据对齐输出，在这个时候字符串填充方法就非常有用了。
示例代码：
-- -------------------- ---- ------- ----- ---- - - - ----- -------- ----- ------- -- - ----- ------ ----- ----- -- - ----- ------ ----- ----- - -- --------------- ----- ---- -- -- - ---------------------------------------- ---展开代码
上面的代码中，我们给每一个字符串填充了长度为 8 的空格字符串，然后输出了表格。这样就可以让每一列的数据对齐输出，使得输出的表格更加美观易读。
总结
ES7 中的字符串填充方法为前端开发者提供了一个更加便捷的方式来格式化输出字符串。在适合的场景下，可以很好地提高代码的效率、可读性以及可维护性。建议开发者在实际项目中多加使用，以提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646d3ebd968c7c53b0bfc67c
