本文介绍一种使用 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 实体转义（如
→ ），防止恶意脚本注入； - 轻量缓存优化：使用 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="%7B%7Buu.link%20%7C%7C%20">{{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%20sit%20ein%20link">learn more</a></test></test>
⚠️ 注意事项与最佳实践
- 作用域必须显式传入：调用时务必包裹为 {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 渲染等场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
