首頁 > 文章 > web前端 > ES6模板字串實例分享

ES6模板字串實例分享

小云云原創: 2018-01-26 16:44:121766瀏覽

ES6 中引進的一種新型的字串字面量語法 - 模板字串。書面上來解釋，模板字串是一種能在字串文字中內嵌表示式的字串字面量。簡單來講，就是增加了變數功能的字串。

ES6為我們提供了模板字串，語法使用反引號`。範本字串有以下三個優點：在

多行文字
#字串中插入變數
字串中插入表達式

基本語法

模板字串和ES5的字串的宣告一樣。

// ES5
var name = 'xixi';
console.log(name);// xixi

// ES6
let name4ES6 = `一步`;
console.log(name4ES6);// 一步

多行文字

在Jquery 盛行的年代，我們常會拼接 html 片段再進行節點替換。寫一段 ES5的程式碼大家體會一下：

var str = '<html>'
+ '<p>啦拉拉</p>'
+ '<p>xixixi</p>'
+ '</html>';
console.log(str);// <html><p>啦拉拉</p><p>xixixi</p></html>

ES6支援多行文本，上面的程式碼實現起來就容易多了。

let str4ES6 = `<html>
 <p>啦拉拉</p>
 <p>xixixix</p>
</html>`;

console.log(str4ES6);

可以插入變數或表達式

// ES5
var name = 'xixi';
var age = 27;
var info = 'my name is ' + name + ' , age is ' + age + '.';
console.log(info);// my name is xixi , age is 27.

ES6的模板字串實現起來就容易好多。關鍵語法${}，其中可以插入任何的 js 表達式。

let name = 'xixi';
let age = 27;

let info = `my name is ${name}, my age is ${age}. just a test ${1 + 10}!`;
console.log(info);// my name is xixi, my age is 27. just a test 11!

總結

ES6模板字串就是這麼的簡單這麼的好用。

ES6模板字串實例分享

相關文章