本文介绍如何在一次 console.log() 调用中，同时打印变量原始值、执行生成新值的函数，并再次打印该变量——无需额外声明中间变量，借助模板字符串与函数调用的组合实现清晰、简洁的调试输出。
本文介绍如何在一次 `console.log()` 调用中，同时打印变量原始值、执行生成新值的函数，并再次打印该变量——无需额外声明中间变量，借助模板字符串与函数调用的组合实现清晰、简洁的调试输出。
在 JavaScript 调试过程中，常需快速对比变量状态或观察函数副作用。但直接在模板字符串中多次调用同一函数（如 `${c1} ${thing()} ${c1}`）会导致 thing() 被执行两次，且 c1 的值不会自动“复用”——因为函数返回的新值并未赋给 c1，原变量保持不变。这往往偏离预期：你真正需要的是「先记录原始值 → 执行函数 → 再次记录原始值」，而非重复计算。
✅ 正确做法是：显式缓存函数返回值，再通过模板字符串多行输出。例如：
function generateRandomHex() {
return '#' + Math.floor(Math.random() * 0x1000000).toString(16).padStart(6, '0');
}
const c1 = generateRandomHex(); // 如 '#a3f81b'
// 单次 console.log，清晰分隔三部分内容
console.log(`c1 = ${c1}
next = ${generateRandomHex()}
c1 = ${c1}`);
输出效果（控制台中为三行）：
c1 = #a3f81b next = #4e2c9d c1 = #a3f81b
⚠️ 注意事项：
- ❌ 避免
console.log(c1 + generateRandomHex() + c1)：字符串拼接会强制类型转换，丢失换行；且generateRandomHex()被调用两次，结果不可控； - ✅ 使用反引号（
`）包裹模板字符串，天然支持换行与插值； - ✅ 若需严格保证
c1不变且函数只执行一次，可先将函数结果赋给临时常量（如const next = generateRandomHex()），再写入模板——语义更明确，也便于后续扩展； - ? 此方法本质仍是单次
console.log调用，不影响性能，也符合“懒但清晰”的开发诉求。
总结：看似“一行写完”的需求，核心在于分离计算与输出——先获取所需值（无论是否复用变量），再用可读性优先的模板结构统一输出。这比强行压缩逻辑更健壮、更易维护。
