17370845950

用 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，否则等于执行任意代码。

• 模板字符串先替换成合法 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 构造器不支持 ES2025+ 语法）

想避免 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