JavaScript6裡出現了哪些新語法、新特徵?

techug發表於2016-04-05

  新版本 javascript6/ECMAScript2015 在去年出來了,我們現在普遍使用的javascript 5是在2009年出來的,相隔這麼多年,變化比較大,新增了一些很好用的特性。

  下面就看幾個簡單而實用的小特性:

 1、模板文字

  需要在字串中加入變數時,通常做法就是使用字串拼接,如

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

  ES6中簡單了,可以直接在字串中新增變數

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

  注意,使用的是反引號 “,而不是 ”

 2、多行字串

  例如想定義一個html程式碼片段,放在一行很難看,想用多行,還得用字串拼接

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

  一堆加號和引號,很麻煩

  ES6中的反引號就能簡單的解決

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

  非常清晰,裡面還可以直接加變數,很方便

 3、引數預設值

  想給引數設定預設值時,需要我們手工處理,例如

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

  ES6可以直接指定預設值

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

 4、解構賦值

  例如有一個json物件

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

  想取得name,age屬性的話,需要分別獲取

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

  ES6可以自動獲取並賦值

var {name, age} = data;

  這幾個示例只是比較簡單的語法方面的便利特性,ES6還有一些比較深入的改進,例如

箭頭函式、Promises、Classes ……

  如何使用ES6

  ES6是個新東西,相容性還是個大問題,直接使用肯定是不可行了

  還好,已經有了ES6的程式碼轉換器,可以把ES6的程式碼轉為ES5的程式碼(例如 babel),可以讓我們使用ES6,又不擔心相容問題

  我還沒實際應用,不知道實際相容效果是否有那麼好

  babel的官網 https://babeljs.io/

  babel 示例

  babel有gulp外掛,下面是個簡單的ES6程式碼轉換示例

  (1)安裝環境

  需要你的機器上已經裝了nodejs、gulp

  然後安裝babel客戶端

$ npm install -g babel-cli

  在專案目錄下安裝相關外掛

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

  (2)測試指令碼

  用ES6方式寫一個測試 a.js

var str = `hi ${name}`;

  編寫 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"));
});

  這個指令碼的意思是使用babel把a.js編譯並輸出到dist目錄下

  (3)執行編譯

  在專案目錄中執行

$ gulp

  執行結束後,到dist目錄下檢視編譯後的a.js

相關文章