理解ES6的模板编译机制-优快云博客

本文链接：https://blog.youkuaiyun.com/JSCTO/article/details/70987839

本文介绍了如何使用ES6语法实现模板编译，通过基础字符串模板，利用ES5的循环拼接字符串和正则匹配进行转换。文章详细阐述了将模板字符串转换为JavaScript表达式的过程，并且利用ES6的模板字面量属性${template}，允许在模板中执行函数和引用变量。最后，作者封装了一个名为compile的模板编译函数，用于输出编译后的结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ES6语法实现模板编译

基础字符串模板

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

思路：怎么编译这个模板字符串呢？根本原理可以用ES5语法的循环拼接字符串，这里设置这个循环拼接函数为echo()
将其转换为JavaScript表达式字符串

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

用正则来匹配将基础字符串模板替换为想要的字符串模板

var evalExpr = /<%=(.+?)%>/g;
var expr = /<%([\s\S]+?)%>/g;

template = template
  .replace(evalExpr, '`); \n  echo( $1 ); \n  echo(`')
  .replace(expr, '`); \n $1 \n  echo(`');

template = 'echo(`' + template + '`);';

然后，将template封装在一个函数里面返回，就可以了。

var script =
`(function parse(data){
  var output = "";

  function echo(html){
    output += html;
  }

  ${ template }

  return output;
})`;

return script;

注意：这里用到了ES6语法的字符串模板属性${ template }，在模板中可以运行函数和使用变量
最后，将上面的内容拼装成一个模板编译函数compile。

var template = `
<ul>
  <% for(var i=0; i < data.supplies.length; i++) { %>
    <li><%= data.supplies[i] %></li>
  <% } %>
</ul>
`;
function compile(template){
  var evalExpr = /<%=(.+?)%>/g;
  var expr = /<%([\s\S]+?)%>/g;

  template = template
    .replace(evalExpr, '`); \n  echo( $1 ); \n  echo(`')
    .replace(expr, '`); \n $1 \n  echo(`');

  template = 'echo(`' + template + '`);';

  var script =
  `(function parse(data){
    var output = "";

    function echo(html){
      output += html;
    }

    ${ template }

    return output;
  })`;

  return script;
}
var parse = eval(compile(template));
div.innerHTML = parse({ supplies: [ "broom", "mop", "cleaner" ] });

编译后输出

<ul>
    <li>broom</li>
    <li>mop</li>
    <li>cleaner</li>
</ul>