javascript - 如何在模板文字中隐藏空字符串？

Question

我创建了一个模板文字来显示有关产品的信息。打开折叠，然后单击按钮以显示附加信息的模式。

我正在传递文本字符串以输出到模态中的ul。如果字符串为空，则显示输出“未定义”。

如果字符串为空，我如何不显示该li？

// Javascript
const eventList = [
  {
    compShort: "competency-goes-here",
    courseTitle: "Course Title is Longer and will Go Here",
    courseComp: "Category Goes Here",
    courseNumber: "course1",
    courseDesc:
      "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempore id perspiciatis aliquam, error voluptatem consequuntur similique eligendi vitae odit veritatis iusto totam autem praesentium eum rerum alias, fugiat corporis quisquam iure suscipit beatae voluptate fugit tenetur itaque.",
    coursePID: "123456789"
  }
];

function eventTemplate(events) {
  return `
  <div class="col-sm-12">
    <div class="row f-cat active" data-cat="${events.compShort}">
      <div class="accordionCourses" id="accordionexample">
        <div class="card border-1 border-dark-light">
          <div class="row">
            <div class="col-md-12">
              <div class="card-body pb-0">
                <h5 class="card-title font-weight-bold ism-text-dblue">${events.courseTitle}</h5>
                <p class="card-text color-dark font-weight-bold text-italic">Competency Covered: ${events.courseComp}</p>
              </div>
              <div class="card-header bg-transparent border-0" id="headingone">
                <h2 class="mb-0">
                  <button class="btn btn-link p-0 float-right" type="button" data-toggle="collapse" data-target="#${events.courseNumber}" aria-expanded="true" aria-controls="${events.courseNumber}"> 
                    <i class="fas fa-angle-double-down fa-w-10 fa-1x ism-text-green"><span hidden>text</span></i>
                  </button>
                </h2>
              </div>
            </div>
          </div>
        </div>
        <div id="${events.courseNumber}" class="collapse bg-grey" aria-labelledby="headingone" data-parent="#accordionexample">
          <div class="card-body p-3">
            <p class="card-text mb-3"> ${events.courseDesc} </p>
          </div><!-- new row -->
          <div class="card-footer border-0 bg-transparent pt-0">
            <div class="row no-gutters">
              <div class="col-sm-12 pb-3"><h6><a href="#" data-toggle="modal" data-target="#${events.courseNumber}Modal"><span class="fas fa-plus-square"></span> View More</a></h6></div>
              <div class="col-sm-12 pb-3"><h6><strong>Member: $135</strong> | Nonmember: $199</h6></div>
              <div class="col-sm-12"><a href="https://ecommerce.website.com?productId=${events.coursePID}" class="btn btn-md btn-primary text-white">Purchase</a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
`;
}

document.getElementById("eLearningCrsList").innerHTML = `
  ${eventList.map(eventTemplate).join(" ")}
`;


const eLmodalList = [
  {
    AriaId: 'course1',
    learn1: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aut id at fuga beatae, vel neque ea delectus? Ad, sequi? Animi perferendis rerum ad amet.',
    learn2: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea quisquam non minima velit dicta praesentium, itaque ad saepe autem dignissimos porro quae eius accusantium. Cumque!',
    learn3: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestias magni explicabo ex, quibusdam quae illo quasi esse iusto! Quas, vero quibusdam. Voluptatem laborum modi architecto!'
  }
];

function eLmodalTemplate(modals) {
    return `
    <div class="modal fade" id="${modals.AriaId}Modal" tabindex="-1" role="dialog" aria-labelledby="${modals.AriaId}Label" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="${modals.AriaId}Label">Additional Information</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-sm-12">
                <div class="card border-0">
                  <div class="card-body bg-grey p-2">
                    <h5 class="card-title font-weight-bold text-uppercase text-center m-0">You will earn 1 credit for this course</h5>
                  </div>
                </div>
              </div>
              <div class="col-sm-12">
                <div class="card border-0">
                  <h4 class="card-header bg-transparent border-0 pl-0">You will learn...</h4>
                  <div class="card-body pl-0">
                    <ul>
                      <li>${modals.learn1}</li>
                      <li>${modals.learn2}</li>
                      <li>${modals.learn3}</li>
                      <li>${modals.learn4}</li>
                      <li>${modals.learn5}</li>
                      <li>${modals.learn6}</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  `;    
}

document.getElementById("eLearningModalList").innerHTML = `
  ${eLmodalList.map(eLmodalTemplate).join(" ")}
`;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>



<div class="container p-5">
  <div class="row">
    <div id="eLearningCrsList"></div>
  </div>
</div>
<div id="eLearningModalList"></div>

Answer 1

为每个条件编写一个仅显示 <li> 的条件如果有一个值:

${modals.learn1 ? `<li>${modals.learn1}</li>` : ""}

let modals = {
  learn1: "One",
  learn2: "",
  learn3: "Three",
  learn4: null,
  learn5: "Five"
};

let result = `
  ${modals.learn1 ? `<li>${modals.learn1}</li>` : ""}
  ${modals.learn2 ? `<li>${modals.learn2}</li>` : ""}
  ${modals.learn3 ? `<li>${modals.learn3}</li>` : ""}
  ${modals.learn4 ? `<li>${modals.learn4}</li>` : ""}
  ${modals.learn5 ? `<li>${modals.learn5}</li>` : ""}
  ${modals.learn6 ? `<li>${modals.learn6}</li>` : ""}
`;

document.body.innerHTML = result;

或者，如果这些是您唯一的模态，您可以实现一个循环:

${Object.values(modals).map(m => m ? `<li>${m}</li>` : '').join("")}

let modals = {
  learn1: "One",
  learn2: "",
  learn3: "Three",
  learn4: null,
  learn5: "Five"
};

let result = `${Object.values(modals).map(m => m ? `<li>${m}</li>` : '').join("")}`;

document.body.innerHTML = result;