在兩三年前，jQuery還是比較主流的開發技術，當我們要為頁面添加DOM時，一般，我們是這樣寫的

$("#container").append('Today is <b>' + week.type + '</b>' ) 復制代碼

但是，寫起來真的很難受，因為一直要寫引號，有時候還會寫丟了。ES6引入了模板字符串，解決這個問題

$("#container").append(`Today is <b> ${ week.type}` </b> ) 復制代碼

變量再也不用使用 + 拼接了，只需要 ${}就完事了，簡直爽到爆炸~

而且${}里面可以放入任何JavaScript表達式，進行運算，對象屬性引用，還能調用函數~

模板編譯應用

在這個SPA流行的時代，入坑較晚的，應該都沒有用過ejs

let template = ` <ul><% for(let i=0; i < data.supplies.length; i++) { %><li><%= data.supplies[i] %></li><% } %> </ul> ` 復制代碼

該模板使用<%...%>放置 JavaScript 代碼，使用<%= ... %>輸出 JavaScript 表達式。

網頁是不認識這樣的代碼的，所以，需要我們將這個模板字符串進行編譯

這里有一種思路，我們用js來輸出這里面的所有html

echo('<ul>') for(var i = 0; i < data.supplies.length; i++){echo('<li>')echo(data.supplies[i])echo('</li>') } echo('</ul>') 復制代碼

這樣，我們就用js將整個DOM輸出出來了~

那么，我們需要先將模板字符串轉化為js代碼

function compile(templete){let evalExpr = /<%=(.+?)%>/g //js表達式let expr = /<%([\s\S]+?)%>/g //js代碼templete = templete.replace( evalExpr, '`); \n echo( $1 ); \n echo(`')//); echo(data.supplies[i]); // echo(.replace( expr, '`); \n $1 \n echo(`')//); for(let i=0; i < data.supplies.length; i++) { // echo(templete = 'echo(`'+ templete + '`)'var script =`(function parse(data){var output = ""function echo(html){output += html}${ templete }return output})` } var parse = eval(compile(templete))div.innerHTML = parse({ supplies: ["broom", "mop", "cleaner"]})//結果 // <ul> // <li>broom</li> // <li>mop</li> // <li>cleaner</li> // </ul> 復制代碼

轉載于:https://juejin.im/post/5cae8bbcf265da03b36ed1a3

總結

以上是生活随笔為你收集整理的重学ES6 模板字符串的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。