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