模板字符串实例：模板编译

直接上代码，不懂看注释即可

        //定义模板
        let template = `
    <ul>
      <% for(let i=0; i < data.supplies.length; i++) { %>
        <li><%= data.supplies[i] %></li>
      <% } %>
    </ul>
    `;
    //模板编译函数
        function compile(template) {
          const evalExpr = /<%=(.+?)%>/g;
          const expr     = /<%([\s\S]+?)%>/g;
          //使用正则表达式将其转换为JavaScript表达式字符串
          template = template
            .replace(evalExpr, "`); \n  echo( $1 ); \n  echo(`")
            .replace(expr, "`); \n $1 \n  echo(`");

          template = "echo(`" + template + "`);";
          //将template封装在script函数中返回
          let script = `(function parse(data){
                  let output = "";
              
                  function echo(html){
                    output += html;
                  }
              
                  ${template}
              
                  return output;
                })`;

          return script;
        }

        let parse2        = eval(compile(template));
        let box           = document.getElementById("box");
            box.innerHTML = parse2({ supplies: ["AAA", "BBB", "CCC"] });
            console.log(parse2({ supplies: ["AAA", "BBB", "CCC"] }))
            /**
             * 
    <ul>
      
        <li>AAA</li>
      
        <li>BBB</li>
      
        <li>CCC</li>
      
    </ul>
            */