本文介绍如何在一次 console.log 调用中同时打印变量原始值、执行生成新值的函数，并再次打印该变量——无需额外声明变量，借助模板字符串与函数调用的组合实现清晰、可读且高效的调试输出。
本文介绍如何在一次 console.log 调用中同时打印变量原始值、执行生成新值的函数，并再次打印该变量——无需额外声明变量，借助模板字符串与函数调用的组合实现清晰、可读且高效的调试输出。
在 JavaScript 调试过程中，有时我们希望一次性观察变量状态、触发副作用（如生成新值），再对比前后变化，但又不想污染作用域或写多行冗余代码。例如，你有一个随机十六进制颜色变量 c1，想在控制台中显示：“原始值 → 函数生成的新值 → 原始值”，全部在单次 console.log 调用中完成。
直接在表达式中多次调用函数（如 console.log(c1 + thing() + c1)）存在两个关键问题：
- ❌
thing()若有副作用（如生成新随机值），其返回值会改变后续行为，且无法复用； - ❌ 字符串拼接会导致所有内容挤在一行，可读性差，难以区分原始值与新值。
✅ 正确做法是：先调用函数获取所需值，再通过模板字符串组织结构化输出。推荐使用多行模板字面量（backtick string），既保持单次 console.log，又实现逻辑清晰、视觉分层的效果：
function thing() {
return '#' + Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0');
}
const c1 = thing(); // 例如: "#a3f8c1"
// ✅ 推荐：单次调用，结构清晰，值可复用
const newValue = thing();
console.log(`c1 (original) = ${c1}
thing() (new) = ${newValue}
c1 (again) = ${c1}`);输出效果如下（格式对齐，便于快速扫描）：
c1 (original) = #a3f8c1 thing() (new) = #5d2e9b c1 (again) = #a3f8c1
⚠️ 注意事项：
- 若
thing()必须被调用两次（例如需观察两次独立随机结果），请显式调用两次并分别赋值，避免console.log(\...\${thing()}...\${thing()}`)` —— 这虽可行，但不可控且违背“单一职责”原则； - 模板字符串中的换行符
\n会被原样渲染，确保终端支持多行日志显示（现代浏览器和 Node.js 均默认支持）； - 如需更专业的调试体验，可进一步结合
console.group()或自定义调试函数封装此模式。
总结：不追求“一行代码”的表面简洁，而应优先保障可读性与可维护性。用一次变量缓存 + 多行模板字符串，即可优雅达成目标——既未新增全局变量，又让输出语义明确、层次分明。
