给出不同答案的模板文字答案

【问题标题】：template literals giving different answer给出不同答案的模板文字
【发布时间】：2020-04-17 19:19:02
【问题描述】：

我是 javascript 初学者，正在尝试编写代码以提高自己，目前正在尝试学习“模板文字”，并且由于某种原因通过放入“模板文字”来获得不同的答案。这是我的代码：

const foodArray = [
  { name: 'Burrito' },
  { name: 'Pizza' },
  { name: 'Burger' },
  { name: 'Pasta' }
];
for (let i = 0; i < foodArray.length; i++) {
  console.log(`i value: ${i} | Food Name:`, foodArray[i]);
  

}

&lt;p id="demo"&gt;&lt;/p&gt;

所以现在我将 'foodArray[i]' 放在 'template literals' 中，就像这样 ' ${foodArray[i] ' 但它给了我 '[object Object]'，它不应该给出相同的结果吗？也许我在这里做错了什么

const foodArray = [
  { name: 'Burrito' },
  { name: 'Pizza' },
  { name: 'Burger' },
  { name: 'Pasta' }
];
for (let i = 0; i < foodArray.length; i++) {
  console.log(`i value: ${i} | Food Name: ${foodArray[i]}`);
  

}

&lt;p id="demo"&gt;&lt;/p&gt;

【问题讨论】：

这只是模板文字字符串化对象的方式与 console.log 的实现方式之间的区别。模板文字在其上调用toString()。 console.log 正在使用 JSON.sringify 什么的。
@bryan60 你能写出解决这个问题的答案吗？
只做${JSON.stringify(foodArray[i])}

标签： javascript html arrays for-loop template-literals

【解决方案1】：

console.log 将做与模板文字不同的事情。 console.log 会将实际的对象引用发送到控制台客户端，特定的控制台客户端将从那里决定如何呈现该对象，它们的做法都略有不同。模板文字将始终调用对象.toString() 方法。一些控制台客户端也只是调用.toString() 方法，一些使用JSON.stringify，一些使用复杂的对象浏览器，SO 控制台客户端使用一些方法来生成“漂亮”的 JSON。

您可以使其更接近控制台表示，或者至少使用JSON.stringify 使其保持一致：

console.log(`i value: ${i} | Food Name: ${JSON.stringify(foodArray[i])}`);

但通常，在现实世界的编程中，您不会将对象发送到模板字面量，因此在大多数应用程序中这不是一个大问题。

【讨论】：