JS动态设置data属性取值遇空格截断问题解决

从对象数组渲染菜单列表时，将菜品title字段存入按钮的data-title自定义属性，点击按钮读取属性值打印到控制台时，title内容在第一个空格处截断，空格后内容全部丢失。
相关实现代码：

const menu = [
  {
    id: 1,
    title: "GUNPOWDER GOBHI",
    category: "Small Plates",
    price: 16.99,
    img: "sp1.png",
    desc: `Crispy Cauliflower, Spicy Lentil Dust`,
  },
]

window.addEventListener("DOMContentLoaded", function () {
  initialDisplay(menu);
});

function diplayMenuItems(menuItems) {
  let displayMenu = menuItems.map(function (item) {
    return `<article class="menu-item">
          <img src=${item.img} alt=${item.title} class="photo" />
          <div class="item-info">
            <h4>${item.title}</h4>
            <h4 class="price">$${item.price}</h4>
            <p class="item-text">
              ${item.desc}
            </p>
            <button class="add-btn" data-title=${item.title}>Add To List</button>
          </div>
        </article>`;
  });
  displayMenu = displayMenu.join("");

  sectionCenter.innerHTML = displayMenu;

  const addBtns = document.querySelectorAll('.add-btn');
  addBtns.forEach(function(btn){
    btn.addEventListener('click', function(e){
      const title = e.currentTarget.dataset.title;
      console.log(title);
    });
  });
}

代码逻辑：DOM加载完成后调用方法渲染菜单列表，渲染时直接将菜品title赋值给按钮的data-title自定义属性；渲染完成后为所有添加按钮绑定点击事件，点击时通过e.currentTarget.dataset.title读取存储的title值打印，此时控制台仅能输出第一个空格前的内容。

拼接HTML字符串时，动态赋值的标签属性没有用引号包裹。
按照HTML解析规则，不带引号的属性值遇到空白字符就会终止解析，空格后的内容会被识别为标签上的独立属性，不会被计入当前属性的值。以上述代码的按钮为例，最终渲染出的DOM结构为：

<button class="add-btn" data-title=GUNPOWDER GOBHI>Add To List</button>

浏览器会将data-title的属性值解析为GUNPOWDER，后面的GOBHI会被识别为按钮上的一个无值自定义属性，读取时自然无法拿到完整内容。
提示：代码中img标签的src、alt属性也存在相同问题，如果后续图片路径、替换文本包含空格，会出现图片加载失败、alt文本截断的同类问题。

给所有动态插入的HTML属性值添加双引号包裹，注意模板字符串的引号嵌套不要冲突即可。
修复后的模板片段如下：

return `<article class="menu-item">
          <img src="${item.img}" alt="${item.title}" class="photo" />
          <div class="item-info">
            <h4>${item.title}</h4>
            <h4 class="price">$${item.price}</h4>
            <p class="item-text">
              ${item.desc}
            </p>
            <button class="add-btn" data-title="${item.title}">Add To List</button>
          </div>
        </article>`;

修改后浏览器可以正确解析包含空格的属性值，点击按钮时即可获取完整的title内容。

内容的提问来源于stack exchange，提问作者gamer beast