本文详细介绍如何使用JavaScript从零实现一个简易的EJS模板引擎。内容涵盖基础字符串替换、利用Function构造函数生成执行函数、with语句处理作用域，以及复杂ejs语句（如forEach循环）的解析逻辑。通过逐步拆解，帮助开发者深入理解模板引擎的核心原理与字符串处理技巧。
1. 起因
部门最近的一次分享中，有人提出来要实现一个ejs模板引擎，突然发现之前似乎从来都没有考虑过这个问题，一直都是直接拿过来用的。那就动手实现一下吧。本文主要介绍ejs的简单使用，并非全部实现，其中涉及到options配置的部分直接省略了。如有不对请指出，最后欢迎点赞 + 收藏。
2. 基本语法实现
首先定义render函数，该函数接收html字符串以及data参数。
const render = (ejs = '', data = {}) => {
}示例模板字符串如下：
<body>
<div><%= name %></div>
<div><%= age %></div>
</body>我们可以利用正则表达式将<%= name %>匹配出来，并仅保留name部分。此处借助ES6的模板字符串特性，将变量名用${}包裹起来。
在正则匹配的props数组中，第2个值即为匹配到的变量名。直接使用props[1]进行替换即可。
[
'<%= name %>',
' name ',
16,
'<body>\n <div><%= name %></div>\n <div><%= age %></div>\n</body>'
]const render = (ejs = '', data = {}) => {
const html = ejs.replace(/<%=(.*?)%>/g, (...props) => {
return '${' + props[1] + '}';
// return data[props[1].trim()];
});
}3. Function函数
经过上述处理得到的html是一个模板字符串。我们可以通过Function构造函数将字符串转化为可执行的函数。当然，这里也可以使用eval，具体选择取决于个人偏好。
<body>
<div>${ name }</div>
<div>${ age }</div>
</body>Function是一个构造函数，实例化后会返回一个真正的函数。构造函数的最后一个参数是函数体的字符串，而前面的参数均为形式参数。例如，这里传入形参name，函数体通过console.log打印一句话。
const func = new Function('name', 'console.log("我是通过Function构建的函数，我叫：" + name)');
// 执行函数，传入参数
func('yindong'); // 我是通过Function构建的函数，我叫：yindong利用Function的能力，可以执行html模板字符串并返回结果。函数字符串中编写return语句，返回一个拼装好的模板字符串。
const getHtml = (html, data) => {
const func = new Function('data', `return \`${html}\`;`);
return func(data);
// return eval(`((data) => { return \`${html}\`; })(data)`)
}
const render = (ejs = '', data = {}) => {
const html = ejs.replace(/<%=(.*?)%>/g, (...props) => {
return '${' + props[1] + '}';
});
return getHtml(html, data);
}4 with
在render函数中，props[1]实际上存储的是变量名称，例如name和age。虽然可以直接替换为data[props[1].trim()]，但这样编写会引发一些问题。为了简化处理，这里利用with代码块的特性来偷懒。
with语句用于扩展一个语句的作用域链。通俗来说，在with语句中使用的变量会先在with指定的对象中寻找，如果找不到，才会向上层作用域查找。
例如，这里定义一个age数字变量和一个data对象，data中包含一个name字符串。在with包裹的代码块中输出name时，会先在data中寻找；而age在data中不存在，则会向上层作用域查找。当然，这种特性也是不推荐使用with的原因之一，因为无法确定with语句中出现的变量是否一定存在于data中。
const age = 18;
const data = {
name: 'yindong'
}
with(data) {
console.log(name);
console.log(age);
}这里使用with改造一下getHtml函数。将函数体用with包裹起来，data作为传入的参数，这样with体内的所有变量都将从data中查找。
const getHtml = (html, data) => {
const func = new Function('data', `with(data) { return \`${html}\`; }`);
return func(data);
// return eval(`((data) => { with(data) { return \`${html}\`; } })(data)`)
}
const render = (ejs = '', data = {}) => {
// 优化一下代码，直接用$1替代props[1];
// const html = ejs.replace(/<%=(.*?)%>/g, (...props) => {
// return '${' + props[1] + '}';
// });
const html = ejs.replace(/<%=(.*?)%>/gi, '${$1}');
return getHtml(html, data);
}这样即可打印出真实的html内容。
<body>
<div>yindong</div>
<div>18</div>
</body>5. ejs语句
这里对ejs进行扩展，增加一个arr.join语句的支持。
<body>
<div><%= name %></div>
<div><%= age %></div>
<div><%= arr.join('--') %></div>
</body>const data = {
name: "yindong",
age: 18,
arr: [1, 2, 3, 4]
}
const html = fs.readFileSync('./html.ejs', 'utf-8');
const getHtml = (html, data) => {
const func = new Function('data', ` with(data) { return \`${html}\`; }`);
return func(data);
}
const render = (ejs = '', data = {}) => {
const html = html = ejs.replace(/<%=(.*?)%>/gi, '${$1}');
return getHtml(html, data);
}
const result = render(html, data);
console.log(result);可以发现ejs模板也可以正常编译，因为模板字符串支持arr.join语法，输出结果如下。
<body>
<div>yindong</div>
<div>18</div>
<div>1--2--3--4</div>
</body>如果ejs中包含forEach语句，情况就会变得复杂。此时render函数将无法直接解析此类逻辑。
<body>
<div><%= name %></div>
<div><%= age %></div>
<% arr.forEach((item) => {%>
<div><%= item %></div>
<%})%>
</body>这里分两步来处理。仔细观察可以发现，使用变量值的方式存在=号，而语句则没有=号。可以对ejs字符串进行第一步处理，将<%=变量替换成对应的变量，即保持原本的render函数代码逻辑不变。
const render = (ejs = '', data = {}) => {
const html = ejs.replace(/<%=(.*?)%>/gi, '${$1}');
console.log(html);
}<body>
<div>${ name }</div>
<div>${ age }</div>
<% arr.forEach((item) => {%>
<div>${ item }</div>
<%})%>
</body>第二步处理相对复杂，可以将上面的字符串处理成多个字符串拼接的形式。简单举例，将a加上arr.forEach的结果再加上c，转换为：str存储a，再拼接arr.forEach每项结果，再拼接c。这样即可获得正确的字符串。
// 原始字符串
retrun `
a
<% arr.forEach((item) => {%>
item
<%})%>
c
`
// 拼接后的
let str;
str = `a`;
arr.forEach((item) => {
str += item;
});
str += c;
return str;在第一步处理的结果上，使用/<%(.*?)%>/g正则匹配出<%%>中间的内容，即执行第二步逻辑。
const render = (ejs = '', data = {}) => {
// 第一步
let html = ejs.replace(/<%=(.*?)%>/gi, '${$1}');
// 第二步
html = html.replace(/<%(.*?)%>/g, (...props) => {
return '`\r\n' + props[1] + '\r\n str += `';
});
console.log(html);
}替换后得到的字符串大致如下所示。
<body>
<div>${ name }</div>
<div>${ age }</div>
`
arr.forEach((item) => {
str += `
<div>${ item }</div>
`
})
str += `
</body>添加换行符后更容易阅读。可以发现，第一部分是缺少首部反引号的字符串，第二部分是用str存储了forEach循环内容的完整js代码，且可执行。第三部分是缺少尾部反引号的字符串。
<body>
<div>${ name }</div>
<div>${ age }</div>
`
// 第二部分
arr.forEach((item) => {
str += `
<div>${ item }</div>
`
})
// 第三部分
str += `
</body>对字符串进行补齐处理：在第一部分添加let str = `，使其成为完整的字符串；第二部分无需处理，它会在第一部分基础上拼接上第二部分的执行结果；第三部分需要在结尾处拼接`; return str;，即补齐模板字符串尾部，并通过return返回str完整字符串。
// 第一部分
let str = `<body>
<div>${ name }</div>
<div>${ age }</div>
`
// 第二部分
arr.forEach((item) => {
str += `
<div>${ item }</div>
`
})
// 第三部分
str += `
</body>
`;
return str;这部分逻辑可以在getHtml函数中添加。首先在with中定义str用于存储第一部分的字符串，尾部通过return返回str字符串。
const getHtml = (html, data) => {
const func = new Function('data', ` with(data) { let str = \`${html}\`; return str; }`);
return func(data);
}这样即可实现执行ejs语句的功能。
const data = {
name: "yindong",
age: 18,
arr: [1, 2, 3, 4],
html: '<div>html</div>',
escape: '<div>escape</div>'
}
const html = fs.readFileSync('./html.ejs', 'utf-8');
const getHtml = (html, data) => {
const func = new Function('data', ` with(data) { var str = \`${html}\`; return str; }`);
return func(data);
}
const render = (ejs = '', data = {}) => {
// 替换所有变量
let html = ejs.replace(/<%=(.*?)%>/gi, '${$1}');
// 拼接字符串
html = html.replace(/<%(.*?)%>/g, (...props) => {
return '`\r\n' + props[1] + '\r\n str += `';
});
return getHtml(html, data);
}
const result = render(html, data);
console.log(result);输出结果如下：
<body> <div>yindong</div> <div>18</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
6. 标签转义
<%=会对传入的html进行转义，这里编写一个escapeHTML转义函数。
const escapeHTML = (str) => {
if (typeof str === 'string') {
return str.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/ /g, " ").replace(/"/g, """).replace(/'/g, "'");
} else {
return str;
}
}在变量替换时使用escapeHTML函数处理变量。这里通过\s*去掉空格。为了避免命名冲突，将escapeHTML改造成自执行函数，函数参数为$1变量名。
const render = (ejs = '', data = {}) => {
// 替换转移变量
// let html = ejs.replace(/<%=\s*(.*?)\s*%>/gi, '${escapeHTML($1)}');
let html = ejs.replace(/<%=\s*(.*?)\s*%>/gi, `\${
((str) => {
if (typeof str === 'string') {
return str.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/ /g, " ").replace(/"/g, """).replace(/'/g, "'");
} else {
return str;
}
})($1)
}`);
// 拼接字符串
html = html.replace(/<%(.*?)%>/g, (...props) => {
return '`\r\n' + props[1] + '\r\n str += `';
});
return getHtml(html, data);
}getHtml函数保持不变。
const getHtml = (html, data) => {
const func = new Function('data', `with(data) { var str = \`${html}\`; return str; }`);
return func(data);
}<%-会保留原本格式输出，只需再加一条不使用escapeHTML函数处理的逻辑即可。
const render = (ejs = '', data = {}) => {
// 替换转义变量
let html = ejs.replace(/<%=\s*(.*?)\s*%>/gi, '${escapeHTML($1)}');
// 替换其余变量
html = html.replace(/<%-(.*?)%>/gi, '${$1}');
// 拼接字符串
html = html.replace(/<%(.*?)%>/g, (...props) => {
return '`\r\n' + props[1] + '\r\n str += `';
});
return getHtml(html, data, escapeHTML);
}输出样式如下：
<body> <div>yindong</div> <div>18</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div><div>escapeHTML</div></div> </body>
至此，一个简单的ejs模板解释器就编写完成了。
到此这篇关于基于JavaScript写一款EJS模板引擎的文章就介绍到这了，更多相关写一款EJS模板引擎内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！