重学ES6 模板字符串

在两三年前，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