在前端开发中，我们经常需要对字符串进行格式化处理。ES8 中新增加的 String.padStart() 方法可以很方便地实现字符串填充，但是在实际开发中，我们可能会遇到兼容性问题。本文将介绍如何解决这个问题，并提供一些示例代码供参考。
String.padStart() 方法简介
String.padStart() 方法可以在字符串的前面填充指定的字符，以达到指定的长度。该方法接受两个参数，第一个参数是指定字符串的长度，第二个参数是填充的字符串。例如：
const str = '123'; const paddedStr = str.padStart(5, '0'); console.log(paddedStr); // '00123'
在上面的代码中，padStart() 方法将字符串 '123' 前面填充了两个 '0'，使其长度达到了 5。
兼容性问题
尽管 String.padStart() 方法在 ES8 中得到了支持，但是在一些旧版本的浏览器中可能会出现兼容性问题。例如，在 IE 中，该方法并不被支持。当我们在这些浏览器中使用该方法时，会出现以下错误：
Object doesn't support property or method 'padStart'
为了解决这个问题，我们可以使用一些 polyfill 库，例如 es6-shim 或者 babel-polyfill。这些库可以在不支持该方法的浏览器中模拟实现该方法，从而使我们的代码可以正常运行。
解决兼容性问题的示例代码
下面是使用 es6-shim 库解决 String.padStart() 兼容性问题的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------ ---------------
------- -----------------------------------------------------------------------
-------
------
--------
----- --- - ------
----- --------- - --------------- -----
----------------------- -- -------
---------
-------
-------在上面的代码中，我们在页面中引入了 es6-shim 库，并且在代码中使用了 padStart() 方法。es6-shim 库会自动检测当前浏览器是否支持该方法，如果不支持，则会模拟实现该方法。
除了 es6-shim 库，我们还可以使用 babel-polyfill 库来解决该问题。下面是使用 babel-polyfill 库解决 String.padStart() 兼容性问题的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------ ---------------
------- -------------------------------------------------------------------------------------------
-------
------
--------
----- --- - ------
----- --------- - --------------- -----
----------------------- -- -------
---------
-------
-------在上面的代码中，我们在页面中引入了 babel-polyfill 库，并且在代码中使用了 padStart() 方法。babel-polyfill 库会自动检测当前浏览器是否支持该方法，如果不支持，则会模拟实现该方法。
总结
在本文中，我们介绍了 ES8 中新增加的 String.padStart() 方法，并解决了在一些旧版本的浏览器中使用该方法时出现的兼容性问题。我们使用了 es6-shim 和 babel-polyfill 两个库来模拟实现该方法，使我们的代码可以在不同的浏览器中正常运行。希望本文对大家有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65165a1c95b1f8cacdeaeca8