JavaScript基础教程（九）输出之console.log()：解锁console.log的隐藏技能！[特殊字符]不只是打印这么简单-优快云博客

你以为console.log()只能简单打印值？远不止如此！作为JavaScript调试的基石，它隐藏着令人惊叹的高级功能。

1️⃣ 格式化输出：超越字符串拼接

console.log('用户信息：%s, 年龄：%d', '小明', 25) 
console.log('%c重要信息！', 'color: red; font-size: 20px;')

使用%c占位符可直接应用CSS样式，创建更醒目的调试信息

2️⃣ 结构化数据展示

const users = [
  { name: 'Alice', age: 28 },
  { name: 'Bob', age: 32 }
]

console.table(users)  // 表格形式展示
console.dir(users)    // 可交互属性列表

3️⃣ 分组输出与性能监控

console.group('用户组')
console.log('用户A')
console.log('用户B')
console.groupEnd()

console.time('耗时操作')
// 执行代码
console.timeLog('耗时操作')  // 中间检查点
console.timeEnd('耗时操作')  // 结束计时

4️⃣ 警惕异步陷阱

const obj = { time: new Date().toISOString() }
console.log(obj)  // 展开查看时time值可能已改变！

// 解决方案：
console.log(JSON.parse(JSON.stringify(obj)))  // 快照方式

专业提示：生产环境记得移除console语句（可使用Babel插件自动处理）

掌握这些技巧，你的调试效率将大幅提升。console.log()不再是简单的打印工具，而是成为你开发过程中的强大调试利器！