随着前端技术的发展，ES6（ECMAScript 2015）成为了前端开发的标志性语言之一，然而它并不是所有浏览器都完全支持的，特别是在 IE 浏览器下，会出现各种兼容性问题。本文将分享如何解决 ES6 在 IE 浏览器下的兼容性问题。
什么是 ES6
ES6 是 ECMAScript 2015 的简称，它是 JavaScript 的第六个版本。ES6 引入了很多新特性，如箭头函数、模板字符串、解构赋值、 Promise 等，让程序员可以更加方便地编写代码。
ES6 在 IE 浏览器下的兼容性问题
尽管 ES6 功能经过浏览器制造商的支持，但是在 IE 浏览器下仍然会出现很多兼容性问题。
例如，在 IE 浏览器下使用箭头函数会出现以下错误：
SCRIPT1028: 预期标识符、字符串或数字。
在 IE 浏览器下使用 Promise 会出现以下错误：
对象不支持“Promise”属性或方法
这些错误都是因为 IE 浏览器不支持 ES6 的新特性所导致的。
解决 ES6 在 IE 浏览器下的兼容性问题
使用 Babel 转码器
Babel 转码器可以把 ES6 的代码转换成 ES5 的代码，从而让 IE 浏览器也可以支持 ES6 的新特性。
安装 Babel：
npm install --save-dev babel-cli babel-preset-es2015
配置 .babelrc 文件：
{
"presets": ["es2015"]
}使用 Babel 转码：
babel script.js --out-file script-compiled.js
逐个添加 polyfill
Polyfill 是一些 JavaScript 代码片段，用于模拟新特性，让旧版本浏览器也能支持新特性。例如，Object.assign() 是 ES6 的新特性，在旧版本浏览器中不支持，可以使用 Object.assign() 的 Polyfill 实现。
以下是一些常用的 Polyfill 库：
- core-js
- babel-polyfill
- es6-shim
使用 Polyfill.io
Polyfill.io 是一个自定义 Polyfill 的工具，它可以根据浏览器的 User Agent 和代码中使用的新特性动态生成 Polyfill 文件。
在页面中引入 Polyfill.io：
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
在代码中使用新特性：
const str = 'hello world'.includes('world');Polyfill.io 会根据浏览器的 User Agent 和代码中使用的新特性动态生成对应的 Polyfill 文件，并在页面中引入它们。这种方法可以根据浏览器的不同加载不同的 Polyfill 文件，提高页面加载速度，同时也没有必要手动添加或管理 Polyfill。
总结
本文介绍了如何解决 ES6 在 IE 浏览器下的兼容性问题：
- 使用 Babel 转码器把 ES6 的代码转换成 ES5 的代码。
- 逐个添加 Polyfill。
- 使用 Polyfill.io 动态生成 Polyfill 文件。
通过以上方法，我们可以在 IE 浏览器中使用 ES6 的新特性，让代码更加简洁和方便，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b1ebdaadd4f0e0ffb1cd31