从对象变量获取值时遇到问题。没有错误显示

Question

我创建了一个名为 animals 的数组，其中包含两个对象。我想从对象 animals 的 name 变量中获取一个值，并将该值插入到 map 方法的 return 语句中。我使用 ${} 来访问变量。

const Animals = [{
    name: "Lion",
    type: "Carnivore",
  },
  {
    name: "Cow",
    type: "Herbivore",
  },
];


window.addEventListener("DOMContentLoaded", function() {
  let display = Animals.map(function(item) {
    return '<h1>${item.name}</h1>';
  });
  console.log(display);
});

现在我应该在控制台中获取包含变量值的两个项目的数组 -- 结果应该如下所示 ['<h1>Lion</h1>', '<h1>Cow</h1>']。但是我得到了这个 ['<h1>${item.name}</h1>', '<h1>${item.name}</h1>']。您可以清楚地看到，由于某种原因，${} 无法访问变量并获取值。我不知道为什么会这样。控制台日志显示没有错误。请帮我解决这个问题。提前致谢。

Answer 1

签入您的代码而不是：

'<h1>${item.name}</h1>'

应该是：

`<h1>${item.name}</h1>`

这是 Template literals (Template strings)

的文档

演示：

const Animals = [{
    name: "Lion",
    type: "Carnivore",
  },
  {
    name: "Cow",
    type: "Herbivore",
  },
]

const display = Animals.map(({ name }) => `<h1>${name}</h1>`)

console.log(display)

Answer 2

${...} 结构中的变量是 template/string literals 语法，但为了使它们起作用，它们需要用反引号括起来而不是 single/double 引号。

const animals=[{name:"Lion",type:"Carnivore"},{name:"Cow",type:"Herbivore"}];

window.addEventListener("DOMContentLoaded", function() {
  const display = animals.map(function(item) {
    return `<h1>${item.name}</h1>`;
  });
  console.log(display);
});

Answer 3

const Animals = [{
    name: "Lion",
    type: "Carnivore",
  },
  {
    name: "Cow",
    type: "Herbivore",
  },
];


window.addEventListener("DOMContentLoaded", function() {
  let display = Animals.map(function(item) {
   return '<h1>'+item.name+'</h1>';
  // return `<h1>${item.name}</h1>`;
  });
  console.log(display);
});

从对象变量获取值时遇到问题。没有错误显示

Having issue with getting value from object variable. No errors showing

javascript

arrays

javascript-objects