新版本 javascript6/ECMAScript2015 在去年出來(lái)了，我們現(xiàn)在普遍使用的javascript 5是在2009年出來(lái)的，相隔這么多年，變化比較大，添加了一些很好用的特性。

下面就看幾個(gè)簡(jiǎn)單而實(shí)用的小特性：

需要在字符串中加入變量時(shí)，通常做法就是使用字符串拼接，如

var param = 'b';var str = 'a ' + param + ' c';

ES6中簡(jiǎn)單了，可以直接在字符串中添加變量

var str = `a ${param} c`;

注意，使用的是反引號(hào) “，而不是 ”

例如想定義一個(gè)html代碼片段，放在一行很難看，想用多行，還得用字符串拼接

var html ='<div>' +'<span>test</span>' +'</div>';

一堆加號(hào)和引號(hào)，很麻煩

ES6中的反引號(hào)就能簡(jiǎn)單的解決

var html =`<div><span>test</span></div>`;

非常清晰，里面還可以直接加變量，很方便

想給參數(shù)設(shè)置默認(rèn)值時(shí)，需要我們手工處理，例如

function (width, height) {var height = height || 300;var width = width || 600;...}

ES6可以直接指定默認(rèn)值

function (width=600, height=300) {...}　4、解構(gòu)賦值

例如有一個(gè)json對(duì)象

var data = {name:'dys', age:1};

想取得name,age屬性的話(huà)，需要分別獲取

var name = data.name;var age = data.age;

ES6可以自動(dòng)獲取并賦值

var {name, age} = data;

這幾個(gè)示例只是比較簡(jiǎn)單的語(yǔ)法方面的便利特性，ES6還有一些比較深入的改進(jìn)，例如

箭頭函數(shù)、Promises、Classes ……

如何使用ES6

ES6是個(gè)新東西，兼容性還是個(gè)大問(wèn)題，直接使用肯定是不可行了

還好，已經(jīng)有了ES6的代碼轉(zhuǎn)換器，可以把ES6的代碼轉(zhuǎn)為ES5的代碼（例如 babel），可以讓我們使用ES6，又不擔(dān)心兼容問(wèn)題

我還沒(méi)實(shí)際應(yīng)用，不知道實(shí)際兼容效果是否有那么好

babel的官網(wǎng) https://babeljs.io/

babel 示例

babel有g(shù)ulp插件，下面是個(gè)簡(jiǎn)單的ES6代碼轉(zhuǎn)換示例

（1）安裝環(huán)境

需要你的機(jī)器上已經(jīng)裝了nodejs、gulp

然后安裝babel客戶(hù)端

$ npm install -g babel-cli

在項(xiàng)目目錄下安裝相關(guān)插件

$ npm install gulp$ npm install --save-dev gulp-babel$ npm install --save-dev babel-preset-es2015

（2）測(cè)試腳本

用ES6方式寫(xiě)一個(gè)測(cè)試 a.js

var str = `hi ${name}`;

編寫(xiě) gulpfile.js

var gulp = require("gulp");var babel = require("gulp-babel");gulp.task("default", function () {return gulp.src("a.js").pipe(babel({presets: ['es2015']})).pipe(gulp.dest("dist"));});

這個(gè)腳本的意思是使用babel把a(bǔ).js編譯并輸出到dist目錄下

（3）執(zhí)行編譯

在項(xiàng)目目錄中執(zhí)行

$ gulp

執(zhí)行結(jié)束后，到dist目錄下查看編譯后的a.js