答案：本文介绍如何实现一个轻量级自定义模板引擎，支持变量替换和简单表达式。首先使用正则匹配 {{ }} 中的占位符，结合数据对象进行替换；通过增强取值逻辑可支持嵌套属性如 {{user.name}}；进一步利用 new Function 解析三元表达式等简单逻辑；最后强调安全性问题及生产环境建议使用成熟库。
在前端开发中，字符串模板解析是一个常见需求。JavaScript 原生提供了模板字符串（Template Literals），但有时我们需要更灵活的自定义模板引擎，比如处理动态数据、支持条件逻辑或循环渲染等。本文将带你实现一个轻量级的自定义模板引擎，支持变量替换和简单表达式。
基本原理：模板语法与变量替换
自定义模板引擎的核心是将带有占位符的字符串与数据对象结合，生成最终文本。我们通常使用双大括号 {{ }} 作为变量标记，例如：
my name is {{name}}, I'm {{age}} years old.当传入数据 { name: "Tom", age: 25 } 时，应输出：
my name is Tom, I'm 25 years old.实现思路是利用正则匹配所有 {{ }} 中的内容，并用对应的数据替换。
简单模板引擎实现
下面是一个基础版本的模板解析函数：
function compile(template, data) {
return template.replace(/\{\{([^}]+)\}\}/g, (match, key) => {
// 去除空格并获取对应值
const trimmedKey = key.trim();
return data[trimmedKey] !== undefined ? data[trimmedKey] : '';
});
}使用示例：
```javascript const tpl = "Hello, {{name}}! You are {{age}} years old."; const result = compile(tpl, { name: "Alice", age: 30 }); console.log(result); // 输出: Hello, Alice! You are 30 years old. ```这个版本支持基本变量替换。如果想支持嵌套属性（如 {{user.name}}），可以增强取值逻辑：
function getValue(obj, path) {
return path.split('.').reduce((o, k) => o && o[k] !== undefined ? o[k] : '', obj);
}
function compile(template, data) {
return template.replace(/\{\{([^}]+)\}\}/g, (match, key) => {
const trimmedKey = key.trim();
return getValue(data, trimmedKey);
});
}现在可以处理嵌套数据：
```javascript const tpl = "User: {{user.name}}, Email: {{user.email}}"; const result = compile(tpl, { user: { name: "Bob", email: "bob@example.com" } }); ```扩展功能：支持简单表达式
进一步扩展，我们可以支持简单的三元表达式或运算：
```javascript function compile(template, data) { return template.replace(/\{\{([^}]+)\}\}/g, (match, expr) => { const trimmedExpr = expr.trim();// 支持三元表达式，如 {{ age > 18 ? 'adult' : 'minor' }}
try {
// 构造访问作用域的函数
const fn = new Function(...Object.keys(data), `return ${trimmedExpr};`);
return fn(...Object.values(data));
} catch (e) {
return '';
}}); }
<p>使用示例：</p>
```javascript
const tpl = "You are {{ age >= 18 ? 'an adult' : 'a minor' }}.";
const result = compile(tpl, { age: 20 }); // 输出: You are an adult.注意： 使用 new Function 存在安全风险，仅建议在可信环境或可控模板中使用。
总结与使用建议
自定义模板引擎的关键在于：
- 定义清晰的模板语法（如 {{ }}）
- 通过正则提取表达式
- 安全地求值并替换内容
对于生产环境，推荐使用成熟库如 Handlebars、Mustache；若需轻量方案，可基于上述逻辑封装，避免复杂逻辑内置于模板中。基本上就这些，不复杂但容易忽略细节。
