本文介绍在 JavaScript 中不使用已废弃且不安全的 with 语句，而是通过解构赋值、函数封装或通用模板函数等方式，安全、清晰、可复用地将对象字段注入模板字符串。
本文介绍在 javascript 中不使用已废弃且不安全的 `with` 语句，而是通过解构赋值、函数封装或通用模板函数等方式，安全、清晰、可复用地将对象字段注入模板字符串。
在 Python 中，"I'm %(name)s. I'm %(age)d years old" % data 这类基于字典的字符串格式化简洁直观。JavaScript 原生不支持类似语法，但借助 ES6+ 的模板字符串（template literals）与现代语言特性，完全可以实现更安全、更灵活的等效效果——关键在于避免 with（已被严格禁用在严格模式下，且存在作用域污染、性能与调试隐患）。
✅ 推荐方案一：参数解构 + 箭头函数（语义清晰、类型友好）
const data = { age: 18, name: "John" };
// 显式声明所需字段，提升可读性与可维护性
const formatProfile = ({ name, age }) => `I'm ${name}. I'm ${age} years old.`;
console.log(formatProfile(data)); // "I'm John. I'm 18 years old."此方式天然具备字段校验优势：若传入对象缺少 name 或 age，会得到 undefined，便于早期发现数据结构问题；配合 TypeScript 还可获得完整类型推导与 IDE 支持。
✅ 推荐方案二：通用模板函数（支持任意键名与动态模板）
若需复用同一逻辑处理多种模板和数据，可封装一个轻量级 format 工具函数：
const format = (template, data) => {
return template.replace(/\$\{([^}]+)\}/g, (match, key) => {
// 支持嵌套路径如 'user.profile.name'（可选增强）
return key.split('.').reduce((obj, k) => obj?.[k], data) ?? match;
});
};
// 使用示例
const data = { name: "John", age: 18 };
const template = "I'm ${name}. I'm ${age} years old.";
console.log(format(template, data)); // "I'm John. I'm 18 years old."⚠️ 注意：正则替换版适用于简单场景；生产环境如需支持复杂表达式（如 ${user.age > 18 ? 'adult' : 'minor'}），应选用成熟库（如 lodash.template 或 mustache.js），而非自行实现 JS 求值（eval/Function 极不安全）。
立即学习“Java免费学习笔记（深入）”；
❌ 不推荐方案：with 语句（已淘汰）
// ❌ 危险！严格模式下报错，且破坏作用域链、阻碍优化
with (data) { `I'm ${name}. I'm ${age} years old.` }ECMAScript 规范已明确禁止在严格模式中使用 with，主流打包工具（如 Webpack、Vite）默认启用严格模式，该写法将直接导致运行时错误或构建失败。
总结
- 优先使用解构函数：适合固定结构、高内聚的业务模板（如用户信息展示）；
- 按需封装格式化函数：适合多模板、低耦合场景，保持逻辑集中；
- 杜绝 with 和 eval：二者均违背现代 JavaScript 安全与可维护原则；
- 进阶建议：对大型项目，可引入 i18n 库（如 i18next）统一管理带变量的本地化模板，兼顾国际化与类型安全。
模板插值的本质是数据与视图的安全桥接——选择清晰、可控、可测试的方式，远比追求语法糖更重要。
