直接上代码，不懂看注释即可
//定义模板
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>
*/
