JavaScript模板字面量中动态表达式的正确使用姿势-js教程-PHP中文网

JavaScript模板字面量中动态表达式的正确使用姿势

心靈之曲

发布： 2025-12-04 15:13:01

原创

829人浏览过

JavaScript模板字面量中动态表达式的正确使用姿势

在javascript中，模板字面量中的表达式在定义时即被求值且仅求值一次，导致其内容无法随变量后续变化而自动更新。要实现动态更新，核心解决方案是将模板字面量封装在一个函数中，使其在每次调用时才重新计算表达式的值，从而确保输出始终反映最新的变量状态。

理解模板字面量的求值机制

JavaScript中的模板字面量（Template Literals），使用反引号 ` 定义，允许在其中嵌入表达式 ${expression}。许多开发者误以为这些嵌入的表达式会在每次引用包含它们的变量时重新求值。然而，事实并非如此。当模板字面量被赋值给一个变量时，其中所有的表达式都会在赋值的那一刻被立即求值，并且结果字符串会被固定下来。之后无论表达式内部引用的变量如何变化，该模板字面量变量的值都不会自动更新。

让我们通过一个示例来具体说明这个问题：

var money = 100;
var description = `您有 ${money} 元`; // 此时 money 为 100，description 被固定为 "您有 100 元"

function payday() {
    money += 50; // money 变为 150
    console.log("发工资后，money 变为:", money);
}

function runScenario() {
    console.log(description); // 仍然输出 "您有 100 元"
}

console.log("初始状态:");
runScenario(); // 输出: 您有 100 元

payday(); // 调用发工资函数
console.log("发工资后再次运行场景:");
runScenario(); // 仍然输出: 您有 100 元

登录后复制

从上面的输出可以看出，即使 money 变量的值在 payday 函数中发生了改变，description 变量所存储的字符串内容依然保持不变，因为它在定义时就已经完成了求值。

解决方案：使用函数封装模板字面量

要实现模板字面量的动态更新，我们不能直接将模板字面量赋值给一个变量，而是应该将其封装在一个函数中。这样，每次调用这个函数时，模板字面量都会被重新构建，其中的表达式也会被重新求值，从而确保获取到最新的数据。

立即学习“Java免费学习笔记（深入）”；

动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包

508

查看详情

推荐使用箭头函数（Arrow Function）来简洁地实现这一点：

let money = 100; // 使用 let 声明，允许后续修改

// 将模板字面量封装在一个函数中
const getDescription = () => `您有 ${money} 元`;

const payday = () => {
    money += 50;
    console.log("发工资后，money 变为:", money);
};

const runScenario = () => {
    console.log(getDescription()); // 每次调用时，都会执行 getDescription 函数，重新求值
};

console.log("初始状态:");
runScenario(); // 输出: 您有 100 元

payday(); // 调用发工资函数
console.log("发工资后再次运行场景:");
runScenario(); // 输出: 您有 150 元

payday(); // 再次发工资
console.log("再次发工资后运行场景:");
runScenario(); // 输出: 您有 200 元

登录后复制

通过将模板字面量您有 ${money} 元包装在 getDescription() 函数中，我们有效地将表达式的求值时机从变量定义时延迟到了函数调用时。每次 runScenario() 调用 getDescription() 时，money 的当前值都会被重新获取并插入到字符串中。

注意事项与最佳实践

选择正确的变量声明： 当变量的值需要改变时，应使用 let 关键字声明，而不是 const。如果 money 声明为 const，则无法在 payday 函数中修改其值。
函数命名： 为封装模板字面量的函数选择一个清晰、表达其用途的名称（例如 getDescription, getLogMessage, formatData），这有助于代码的可读性和维护性。
适用场景： 这种模式在需要根据应用程序状态动态生成消息、日志、UI文本或任何需要实时反映数据变化的字符串时非常有用。
避免过度封装： 如果模板字面量的内容是静态的，或者只在初始化时需要求值一次，那么就没有必要将其封装在函数中。只有当其内容需要随数据变化而动态更新时，才采用此方法。

总结

JavaScript 模板字面量中的表达式在定义时一次性求值是其核心特性。为了实现动态更新的模板字面量，即让其内容能够反映底层变量的最新状态，我们必须将其封装在一个函数中。通过这种方式，表达式的求值被延迟到函数被调用时，从而确保每次获取到的都是最新、最准确的字符串内容。掌握这一技巧，能有效解决动态内容展示中的常见问题，并提升代码的灵活性和可维护性。

以上就是JavaScript模板字面量中动态表达式的正确使用姿势的详细内容，更多请关注php中文网其它相关文章！