If Else 条件在 Javascript 模板文字中不起作用

Question

我在 tbody 中显示我的 table 数据时遇到问题，在我的 javascript 中我正在获取结果对象并且我在 javascript 文件中使用模板文字这是我的代码：

for (i = 0; i < size; i++) 
{
    serialNo++;
    html += `<tr>
    <td>${serialNo}</td>
    <td>${result[i].first_name}</td>
    <td>${result[i].last_name}</td>
    <td>${result[i].email}</td>
    <td>${result[i].mobile}</td>
    (${(result[i].status == 1)} ? '<td><div class="switchery-demo">
    <input type="checkbox" checked id="demo${result[i].contact_id}" 
    onclick="status_item(this,'${result[i].contact_id}')" 
    data-plugin="switchery" data-size="small" data-color="#1bb99a"/> 
    </div></td>' : '<td><div class="switchery-demo"><input 
    type="checkbox" checked data-plugin="switchery" 
    id="demo${result[i].contact_id}" 
    onclick="status_item(this,'${result[i].contact_id}')" data- 
    size="small" data-color="#1bb99a"/></div></td>')
    </tr>`;
}

在结果[i].status 中我正在使用三元运算符我正在检查状态是否== 1 然后显示第一个其他第二个但它创建两个而不是一个我不知道我哪里错了帮助。

Answer 1

现在，模板表达式（${ ... } 在 ? 之前结束 （并恢复纯字符串），因此它只会打印纯 ? 和 ::

${(result[i].status == 1)} ? '<td>...

您需要嵌套内部模板文字：

for (i = 0; i < size; i++) {
  serialNo++;
  html += `<tr>
    <td>${serialNo}</td>
    <td>${result[i].first_name}</td>
    <td>${result[i].last_name}</td>
    <td>${result[i].email}</td>
    <td>${result[i].mobile}</td>
    (${
      result[i].status == 1
      ? `<td><div class="switchery-demo">
        <input type="checkbox" checked id="demo${result[i].contact_id}" 
        onclick="status_item(this,'${result[i].contact_id}')" 
        data-plugin="switchery" data-size="small" data-color="#1bb99a"/> 
        </div></td>`
      : `<td><div class="switchery-demo"><input 
        type="checkbox" checked data-plugin="switchery" 
        id="demo${result[i].contact_id}" 
        onclick="status_item(this,'${result[i].contact_id}')" data- 
        size="small" data-color="#1bb99a"/></div></td>`
     })
   </tr>`;
}

因为内部部分（<td><div class="switchery-demo">...）也使用模板文字表达式，请确保使用模板文字定界符（反引号）而不是 '。

Answer 2

您需要将整个部分移动到表达式部分

`${ result[i].status == 1
    ? '...'
    : 'some other'
}`

带有嵌套模板字符串的示例。

console.log(`${true === false
    ? `${ 10 }`
    : `${ 20 }`
}`);

Answer 3

除了回答之外，我还建议您按照以下方式进行回答：

html += '<tr>....'

html += result[i].status == 1
    ? '...'
    : 'some other'

原因是：

用这种方式阅读代码比将所有代码都放在字符串中更容易。
您可以更好地格式化您的代码（#1 - 更好地阅读您的代码）

另外：使用 === 比 == 更好。确保您可以使用 ===，因为 == 更容易出错。

Answer 4

for (i = 0; i < size; i++) 
{
    serialNo++;
    html += `<tr>
    <td>${serialNo}</td>
    <td>${result[i].first_name}</td>
    <td>${result[i].last_name}</td>
    <td>${result[i].email}</td>
    <td>${result[i].mobile}</td>';

    if(result[i].status == 1){
    html+= '<td><div class="switchery-demo">
    <input type="checkbox" checked id="demo${result[i].contact_id}" 
    onclick="status_item(this,'${result[i].contact_id}')" 
    data-plugin="switchery" data-size="small" data-color="#1bb99a"/> 
    </div></td>' : '<td><div class="switchery-demo"><input 
    type="checkbox" checked data-plugin="switchery" 
    id="demo${result[i].contact_id}" 
    onclick="status_item(this,'${result[i].contact_id}')" data- 
    size="small" data-color="#1bb99a"/></div></td>')
    </tr>`;
 }
}

If Else 条件在 Javascript 模板文字中不起作用

If Else Condition Not Working In Javascript Template Literals

javascript

template-strings

template-literals