javascript - 在 vanilla JS 中添加元素的干净代码

Question

我有一个对象数组，其中也包含数组，我想从中渲染一些元素，就在 vanilla JS 中。

const companyShops = [
  {
    shop: "Somewhere",
    address: {street: "Street 85", zipcode: "0000EH", place: "Somewhere"},
    hours: [
      {day: "maandag", open: "12.00", closed: "18.00"},
      {day: "dinsdag", open: "10.00", closed: "18.00"},
      {day: "woensdag", open: "10.00", closed: "18.00"},
      {day: "donderdag", open: "10.00", closed: "21.00"},
      {day: "vrijdag", open: "10.00", closed: "18.00"},
      {day: "zaterdag", open: "10.00", closed: "18.00"},
      {day: "zondag", open: "gesloten"}
    ]
  },
  {
    shop: "Else",
    address: {street: "Street 50", zipcode: "0000PC", place: "Else"},
    hours: [
      {day: "maandag", open: "gesloten"},
      {day: "dinsdag", open: "10.00", closed: "18.00"},
      {day: "woensdag", open: "10.00", closed: "18.00"},
      {day: "donderdag", open: "10.00", closed: "21.00"},
      {day: "vrijdag", open: "10.00", closed: "18.00"},
      {day: "zaterdag", open: "10.00", closed: "17.00"},
      {day: "zondag", open: "gesloten"}
    ]
  }
]

我目前拥有的代码有效，但我不喜欢它的外观。

HTML：

<div class=shops"></div>

JS：

const storeHours = times => {
    return `
        ${times.map(time => 
             `
             <p class="hours"><b>${time.day}</b> ${time.closed 
                 ? `<span>${time.open} - ${time.closed}</span>` 
                 : `<span>${time.open}</span>`
             }</p>
             `
        )
        .join("")
    }
    `;
};

const shopInfo = companyShops.map(shop => {
        const { place } = shop.address;
        const { hours } = shop;
        return `
            <div class="shop-container">
                <div class="${place.toLowerCase()}-bg-container">
                    <a href="#">Afspraak ${place} maken</a>
                </div>
                <div class="store-hours">${storeHours(hours)}</div>
            </div>
        `;
    })
.join("");

const shops = document.querySelector(".shops");

shops.innerHTML = shopInfo;

特别是 storeHours 函数在所有嵌套的反引号中看起来很可怕。

对于我已经尝试过的 storeHours ，但这不起作用，我得到了未定义：

const storeHours = (times) => {
    times.map(time => {
        return `
        <p class="hours"><b>${time.day}</b> ${time.closed 
            ? `<span>${time.open} - ${time.closed}</span>` 
            : `<span>${time.open}</span>`
            }</p>
        `
    })
    .join("")

};

长话短说，有没有办法让它看起来更好，我希望它看起来更像“shopInfo”。

标签： javascriptbackticks