ES6學習教程之模板字符串詳解
更新時間：2017年10月09日 10:33:28 作者：一歩
大家都知道在ES6中引進的一種新型的字符串字面量語法-模板字符串，下面這篇文章主要給大家介紹了關于ES6學習教程之模板字符串的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。
模板字符串(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 = '<html>' + '<div>啦拉拉</div>' + '<div>xixixi</div>' + '</html>'; console.log(str);// <html><div>啦拉拉</div><div>xixixi</div></html>
ES6支持多行文本，上面的代碼實現(xiàn)起來就容易多了。
let str4ES6 = `<html> <div>啦拉拉</div> <div>xixixix</div> </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的模板字符串實現(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模板字符串就是這么的簡單這么的好用。
好了，以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關文章
在使用了母板頁面的項目中 使用js獲取其中的標簽id 需要先加載到本地看看他在瀏覽時候的頁面源代碼然后確定他的id2010-04-04
這篇文章主要介紹了javascript面向對象之訪問對象屬性的兩種方式分析,實例分析了直接訪問對象屬性的方式與數(shù)組訪問方式,需要的朋友可以參考下2015-01-01
Javascript原生的String處理函數(shù)顯得很不夠豐富2010-04-04
JavaScript使用鏈式方法封裝jQuery中CSS()方法示例
這篇文章主要介紹了JavaScript使用鏈式方法封裝jQuery中CSS()方法,結合具體實例形式分析了JS采用鏈式操作方法封住jQuery中連綴操作實現(xiàn)css()方法的相關技巧,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了javascript拖拽效果延伸的學習，關于拖拽延伸出來的一些效果，感興趣的朋友可以參考一下2016-04-04
大家有沒有想過，一段javascript腳本從載入瀏覽器到顯示執(zhí)行都經(jīng)過了哪些流程，其執(zhí)行次序又是如何。本篇博文將引出'javascript執(zhí)行模型'的概念，并帶領大家理解javascript在執(zhí)行時的處理機制。2010-10-10
Cropper.js進階實現(xiàn)圖片旋轉裁剪處理功能示例
這篇文章主要為大家介紹了Cropper.js進階實現(xiàn)圖片旋轉裁剪功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
JavaScript正則表達式exec/g實現(xiàn)多次循環(huán)用法示例
這篇文章主要介紹了JavaScript正則表達式exec/g實現(xiàn)多次循環(huán)用法,結合實例形式分析了javascript正則表達式g修飾符相關使用技巧,需要的朋友可以參考下2017-01-01
Javascript基礎教程之比較null和undefined值
這篇文章主要介紹了Javascript基礎教程之比較null和undefined值的相關知識，非常不錯，具有參考借鑒價值，感興趣的朋友一起學習吧2016-05-05
這篇文章主要給大家介紹了關于微信小程序位置授權處理的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用小程序具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-06-06