javascript - 如果字符串内有条件

Question

我需要设置元素的innerhtml，但代码的某些部分是有条件的。由于我无法附加到innerHtml，所以我想添加一个条件。我对 JS 很陌生，所以我找不到一种方法来做到这一点，因为我搞乱了符号“`”。

我看到了一些附加到innerHtml的方法，但我想要一种更简洁的方法来做到这一点

    el.innerHTML = `
    <ion-avatar slot="start">
        <img src="https://www.gravatar.com/avatar/${i + originalLength}?d=monsterid&f=y">
      </ion-avatar>

    <ion-label>
    <name>${users[t].name}</name>
    <br>

        ******IF JS CONDITIONAL( IF ${users[t].lista} !="") ******    
    <ion-chip><ion-label><lista><p>Lista ${users[t].lista}</p></lista></ion-label></ion-chip>
        <br>
        ******END IF JS CONDITIONAL******

        <ion-chip outline color="primary"><ion-icon name="cash"></ion-icon><p><?php echo $product->getLabelPrice1() ?>: ${users[t].valor1} <?php echo $product->getLabelPrice2() ?>: ${users[t].valor2}</p></ion-chip>

    </ion-label>
    `;

Answer 1

一种选择是使用条件(三元)运算符，例如:

${
    foo === 1 ?                                       //Check if variable is one            
        '============= foo is 1 ============='        //If condition above is true              
    :           
        '============= foo NOT is 1 ============='    //If condition above is false
}

示例

let foo = 1;

let str = `
	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
	Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
				
	    ${
	       foo === 1 ? 
					
	          '============= foo is 1 ============='
					
	       :
					
	          '============= foo NOT is 1 ============='
	    }
				
	Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
	Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	`;

console.log(str);