javascript - innerhtml 中的 if 条件

Question

我有以下代码

     function showDetails(confirmed, recovered, deaths) {
  if (recovered == undefined && deaths == undefined) {
    output.innerHTML = `
    <div  class="confirmed">
     <i class="fas fa-head-side-mask"></i> 
  <p> ${confirmed}</p>
    </div>`;
  } else if (recovered == undefined) {
    output.innerHTML = `<div class="confirmed">
     <i class="fas fa-head-side-mask"></i> 
     <p>casi confermati</p>
     <p>${confirmed}</p>
    </div>
    <div  class="deaths">
  <i class="fas fa-cross"></i>
   <p>Deceduti</p>
  <p>${deaths}</p>
    </div>`;
  } else if (deaths == undefined) {
    output.innerHTML = `<div  class="confirmed">
     <i class="fas fa-head-side-mask"></i> 
     <p>casi confermati</p>
     <p>${confirmed}</p>
    </div>
    <div  class="recovered">
  <i class="fas fa-heartbeat"></i>
  <p>Ricoverati</p>
  <p>${recovered}</p>
    </div>`;
  } else {
    output.innerHTML = `
    <div  class="confirmed">
     <i class="fas fa-head-side-mask"></i> 
     <p>Casi confermati</p>
<p>${confirmed}</p>
    </div >
    <div class="recovered">
  <i class="fas fa-heartbeat"></i>
  <p>Ricoverati</p>
<p>${recovered}</p>
    </div>
    <div  class="deaths">
  <i class="fas fa-cross"></i>
  <p>Deceduti</p>
  <p>${deaths}</p>
    </div>`;
  }
}

我想尝试通过在innerHTML本身中插入条件来清理这段代码，但我不明白如何做到这一点，最重要的是是否可以做这样的事情或者可能有更好的方法来做它。我想做的例如是这样的:

        output.innerHTML = `
            <div  class="confirmed">
             <i class="fas fa-head-side-mask"></i> 
             <p>Casi confermati</p>
        <p>${confirmed}</p>
            </div >
//CONDITION
    if (${recovered} =!undefined ) {
            <div class="recovered">
          <i class="fas fa-heartbeat"></i>
          <p>Ricoverati</p>
        <p>${recovered}</p>
            </div>
    }
//CONDITION
if (${deaths} =!undefined ) {
            <div  class="deaths">
          <i class="fas fa-cross"></i>
          <p>Deceduti</p>
          <p>${deaths}</p>
            </div>`;
          }
}

这样的事情可以做吗？抱歉，如果这是一个微不足道的问题，但我正在努力学习

Answer 1

我会这样做:

var textToOutput = `
  <div  class="confirmed">
    <i class="fas fa-head-side-mask"></i> 
    <p>Casi confermati</p>
    <p>${confirmed}</p>
  </div >
`;

if (${recovered} =!undefined ) {
  textToOutput += `
    <div class="recovered">
      <i class="fas fa-heartbeat"></i>
      <p>Ricoverati</p>
      <p>${recovered}</p>
    </div>
  `;
}

if (${deaths} =!undefined ) {
  textToOutput += `
    <div  class="deaths">
      <i class="fas fa-cross"></i>
      <p>Deceduti</p>
      <p>${deaths}</p>
    </div>
  `;
}

output.innerHTML = textToOutput;