在Web中使用ES 2015
想要在浏览器端使用ES 2015最新语法，其实很简单，只需要一个转换器即可，Babel是ES 2015最流行的转换器之一，Babel加上各种插件和polyfill能基本上支持绝大部分新语法。
在你的构建中，插入一步使用Babel将ES 2015的代码转换成完全兼容ES5的代码的任务，你甚至都不必了解Babel的具体用法，就可以爽爽的开始写ES 2015代码了。
使用gulp-babel在需要的地方转换一下即可。
|
1 2 3 4 5 6 7 8 |
var gulp = require('gulp'); var babel = require('gulp-babel'); gulp.task('babel', function () { return gulp.src('src/js/*.js') .pipe(babel()) .pipe(gulp.dest('dist')); }); |
笔者在实际生产中已使用到一些ES 2015新特性，通过Babel转换成完全兼容ES5的语法，然后发布到正式环境，大大提高了开发体验。下面将一部分使用的较多，能改善编码体验的点列出来，当然也有一些坑，希望读者能尽早熟悉尽早投入ES 2015的怀抱。
最基本的：let和const
|
1 2 |
let a = 1; const A = 2; |
转换成
|
1 2 |
var a = 1; var A = 2; |
Babel只是单纯将let和const转换成了var，并没有真正实现块作用域和常量的功能，也没有消除变量提升的问题，这样避免了引入一些额外的代码，而且也已经完全与ES5兼容了。
模板字符串
|
1 2 |
const name = 'Jarvis'; const template = `My name is ${name}`; |
转换成
|
1 2 |
var name = 'Jarvis'; var template = 'My name is ' + name; |
模板字符串（两个反丿号）是ES 2015的一个重要的新功能，允许模板字符串里面通过${variable}的方式直接嵌变量，可以替代老旧的字符串拼接方法，而且里面可以任意使用单双引号。
这个改进很实用，现在就可以用起来了，再也不用担心单双引号谁该写在谁的外面了。
模板字符串还直接支持多行文本，如：
|
1 2 3 |
const tmpl = `text line 1, text line 2, textline 3`; |
在拼接html的时候特别有用。
箭头函数
箭头函数语法：
|
1 2 3 |
const fn = () => { console.log('hello world'); }; |
转换成
|
1 2 3 |
var fn = function() { console.log('hello world'); }; |
箭头函数通常比匿名函数还要简洁，几乎可以取代所有使用function的地方，不过用起来别太嗨了，下面有这个坑还是值得注意。
箭头函数最大的特点在于this关键字在声明或者定义箭头函数的时候就已经被绑定好了，而且不会改变，这个特性用来解决setTimeout等一些异步函数this会改变的问题很爽，但下面这个却是个大问题：
|
1 2 3 |
$('#selector'n-num" data-line="crayon-5812e51eedc72921293986-3">3 |
$('#selector'5的代码转换成完全兼容ES5的代码的任务，你甚至都不必了解Babel的具体用法，就可以爽爽的开始写ES 2015代码了。
使用gulp-babel在需要的地方转换一下即可。
笔者在实际生产中已使用到一些ES 2015新特性，通过Babel转换成完全兼容ES5的语法，然后发布到正式环境，大大提高了开发体验。下面将一部分使用的较多，能改善编码体验的点列出来，当然也有一些坑，希望读者能尽早熟悉尽早投入ES 2015的怀抱。 最基本的：let和const
转换成
Babel只是单纯将let和const转换成了var，并没有真正实现块作用域和常量的功能，也没有消除变量提升的问题，这样避免了引入一些额外的代码，而且也已经完全与ES5兼容了。 模板字符串
转换成
模板字符串（两个反丿号）是ES 2015的一个重要的新功能，允许模板字符串里面通过${variable}的方式直接嵌变量，可以替代老旧的字符串拼接方法，而且里面可以任意使用单双引号。 这个改进很实用，现在就可以用起来了，再也不用担心单双引号谁该写在谁的外面了。 模板字符串还直接支持多行文本，如：
在拼接html的时候特别有用。 箭头函数箭头函数语法：
转换成
箭头函数通常比匿名函数还要简洁，几乎可以取代所有使用function的地方，不过用起来别太嗨了，下面有这个坑还是值得注意。 箭头函数最大的特点在于this关键字在声明或者定义箭头函数的时候就已经被绑定好了，而且不会改变，这个特性用来解决setTimeout等一些异步函数this会改变的问题很爽，但下面这个却是个大问题：
|
