Как я могу написать переменную JavaScript внутри двойных кавычек в литерале шаблона?
У меня есть этот код:
const newDiv = document.createElement('div');
newDiv.innerHTML = `
<button class='btn btn-download'>
<span class='icon'>⇩</span>
Download Subtitle
</button>
<span>as</span>
<select id=`outputFormatSelectId`>
<option value = "text">Text</option>
<option value = "text-with-time">Text with Time</option>
<option value = "json">JSON</option>
<option value = "srt">SRT</option>
</select>`;
Обратите внимание: <select id = "outputFormatSelectId"> имеет идентификатор outputFormatSelectId. На самом деле этот идентификатор представляет собой переменную, имеющую значение. Но я не понимаю, как можно поместить эту переменную внутрь **id= **
Хотя это не полный код, а только связанный с ним код. Если что-то неясно, пожалуйста, обратитесь ко мне за разъяснениями.
На самом деле мое замешательство связано с литералом шаблона. Хотя блок кода находится внутри литерала шаблона, как я могу использовать другую переменную в этом литерале шаблона?
@Дэвид Да, я думаю, это хорошая идея.
Этот вопрос похож на: Литералы шаблонов JavaScript ES6 — что они могут и чего не могут. Если вы считаете, что это другое, отредактируйте вопрос, поясните, чем он отличается и/или как ответы на этот вопрос не помогают решить вашу проблему.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
ты имел в виду это?
const outputFormatSelectId = "this-is-id";
const newDiv = document.createElement('div');
newDiv.innerHTML = `
<button class='btn btn-download'>
<span class='icon'>⇩</span>
Download Subtitle
</button>
<span>as</span>
<select id='${outputFormatSelectId}'>
<option value = "text">Text</option>
<option value = "text-with-time">Text with Time</option>
<option value = "json">JSON</option>
<option value = "srt">SRT</option>
</select>`;
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
Как сказал @David в комментарии, вам нужно что-то вроде этого:
<select id = "${outputFormatSelectId}">
Итак, ваш исправленный код будет:
const newDiv = document.createElement('div');
newDiv.innerHTML = `
<button class='btn btn-download'>
<span class='icon'>⇩</span>
Download Subtitle
</button>
<span>as</span>
<select id = "${outputFormatSelectId}">
<option value = "text">Text</option>
<option value = "text-with-time">Text with Time</option>
<option value = "json">JSON</option>
<option value = "srt">SRT</option>
</select>`;
Используя ${outputFormatSelectId} в литерале шаблона, вы указываете JavaScript вычислить выражение внутри ${} и вставить его значение в строку.
Таким образом, если outputFormatSelectId является переменной, содержащей строковое значение (например, «mySelectId»), она будет вставлена как значение атрибута id.
${}. Например:<select id = "${outputFormatSelectId}">