模板文字给出不同的答案

Question

我是 javascript 初学者，正在尝试通过编码来提高自己，目前正在尝试学习 'template literals' 并且出于某种原因通过输入 'template literals' 得到了不同的答案。这是我的代码：

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]);
  

}

<p id="demo"></p>

所以现在我把 '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]}`);
  

}

<p id="demo"></p>

Answer 1

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

您可以使它更接近控制台表示，或者至少通过使用 JSON.stringify:

使其保持一致

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

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

模板文字给出不同的答案

template literals giving different answer

javascript

html

arrays

for-loop

template-literals