шаблонные литералы, дающие другой ответ

Question

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

}

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

так что теперь я помещаю «foodArray [i]» в «шаблонные литералы», например, $ {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 использует какой-то метод для создания «симпатичных» JSON.

, которые вы можете получить оно ближе к консольному представлению или, по крайней мере, делает его согласованным с помощью JSON.stringify:

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

, но, как правило, в программировании реального мира вы не будете отправлять объекты в литерал шаблона, так что это не так. в большинстве приложений не вызывает особого беспокойства.