JSON数据未通过innerHTML显示

Question

我正在尝试使用香草Javascript从JSON文件中获取数据，并将其插入HTML中。但是我的代码一直显示变量名而不是数据。

displayProducts(products){
let result = "";
products.forEach(product => {
result +="<article class='product'><div class='img-container'><img src=${product.image} alt='oops' class='product-img'><button class='bag-btn' data-id=${product.id}><img src='./images/poopbag.png'>Add to bag</button></div><h3>${product.title}</h3><h4>$${product.price}</h4></article>";
});
productsDOM.innerHTML=result;

}

显示的是${product.image}、${product.id}和${product.title}。不是实际的数据。当我把console.log(product.image(、console.log(product.id(和console.log(product.title(放在同一个函数中时，它显示了我想要的数据。

Answer 1

字符串插值要求使用反引号`，而不是单引号'或双引号"。

`<article class='product'><div class='img-container'><img src=${product.image} alt='oops' class='product-img'><button class='bag-btn' data-id=${product.id}><img src='./images/poopbag.png'>Add to bag</button></div><h3>${product.title}</h3><h4>$${product.price}</h4></article>`