本文介绍如何通过模板字符串和函数调用组合，在一次 console.log() 调用中实现“打印变量 → 执行函数 → 再次打印变量”的需求，避免冗余变量声明，同时保持控制台输出清晰可读。
本文介绍如何通过模板字符串和函数调用组合，在一次 `console.log()` 调用中实现“打印变量 → 执行函数 → 再次打印变量”的需求，避免冗余变量声明，同时保持控制台输出清晰可读。
在 JavaScript 开发中，有时我们希望精简日志逻辑——比如调试一个随机十六进制值 c1，接着立即生成并打印另一个随机 hex 值（由函数 thing() 返回），最后再确认原始值是否未变。你可能本能地尝试写成：
console.log(c1 + thing() + c1);
⚠️ 但这种方式存在两个关键问题：
-
thing()的返回值若为非字符串类型（如undefined或对象），会触发隐式转换，导致输出混乱（例如"#a3fundefined#a3f"）； - 所有内容被拼接为单行字符串，无法区分哪部分是原始变量、哪部分是函数结果，可读性差，不利于调试。
✅ 更优解是使用带换行符的模板字符串（template literal），配合显式变量缓存与结构化排版。例如：
function thing() {
return '#' + Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0');
}
const c1 = thing(); // 例如 "#b2c84a"
// ✅ 单次 console.log，清晰分隔三部分内容
console.log(`c1 = ${c1}
next = ${thing()}
c1 = ${c1}`);
输出效果如下（控制台中为三行）：
c1 = #b2c84a next = #5f1e99 c1 = #b2c84a
? 关键技巧说明：
- 使用反引号（
`）包裹多行模板字符串，天然支持换行与插值； -
${c1}直接复用变量，避免重复声明； -
${thing()}在插值中实时执行函数，每次调用独立生成新值； - 每行前添加语义前缀（如
c1 =、next =），大幅提升日志可追溯性。
? 注意事项：
- 若
thing()有副作用（如修改全局状态、发起请求），多次调用需谨慎评估影响； - 如需确保
thing()仅执行一次且结果复用，应先赋值再插值：const nextVal = thing(); console.log(`c1 = ${c1}\nnext = ${nextVal}\nc1 = ${c1}`); - 不推荐在模板字符串中嵌套复杂逻辑（如条件判断或循环），这会降低可维护性；保持插值表达式简洁明了。
总结：单行拼接（+ 连接）虽语法可行，但牺牲可读性与健壮性；而基于模板字符串的多行结构化输出，既满足“一行调用”的简洁诉求，又兼顾调试友好性与代码专业性——这才是现代 JavaScript 日志实践的推荐方式。
