答案：通过正则匹配和路径解析实现模板替换。使用/{([^}]+)}/g捕获占位符，支持user.name式嵌套取值，利用reduce安全访问对象属性，未定义值返回空字符串，最终完成数据渲染。
实现一个简单的JavaScript模板引擎并不需要复杂的库或框架。核心思路是将带有占位符的字符串与数据结合，动态生成最终的HTML或文本内容。下面介绍一种轻量、易懂的实现方式，适合学习和小型项目使用。
基本原理
模板引擎的本质是字符串替换：识别模板中的变量标记（如{name}），然后用对应的数据替换它们。
例如：
模板："Hello, {name}!"
立即学习“Java免费学习笔记（深入）”；
数据：{ name: "Alice" }
输出："Hello, Alice!"
定义模板语法
我们选择用大括号{}包裹变量名，这是常见且清晰的方式。支持嵌套对象访问，比如{user.name}。
关键步骤：
- 匹配所有{xxx}格式的片段
- 从数据对象中查找对应的值
- 替换并返回结果字符串
编写核心函数
下面是实现代码：
function render(template, data) {return template.replace(/\{([^}]+)\}/g, (match, key) => {
const value = key.split('.').reduce((obj, k) => obj?.[k], data);
return value !== undefined ? value : '';
});
}
说明：
- /\{([^}]+)\}/g 匹配所有{}中的内容
- key.split('.') 支持点号路径，如 user.name
- reduce 遍历路径，安全访问嵌套属性
- 若找不到值，返回空字符串避免显示undefined
实际使用示例
const tpl = "Hi {user.name}, you have {count} messages.";const data = {
user: { name: "Bob" },
count: 5
};
console.log(render(tpl, data));
// 输出: Hi Bob, you have 5 messages.
基本上就这些。虽然功能简单，但已具备模板引擎的核心能力。如果需要更多特性（如条件判断、循环），可以在此基础上扩展语法和解析逻辑。关键是理解“匹配-替换”的流程。
