ES6學(xué)習(xí)教程之模板字符串詳解
更新時間：2017年10月09日 10:33:28 作者：一歩
大家都知道在ES6中引進(jìn)的一種新型的字符串字面量語法-模板字符串，下面這篇文章主要給大家介紹了關(guān)于ES6學(xué)習(xí)教程之模板字符串的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
模板字符串(template strings)
ES6 中引進(jìn)的一種新型的字符串字面量語法 - 模板字符串。書面上來解釋，模板字符串是一種能在字符串文本中內(nèi)嵌表示式的字符串字面量。簡單來講，就是增加了變量功能的字符串。
ES6為我們提供了模板字符串，語法使用反引號`。模板字符串具有以下三個優(yōu)點(diǎn)：
- 多行文本
- 字符串中插入變量
- 字符串中插入表達(dá)式
基本語法
模板字符串和 ES5的字符串的聲明一樣。
// ES5 var name = 'xixi'; console.log(name);// xixi // ES6 let name4ES6 = `一步`; console.log(name4ES6);// 一步
多行文本
在Jquery 盛行的年代，我們經(jīng)常會拼接 html 片段再進(jìn)行節(jié)點(diǎn)替換。寫一段 ES5的代碼大家體會一下：
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í)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
在使用了母板頁面的項目中 使用js獲取其中的標(biāo)簽id 需要先加載到本地看看他在瀏覽時候的頁面源代碼然后確定他的id2010-04-04
javascript面向?qū)ο笾L問對象屬性的兩種方式分析
這篇文章主要介紹了javascript面向?qū)ο笾L問對象屬性的兩種方式分析,實(shí)例分析了直接訪問對象屬性的方式與數(shù)組訪問方式,需要的朋友可以參考下2015-01-01
Javascript原生的String處理函數(shù)顯得很不夠豐富2010-04-04
JavaScript使用鏈?zhǔn)椒椒ǚ庋bjQuery中CSS()方法示例
這篇文章主要介紹了JavaScript使用鏈?zhǔn)椒椒ǚ庋bjQuery中CSS()方法,結(jié)合具體實(shí)例形式分析了JS采用鏈?zhǔn)讲僮鞣椒ǚ庾Query中連綴操作實(shí)現(xiàn)css()方法的相關(guān)技巧,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了javascript拖拽效果延伸的學(xué)習(xí)，關(guān)于拖拽延伸出來的一些效果，感興趣的朋友可以參考一下2016-04-04
大家有沒有想過，一段javascript腳本從載入瀏覽器到顯示執(zhí)行都經(jīng)過了哪些流程，其執(zhí)行次序又是如何。本篇博文將引出'javascript執(zhí)行模型'的概念，并帶領(lǐng)大家理解javascript在執(zhí)行時的處理機(jī)制。2010-10-10
Cropper.js進(jìn)階實(shí)現(xiàn)圖片旋轉(zhuǎn)裁剪處理功能示例
這篇文章主要為大家介紹了Cropper.js進(jìn)階實(shí)現(xiàn)圖片旋轉(zhuǎn)裁剪功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
JavaScript正則表達(dá)式exec/g實(shí)現(xiàn)多次循環(huán)用法示例
這篇文章主要介紹了JavaScript正則表達(dá)式exec/g實(shí)現(xiàn)多次循環(huán)用法,結(jié)合實(shí)例形式分析了javascript正則表達(dá)式g修飾符相關(guān)使用技巧,需要的朋友可以參考下2017-01-01
Javascript基礎(chǔ)教程之比較null和undefined值
這篇文章主要介紹了Javascript基礎(chǔ)教程之比較null和undefined值的相關(guān)知識，非常不錯，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
這篇文章主要給大家介紹了關(guān)于微信小程序位置授權(quán)處理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用小程序具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06