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

Question

我创建了一个显示产品信息的模板文字。打开折叠，然后单击按钮以显示模式以获取更多信息。

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

如果字符串为空，我如何不显示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: 5</strong> | Nonmember: 9</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;

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

How to hide empty strings in a Template Literal?

javascript

jquery

template-literals