javascript - 在《ECMAScript 6 入门》一书中模版编译的实例中，出现了echo语句，这个实例是怎样运行的，直接写在js里报错

Question

在阮一峰的《ECMAScript 6 入门》中的第四章字符串讲解中：11实例：模版编译出现的echo语句怎样写的，直接写在js里面会报错，是不是要引入其他的东西，还是这本来就不是写在同一个文件里的？
例子是这样的：

下面，我们来看一个通过模板字符串，生成正式模板的实例。

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

上面代码在模板字符串之中，放置了一个常规模板。该模板使用 <%...%> 放置JavaScript代码，使用 <%= ... %> 输出JavaScript表达式。

怎么编译这个模板字符串呢？

一种思路是将其转换为JavaScript表达式字符串。

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

这个转换使用正则表达式就行了 。。。

Answer 1

耐心往下看完不就知道了：

转换函数

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));
console.log(parse({ supplies: [ "broom", "mop", "cleaner" ] }));
//   <ul>
//     <li>broom</li>
//     <li>mop</li>
//     <li>cleaner</li>
//   </ul>