VS Code终端打印含对象的JavaScript数组显示异常如何解决？

这个问题其实很常见——当你在模板字符串里直接拼接JavaScript对象时，它会默认调用对象的toString()方法，而这个方法返回的就是[object Object]，所以看不到内部结构。Chrome DevTools的控制台是专门的调试环境，做了特殊处理支持对象展开，但VS Code终端需要用一些小技巧来实现类似效果，下面是几个实用的解决方案：

方案1：使用JSON.stringify()格式化输出 #

把对象数组转换成格式化的JSON字符串，既能看到完整结构，还能通过缩进让内容更易读：

console.log(`new array is ${JSON.stringify(state.chats, null, 2)}`);

这里的null是过滤参数（我们不需要过滤任何属性），2表示用2个空格缩进，让输出的JSON结构更清晰。

方案2：拆分console.log的参数，让终端自动处理 #

较新版本的VS Code终端支持识别对象并允许点击展开，你可以不用模板字符串，直接把字符串和对象作为单独参数传给console.log：

console.log('new array is:', state.chats);

这种方式下，终端会把对象显示成可点击的条目，点击就能展开查看每个对象的内部属性，体验更接近Chrome DevTools。

方案3：自定义对象的字符串展示（针对特定结构） #

如果数组里的对象结构固定，也可以手动拼接每个对象的属性，输出更定制化的内容：

const formattedChats = state.chats.map(chat => 
  `{ sender: "${chat.sender}", message: "${chat.message}" }`
).join(', ');
console.log(`new array is: [ ${formattedChats} ]`);

不过这个方法只适合你明确知道对象结构的场景，通用性不如前两种。

日常调试优先用方案2，既能保持终端的可交互性，又不用额外处理字符串；如果需要保存或复制输出内容，方案1的格式化JSON会更合适。

内容的提问来源于stack exchange，提问作者apollo24