如何高效实现基于作用域对象的HTML模板字符串变量替换？

本文共计1006个文字，预计阅读时间需要5分钟。

原文介绍了一种使用 `new Function()` 安全执行模板表达式的方法，以下是对其内容的简要

本文介绍了一种利用 `new Function()` 创建安全执行模板表达式的方法。这种方法可以避免潜在的安全风险，同时结合 `` 标签实现样式设置。

在前端模板渲染场景中，常需将形如 {{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 渲染等场景。