Javascript оператор if в строке с использованием обратных кавычек

Question

Я пытаюсь включить if в строку, которая использует but I get an error Uncaught SyntaxError: Unexpected token 'if' '

var condtionsInput = document.getElementById("condtitions-input").value;
document.getElementById("condtitions-input").value = "";
var selectedLevel = document.getElementById("condtitions-level").value;
cell1.innerHTML = `<input value="`+condtionsInput+`"></input>
                        <select>
                            <option value="Mandatory">Mandatory</option>
                            <option ` + if(selectedLevel == "Important") {'selected="selected"'} + ` value="Important">Important</option>
                            <option value="Support">Support</option>
                        </select>`;
cell2.innerHTML = "<button>X</button></td>";

Я тоже пробовал тернарный оператор

var condtionsInput = document.getElementById("condtitions-input").value;
document.getElementById("condtitions-input").value = "";
var selectedLevel = document.getElementById("condtitions-level").value;
cell1.innerHTML = `<input value="`+condtionsInput+`"></input>
                    <select>
                        <option value="Mandatory">Mandatory</option>
                        <option ` + selectedLevel == "Important" ? 'selected="selected"' : "" + ` value="Important">Important</option>
                        <option value="Support">Support</option>
                    </select>`;
cell2.innerHTML = "<button>X</button></td>";

Answer 1

Одна из основных особенностей использования строковых шаблонов (также называемых обратными кавычками) - это возможность интерполировать строки. Рассмотрим следующую альтернативу с использованием шаблона вместо конкатенации с тернарным оператором вместо if.

cell1.innerHTML = `<input value="` + condtionsInput + `"></input>
<select>
  <option value="Mandatory">Mandatory</option>
  <option ${(selectedLevel == "Important") ? 'selected="selected"' : ""} value="Important">Important</option>
  <option value="Support">Support</option>
</select>`;

Answer 2

Не используйте конкатенацию с обратными кавычками ( литералы шаблонов ). используйте вместо них заполнители.

Этот пример демонстрирует простое использование заполнителя:

const person = 'Billy'
const myStr = `Hello ${person}, how are you?`

// Outputs: Hello Billy, how are you?

В этом примере демонстрируется литерал шаблона, который имеет заполнитель с тернарным оператором, который в качестве литерала шаблона имеет заполнитель.

const num = 100 * Math.random()
const name = 'Billy'
const myStr = `Hello ${num > 50 ? `my name is ${name}`: 'anonymous person'}`

// Outputs:
// Hello my name is billy
// or
// Hello anonymous person

Answer 3

Здесь вы используете Шаблонные литералы . Если вы хотите вызвать выражение в литералах шаблона, вы должны использовать его как:

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tag`string text ${expression} string text`

Answer 4

Как сказал @VLAZ, вы ищете тернарный оператор: состояние ? [возвращается, когда истина]: [возвращается, когда ложь]

cell1.innerHTML = `<input value="`+condtionsInput+`"></input>
<select>
    <option value="Mandatory">Mandatory</option>
    <option value="Important" ` + (selectedLevel == "Important") ? 'selected' : '' + `>Important</option>
    <option value="Support">Support</option>
</select>`;

* примечание: скобки не нужны, просто пытаемся облегчить чтение условия