在前端开发中，经常需要对字符串进行对齐操作，例如将字符串左对齐或右对齐等，这时候就需要使用字符串填充函数。在 ECMAScript 2017 中，新增了 PadStart 和 PadEnd 函数，可以方便地对字符串进行填充操作，从而实现对齐的效果。
PadStart 和 PadEnd 函数的用法
PadStart 和 PadEnd 函数都是字符串对象的方法，它们的用法非常简单，只需要传入两个参数即可：
------------------------- -- ----------- ----------------------- -- -----------
其中，targetLength 表示目标长度，即要填充到的字符串长度；padString 表示用来填充的字符串，如果不传入该参数，则默认使用空格进行填充。
PadStart 和 PadEnd 函数的示例
下面是一个使用 PadStart 函数实现左对齐的示例代码：
----- --- - -------- ----- ------------ - --- ----- --------- - ---- ----- ------ - -------------------------- ----------- -------------------- -- ------------
上面的代码中，我们将字符串 'hello' 左对齐，填充到长度为 10 的字符串中，用字符 '-' 进行填充。最终输出的结果为 '----hello'。
下面是一个使用 PadEnd 函数实现右对齐的示例代码：
----- --- - -------- ----- ------------ - --- ----- --------- - ---- ----- ------ - ------------------------ ----------- -------------------- -- -------------
上面的代码中，我们将字符串 'world' 右对齐，填充到长度为 10 的字符串中，用字符 '-' 进行填充。最终输出的结果为 'world-----'。
使用 PadStart 和 PadEnd 函数进行数字对齐
除了字符串对齐外，PadStart 和 PadEnd 函数还可以用于数字对齐。例如，我们可以将数字左对齐或右对齐，以便更好地呈现数据。
下面是一个使用 PadStart 函数实现数字左对齐的示例代码：
----- --- - ---- ----- ------------ - -- ----- --------- - ---- ----- ------ - ------------------------------------- ----------- -------------------- -- --------
上面的代码中，我们将数字 123 左对齐，填充到长度为 5 的字符串中，用字符 '0' 进行填充。最终输出的结果为 '00123'。
下面是一个使用 PadEnd 函数实现数字右对齐的示例代码：
----- --- - ---- ----- ------------ - -- ----- --------- - ---- ----- ------ - ----------------------------------- ----------- -------------------- -- --------
上面的代码中，我们将数字 123 右对齐，填充到长度为 5 的字符串中，用字符 '-' 进行填充。最终输出的结果为 '123--'。
总结
PadStart 和 PadEnd 函数是 ECMAScript 2017 中新增的字符串填充函数，可以方便地对字符串进行对齐操作。除了字符串外，它们还可以用于数字对齐。在实际开发中，我们可以根据需求灵活运用这些函数，以便更好地呈现数据。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660619efd10417a22240c44a