如何高效实现基于作用域对象的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 构造开销。