ES6模板字串實例分享-js教程-PHP中文網

ES6模板字串實例分享

小云云

發布： 2018-01-26 16:44:12

原創

1718 人瀏覽過

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模板字串就是這麼的簡單這麼的好用。

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

ES6模板字串實例分享