在这个前端快速发展的时代，如何更加高效、简便地操作字符串是很多开发者关注的一个问题。因此，ES7推出了两种新的字符串填充方法 — padStart和padEnd，它们可以快速便捷地进行字符串填充，解决了日常开发中需要填充字符串的不便之处。
padStart和padEnd的使用方法
这两个方法都接受两个参数：填充后字符串的总长度和一个可选的填充字符串值。如果不传第二个参数，将默认用空格作为填充字符。它们的用法如下：
--- --- - -------- --- --------- - ---------------- ----- ----------------------- -- ------------
--- --- - -------- --- --------- - -------------- ----- ----------------------- -- ------------
其中，padStart将字符串填充在字符的开始位置，而padEnd将字符串填充在字符的结束位置。
padStart和padEnd的深入分析
多次执行padStart/padEnd方法
padStart和padEnd都是不可变的，它们不会改变原始字符串的值，而是返回新的、已填充的字符串。多次使用这两个方法将得到不同的结果，具体表现如下：
--- ---- - -------- --- ---------- - ----------------- ----- --- ---------- - ----------------------- ----- ------------------------ -- ------------ ------------------------ -- ------------------
--- ---- - -------- --- ---------- - --------------- ----- --- ---------- - --------------------- ----- ------------------------ -- ------------ ------------------------ -- -------------------
小数点位数填充示例
在一些业务开发场景中，我们会需要对数字进行小数点数位的填充，通过padStart方法来实现较为简单。例如我们需要将数字填充到6位，其中小数位数为2，那么我们可以通过以下代码来实现：
--- --- - ------ --- --------- - -------------------------- ----- ----------------------- -- ---------
padStart和padEnd的兼容性问题
padStart和padEnd方法是ES7规范引入的，因此在一些低版本的浏览器或者环境中是无法使用的。对于这类情况，我们可以通过在项目中使用polyfill来解决。padStart和padEnd方法对应的polyfill代码如下：
-- ---------------------------- -
------------------------- - -------- ---------------------- ---------- -
------------ - ------------ -- -- ------- -- ------ -- ------- ---------- -- --
--------- - ------------- --------- --- ----------- - --------- - - ---
-- ------------ - ------------- -
------ -------------
- ---- -
------------ - ------------ - ------------
-- ------------- - ----------------- -
--------- -- ----------------------------- - ------------------ -------- -- -------- -- ------ -- --- ------ ---- ------
-
------ ------------------ ------------- - -------------
-
--
-
-- -------------------------- -
----------------------- - -------- -------------------- ---------- -
------------ - ------------ -- -- ------- -- ------ -- ------- ---------- -- --
--------- - ------------- --------- --- ----------- - --------- - - ---
-- ------------ - ------------- -
------ -------------
- ---- -
------------ - ------------ - ------------
-- ------------- - ----------------- -
--------- -- ----------------------------- - ------------------ -------- -- -------- -- ------ -- --- ------ ---- ------
-
------ ------------ - ------------------ --------------
-
--
-总结
padStart和padEnd方法为字符串的填充操作提供了很大的便利性，在日常开发中应用十分广泛。同时，需要注意的是这两个方法的兼容性问题，在适当的场景下使用polyfill可以解决问题。我希望本文对大家理解和应用这两种方法起到了一定的指导作用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6519791a95b1f8cacd1a1d0a