如何在模板文字中的双引号内编写 JavaScript 变量？ [已关闭]

Question

我有这个代码：

        const newDiv = document.createElement('div');
        newDiv.innerHTML = `
            <button class='btn btn-download'>
                <span class='icon'>&#8681;</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">

有一个 id outputFormatSelectId。实际上这个id是一个有值的变量。但我不明白如何将此变量放入 **id= **

虽然不是完整的代码，只是相关的代码。如果有不清楚的地方请向我询问。

实际上我的困惑在于模板文字。虽然代码块位于模板文字内，那么我如何在此模板文字中使用另一个变量？

Answer 1

正如@David 在评论中所说，你需要这样的东西：

<select id="${outputFormatSelectId}">

所以你更正后的代码将是：

const newDiv = document.createElement('div');
newDiv.innerHTML = `
<button class='btn btn-download'>
    <span class='icon'>&#8681;</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>`;

Answer 2

你是这个意思吗？

    const outputFormatSelectId = "this-is-id";
    const newDiv = document.createElement('div');
    newDiv.innerHTML = `
        <button class='btn btn-download'>
            <span class='icon'>&#8681;</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

Answer 3

通过在模板文字中使用

${outputFormatSelectId}

，您可以告诉 JavaScript 计算

${}

中的表达式并将其值插入到字符串中。

这样，如果

outputFormatSelectId

是一个保存字符串值的变量（如“mySelectId”），它将作为

id

属性的值插入。