安全高效地实现 HTML 模板字符串变量替换（基于作用域对象的表达式求值）
本文介绍一种使用 new Function() 安全执行模板表达式、结合作用域对象动态替换 {{...}} 占位符的专业方案，支持链式属性访问、默认值语法（||）及 XSS 自动转义，兼顾性能与安全性。
在前端开发中，动态模板渲染是个高频需求。我们常常需要处理那些包含 `{{user.name}}` 或 `{{config.link || “#”}}` 这类占位符的字符串，并根据一个上下文对象来实时替换它们。直接上 `eval`？安全风险太高，无异于敞开大门。手动解析表达式？又太繁琐，容易出错。那么，有没有一种既安全又高效的方案呢？答案是肯定的：通过 **`new Function()` 进行严格的作用域隔离，再配合自动化的 HTML 转义**，就能在安全与性能之间找到优雅的平衡点。
核心实现原理
这套方案之所以可靠，关键在于它牢牢把握住了几个核心原则：
- 作用域显式声明：将所有可用的变量名（例如来自 `{uu, works}` 对象）拼接成函数的参数列表。这样一来，`new Function()` 创建的函数就只能访问我们明确传入的这些变量，彻底杜绝了外部作用域污染和数据泄露的风险。
- 表达式安全求值：对于每一个 `{{expr}}` 中的表达式（比如 `“uu.message”`），动态构造一个如 `new Function(‘{uu,works}’, ‘return ‘ + expr)` 的函数并立即执行。这相当于在独立的沙箱环境中完成求值，安全可控。
- 自动 XSS 防护：求值后的结果并不会直接输出，而是会经过一道关键的转义处理。利用 `textContent` 赋值再读取 `innerHTML` 的技巧，可以自动将 `<`、`>` 等字符转换为 HTML 实体，从而有效阻断潜在的脚本注入攻击。
- 轻量缓存优化：为了避免每次替换都重新编译函数带来的性能损耗，可以采用简单的缓存策略。对每个表达式 `expr`，只在其第一次出现时编译生成函数并缓存起来，后续直接调用，显著提升重复渲染的效率。
完整可运行代码
// 安全转义函数：将任意字符串转为 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. ’,
learnMore: ‘learn more’,
link: ‘dai sit ein link’,
target: ‘_self’,
markup: ‘{{uu.message}} test: {{works}} {{uu.learnMore}}’
};
const result = insertReplacements(uu.markup, { uu, works });
console.log(result);
// 输出：
// use this message here. test: It_works learn more
注意事项与最佳实践
方案虽好，但用起来还得注意一些细节，这样才能避免踩坑：
- 作用域必须显式传入：调用函数时，作用域对象务必以 `{uu, works}` 的形式整体传入。如果只传 `uu` 对象，那么模板中的 `{{works}}` 就无法被正确解析。
- 字符串字面量无需引号：在模板里写 `{{works}}` 就行，千万别画蛇添足写成 `{{“works”}}`。后者会被当作 Ja vaScript 字符串字面量处理，最终输出的就是引号内的静态文本 “works”。
- 默认值语法天然支持：像 `{{uu.link || “#null”}}` 这样的写法可以直接使用，因为 `new Function()` 执行的就是标准的 Ja vaScript 表达式，逻辑运算符 `||` 会如期工作。
- HTML 插入需额外标记：需要警惕的是，当前方案默认对所有输出进行 HTML 转义。如果某个表达式的本意就是要输出原始 HTML 代码（比如 `{{uu.rawHtml}}`），那么它会被转义成普通文本。常见的解决方案是扩展语法，例如约定用三个花括号 `{{{…}}}` 来标记“原始输出”，或者在函数中增加一个 `raw: true` 的配置选项来绕过转义。
- 生产环境建议增强：对于更严苛的生产环境，可以考虑在此基础上增加更细致的错误日志、支持异步表达式求值，甚至集成 `DOMPurify` 这样的库来做第二层 HTML 净化，让安全防线更加牢固。
总的来说，这套方案结构清晰，在实现上保持了足够的简洁性，同时没有在安全性、可维护性和执行效率上做妥协。它非常适用于构建轻量级的模板引擎、或是处理配置化的动态 UI 渲染场景。
