如果其他条件在 Javascript 模板文字中不起作用答案

【问题标题】：If Else Condition Not Working In Javascript Template Literals如果其他条件在 Javascript 模板文字中不起作用
【发布时间】：2019-12-03 10:25:20
【问题描述】：

我在 tbody 中显示表数据时遇到问题，在我的 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>`;
}

在 result[i].status 中，我正在使用三元运算符，我正在检查 status == 1，然后显示第一个，否则第二个，但它创建的是两个而不是一个，我不知道我哪里出错了，请帮助。

【问题讨论】：

您的三元运算符在字符串内。验证永远不会发生！
你能告诉我解决办法吗？我尝试了很多方法

标签： javascript template-literals template-strings

【解决方案1】：

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

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

嵌套模板字符串示例。

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

【讨论】：

${ 结果[i].status == 1 ? '
' : '
'} 效果很好，但在 onclick"status_item(this,$result[i].contact_id)" 中没有打印id 是显示字符串
对，内部模板没有解析。但你可以先拿零件，然后用零件填满模板。这也增加了可读性。
${result[i].contact_id} 它不起作用它只是显示字符串，我该怎么做？

【解决方案2】：

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

${(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">...）也使用模板文字表达式，因此请确保使用模板文字分隔符（反引号）而不是 '。

【讨论】：

【解决方案3】：

除了Nina Scholz's回答我建议你这样做：

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

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

原因是：

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

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

【讨论】：

【解决方案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>`;
 }
}

【讨论】：