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

Question

我在 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 然后顯示第一個 else 第二個但它正在創建兩個而不是一個我不知道我哪里出錯了請幫忙。

Answer 1

您需要將整個部分移動到表達式部分

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

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

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

Answer 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">... ）也使用模板文字表達式，請確保使用模板文字分隔符（反引號）而不是' 。

Answer 3

除了Nina Scholz 的回答，我建議您按以下方式進行：

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

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

原因是：

1. 以這種方式閱讀代碼比將其全部放在字符串中更容易。
2. 您可以更好地格式化您的代碼（#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>`;
 }
}