用 replace() 可实现基础模板渲染，如 {{key}} 替换为 data[key]，需正则 /\{\{(\w+)\}\}/g 和函数回调；复杂表达式需 new Function 编译，但有安全与性能风险；生产环境推荐 lodash.template 或 mustache.js。
用 String.prototype.replace() 做基础模板渲染最直接
浏览器原生不提供类似 Vue 的 {{name}} 语法支持，但用 replace() 配合正则就能快速实现单次变量替换。它适合简单场景，比如拼接邮件正文、生成静态 HTML 片段。
常见错误是没加 g 标志导致只替换第一个匹配项；或者正则里没转义 .、$ 等特殊字符，结果匹配失败或报错 Invalid regular expression。
- 模板字符串中用
{{key}}格式，正则写成/\{\{(\w+)\}\}/g - 必须用
g标志，否则多次出现同一 key 只替换第一次 -
replace()的第二个参数推荐用函数，方便做空值 fallback：str.replace(/\{\{(\w+)\}\}/g, (match, key) => data[key] ?? '') - 如果
data是嵌套对象（如{user: {name: 'Alice'}}），正则无法解析{{user.name}}，得换方案
需要支持点号路径和表达式？用 Function 构造器动态执行更灵活
当模板里要写 {{user.name.toUpperCase()}} 或 {{items.length > 0 ? '有数据' : '空'}}，就得把模板编译成可执行函数。这不是黑魔法，而是 JavaScript 语言特性允许的：用 Function 把字符串变成函数。
性能上，每次渲染都 new Function 有开销，所以实际项目应缓存编译后的函数；安全上，绝不能把用户输入直接喂给 Function，否则等于执行任意代码。
立即学习“Java免费学习笔记（深入）”；
- 模板字符串先替换成合法 JS 表达式，例如把
{{user.name}}换成user.name - 构造函数时传入
data对象作为参数名，避免污染全局：const fn = new Function('data', `return \`${template}\`;`); - 调用时传入真实数据：
fn({user: {name: 'Bob'}}) - 若模板含未定义字段（如
data.user.profile.avatar），运行时会报Cannot read property 'profile' of undefined，需提前做空值检查或用可选链（但Function构造器不支持 ES2020+ 语法）
想避免 eval 和 Function？试试 with + new Function 的折中写法
有人觉得 Function 太重，又不想引入整个模板引擎库，可以用 with 语句简化变量访问——但它在严格模式下被禁用，且现代 Linter（如 ESLint）默认报错，实际项目中要谨慎启用。
它的核心逻辑是：把 data 对象注入作用域，让 {{name}} 直接变成可执行的 name，而不是 data.name。
- 模板转换后变成：
with(data){ return `${name} 你好`; } - 构造函数：
const fn = new Function('data', `with(data){ return \`${template}\`; }`); - 兼容性差：Chrome 严格模式下抛
SyntaxError: Strict mode code may not include a with statement - 调试困难：错误堆栈指向“匿名函数”，定位不到原始模板行号
生产环境别手写，用 lodash.template 或 mustache.js 更稳
手写模板引擎容易漏边界 case：HTML 转义、循环嵌套、条件块、自定义过滤器……这些轮子已被反复验证过。比如 lodash.template 默认不做自动转义，而 mustache.js 用 {{&name}} 控制是否转义，{{#list}}{{.}}{{/list}} 支持数组遍历。
真正容易被忽略的是上下文隔离问题：模板函数若引用了外部变量（比如闭包里的 apiUrl），升级依赖或重构时可能意外破坏渲染逻辑。
-
lodash.template返回函数，支持imports注入辅助方法：const tmpl = _.template('Hello <%= name %>'); tmpl({name: 'John'}); -
mustache.render是纯函数，无副作用，适合 SSR 场景 - 所有第三方模板库默认不执行 JS 表达式（如
{{1+1}}不会计算），这是安全设计，不是 bug
