JavaScript模板引擎核心是安全灵活替换占位符并支持简单逻辑，可通过正则替换、Function构造函数（慎用）或Proxy+字符串解析实现，推荐使用lit-html等成熟方案避免XSS风险。
JavaScript实现模板引擎的核心是用数据填充模板字符串，关键在于安全、灵活地替换占位符，并支持简单逻辑（如条件、循环）。不需要引入大型库，几行代码就能写出轻量可用的模板函数。
基础字符串替换：正则 + replace
最简方式是用 {{key}} 语法，配合 replace() 和正则全局匹配：
- 模板字符串中写
{{name}} 欢迎你，今年 {{age}} 岁 - 用
template.replace(/{{(\w+)}}/g, (match, key) => data[key] ?? '')替换所有占位符 - 注意加
?? ''防止undefined转成字符串 "undefined"
支持简单表达式：用 Function 构造函数（慎用）
若需在模板里写 {{user.name.toUpperCase()}} 或 {{price > 100 ? '贵' : '便宜'}}，可把模板编译成函数：
- 把
{{...}}替换成${...}，再包裹进模板字面量中 - 拼出类似
return `<div>${user.name.toUpperCase()}</div>`的函数体 - 用
new Function('data', 'with(data){ return `...`; }')执行（注意：存在 XSS 风险，仅限可信数据）
安全又实用的推荐方案：使用 Proxy + 字符串解析
更健壮的做法是不执行任意代码，而是预定义支持的语法，比如：
立即学习“Java免费学习笔记（深入）”；
-
{{name}}→ 取值（支持点号路径，如{{user.profile.avatar}}） -
{{#if showTitle}}<h2>{{title}}</h2>{{/if}}→ 简单条件 -
{{#each items}}<li>{{text}}</li>{{/each}}→ 循环渲染 - 用正则分块匹配，递归处理嵌套逻辑，所有取值都通过安全的
get(obj, path)函数获取
实际开发建议
日常项目中不必从零造轮子：
- 小场景直接用原生模板字面量 +
map/join拼接（例如生成列表） - 中等复杂度推荐
lit-html或mustache.js，体积小、无依赖、易上手 - 避免用
eval或Function处理用户输入的模板，防止脚本注入 - 模板结果始终用
element.innerHTML = result前，确认内容已转义（或用textContent渲染纯文本）
