安全高效实现 HTML 模板字符串变量替换（基于作用域对象的表达式求值）

本文介绍一种使用 new Function() 安全执行模板表达式、结合作用域对象动态替换 {{...}} 占位符的专业方案，支持链式属性访问、默认值语法（||）及 XSS 自动转义，兼顾性能与安全性。

本文介绍一种使用 `new function()` 安全执行模板表达式、结合作用域对象动态替换 `{{...}}` 占位符的专业方案，支持链式属性访问、默认值语法（`||`）及 xss 自动转义，兼顾性能与安全性。

在前端模板渲染场景中，常需将形如 {{uu.message}} 或 {{uu.link || "#null"}} 的占位符，依据传入的作用域对象（如 {uu, works}）实时求值并替换为对应内容。直接使用 eval 存在严重安全隐患（变量污染、作用域泄露、XSS 风险），而手动解析表达式又过于复杂。推荐采用 new Function() 构造函数 + 严格作用域隔离 + 自动 HTML 转义 的组合方案。

✅ 核心实现原理

• 作用域显式声明：将所有可用变量名拼接为参数列表（如 {uu, works}），确保 Function 执行时仅能访问传入的 scope 对象，杜绝外部变量干扰；
• 表达式安全求值：对每个 {{expr}} 中的 expr（如 "uu.message" 或 "uu.link || '#null'"），构造 new Function('{uu,works}', 'return ' + expr) 并立即调用，返回计算结果；
• 自动 XSS 防护：通过 textContent → innerHTML 方式实现 HTML 实体转义（如 <test> → ），防止恶意脚本注入；
• 轻量缓存优化：使用 cache[expr] ??= 对已编译的表达式函数进行记忆化，避免重复 Function 构造开销。

? 完整可运行代码

// 安全转义函数：将任意字符串转为 HTML 安全文本（不执行标签）const escape = (str) => {  if (str == null) return '';  const span = document.createElement('span');  span.textContent = str;  return span.innerHTML;};// 主替换函数const insertReplacements = (htmlStr, scope, cache = {}) =>   htmlStr.replace(/{{(.*?)}}/g, (_, expr) => {    try {      // 构造参数列表：{key1,key2,...}，确保作用域隔离      const args = '{' + Object.keys(scope).join(',') + '}';      // 编译并执行表达式，自动缓存编译后的函数      const fn = cache[expr] ??= new Function(args, 'return ' + expr);      const value = fn(scope);      return escape(value);    } catch (e) {      console.warn(`Template expression error in "{{${expr}}}":`, e);      return '';    }  });// 使用示例const works = "It_works";const uu = {  message: 'use this message here. <test>',  learnMore: 'learn more',  link: 'dai sit ein link',  target: '_self',  markup: '{{uu.message}} test: {{works}} <a data-cc="uu.link" target="{{ uu.target }}" class="info" href="{{uu.link || "#null"}}">{{uu.learnMore}}</a>'};const result = insertReplacements(uu.markup, { uu, works });console.log(result);// 输出：// use this message here. <test> test: It_works <a data-cc="uu.link" target="_self" class="info" href="dai sit ein link">learn more</a>

⚠️ 注意事项与最佳实践

• 作用域必须显式传入：调用时务必包裹为 {uu, works} 形式，不可只传 uu —— 否则 {{works}} 将无法解析；
• 字符串字面量无需引号：模板中写 {{works}}，而非 {{"works"}}；后者会被当作 JS 字符串字面量，返回 "works" 而非变量值；
• 默认值语法天然支持：{{uu.link || "#null"}} 可直接使用，因 new Function 执行的是标准 JavaScript 表达式；
• HTML 插入需额外标记：若某表达式本意是输出原始 HTML（如 {{uu.rawHtml}}），当前方案会自动转义。此时应扩展设计，例如约定 {{{uu.rawHtml}}}（三括号）绕过转义，或增加 raw: true 配置项；
• 生产环境建议增强：添加更细粒度的错误日志、支持异步表达式（async/await）、集成 DOMPurify 做二次 HTML 净化。

该方案在保持简洁性的同时，兼顾了安全性、可维护性与执行效率，适用于轻量级模板引擎、配置化 UI 渲染等场景。