這篇文章主要為大家展示了“ES6中模板字符串的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“ES6中模板字符串的示例分析”這篇文章吧。

丘北網(wǎng)站建設公司創(chuàng)新互聯(lián)公司,丘北網(wǎng)站設計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為丘北上千提供企業(yè)網(wǎng)站建設服務。企業(yè)網(wǎng)站搭建\外貿營銷網(wǎng)站建設要多少錢，請找那個售后服務好的丘北做網(wǎng)站的公司定做！

模板字符串(template strings)

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

ES6為我們提供了模板字符串，語法使用反引號`。模板字符串具有以下三個優(yōu)點：

• 多行文本

• 字符串中插入變量

• 字符串中插入表達式

基本語法

模板字符串和 ES5的字符串的聲明一樣。

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

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

多行文本

在Jquery 盛行的年代，我們經(jīng)常會拼接 html 片段再進行節(jié)點替換。寫一段 ES5的代碼大家體會一下：

var str = ''
+ '
啦拉拉
'
+ '
xixixi
'
+ '';
console.log(str);// 
啦拉拉
xixixi

ES6支持多行文本，上面的代碼實現(xiàn)起來就容易多了。

let str4ES6 = `
 
啦拉拉
 
xixixix
`;

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的模板字符串實現(xiàn)起來就容易好多。關鍵語法${}，其中可以插入任何的 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中模板字符串的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！