ES6學(xué)習(xí)教程之模板字符串詳解
模板字符串(template strings)
ES6 中引進(jìn)的一種新型的字符串字面量語(yǔ)法 - 模板字符串。書(shū)面上來(lái)解釋?zhuān)０遄址且环N能在字符串文本中內(nèi)嵌表示式的字符串字面量。簡(jiǎn)單來(lái)講，就是增加了變量功能的字符串。
ES6為我們提供了模板字符串，語(yǔ)法使用反引號(hào)`。模板字符串具有以下三個(gè)優(yōu)點(diǎn)：
- 多行文本
- 字符串中插入變量
- 字符串中插入表達(dá)式
基本語(yǔ)法
模板字符串和 ES5的字符串的聲明一樣。
// ES5 var name = 'xixi'; console.log(name);// xixi // ES6 let name4ES6 = `一步`; console.log(name4ES6);// 一步
多行文本
在Jquery 盛行的年代，我們經(jīng)常會(huì)拼接 html 片段再進(jìn)行節(jié)點(diǎn)替換。寫(xiě)一段 ES5的代碼大家體會(huì)一下：
var str = '<html>' + '<div>啦拉拉</div>' + '<div>xixixi</div>' + '</html>'; console.log(str);// <html><div>啦拉拉</div><div>xixixi</div></html>
ES6支持多行文本，上面的代碼實(shí)現(xiàn)起來(lái)就容易多了。
let str4ES6 = `<html> <div>啦拉拉</div> <div>xixixix</div> </html>`; console.log(str4ES6);
可以插入變量或表達(dá)式
// 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的模板字符串實(shí)現(xiàn)起來(lái)就容易好多。關(guān)鍵語(yǔ)法${}，其中可以插入任何的 js 表達(dá)式。
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!
總結(jié)
ES6模板字符串就是這么的簡(jiǎn)單這么的好用。
好了，以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
如何將JavaScript將數(shù)組轉(zhuǎn)為樹(shù)形結(jié)構(gòu)
我們經(jīng)常會(huì)碰到樹(shù)形數(shù)據(jù)結(jié)構(gòu)，比方組織層級(jí)、省市縣或者者動(dòng)植物分類(lèi)等等數(shù)據(jù)，那么如何將JavaScript將數(shù)組轉(zhuǎn)為樹(shù)形結(jié)構(gòu)，本文就詳細(xì)的來(lái)了解一下2021-06-06
codeMirror是一款十分強(qiáng)大的代碼編輯插件，提供了十分豐富的API，最近在項(xiàng)目中用到了這款插件，于是在這里給大家分享下使用方法和心得。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
JS獲取數(shù)組最大值、最小值及長(zhǎng)度的方法
這篇文章主要介紹了JS獲取數(shù)組最大值、最小值及長(zhǎng)度的方法,涉及JavaScript遍歷數(shù)組及l(fā)ength屬性的相關(guān)使用技巧,非常簡(jiǎn)潔實(shí)用,需要的朋友可以參考下2015-11-11
這篇文章主要為大家詳細(xì)介紹了用JS實(shí)現(xiàn)貪吃蛇游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
JS?TypeScript的Map對(duì)象及聯(lián)合類(lèi)型實(shí)戰(zhàn)
這篇文章主要介紹了JS?TypeScript的Map對(duì)象及聯(lián)合類(lèi)型實(shí)戰(zhàn)，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
JavaScript中 this 指向問(wèn)題深度解析
這篇文章主要介紹了JavaScript中 this 指向問(wèn)題深度解析,JavaScript 中的 this 指向問(wèn)題有很多文章在解釋?zhuān)匀挥泻芏嗳藛?wèn)，本文給大家深度解析，需要的朋友可以參考下2017-02-02
本篇文章主要介紹了js綁定事件和解綁事件的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04
weex slider實(shí)現(xiàn)滑動(dòng)底部導(dǎo)航功能
這篇文章主要為大家詳細(xì)介紹了weex slider實(shí)現(xiàn)滑動(dòng)底部導(dǎo)航功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
基于HTML+JS實(shí)現(xiàn)網(wǎng)頁(yè)版蘋(píng)果計(jì)算器
這篇文章主要為大家詳細(xì)介紹了如何利用HTML+CSS+JS實(shí)現(xiàn)網(wǎng)頁(yè)版的蘋(píng)果計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
當(dāng)$.get返回失敗后調(diào)用fail方法示例詳解
這篇文章主要介紹了當(dāng)$.get返回失敗后，調(diào)用fail方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-12-12