Question

我正处于JavaScript学习曲线的关键时刻，我需要学习一些更复杂的东西以变得更好，并且我从带标签的模板文字开始，但是我似乎无法全神贯注于它们的方式工作。我看过教程，看过GitHub，还有许多提供帮助的网站，但我仍然不知道他们在说什么。我想使用testParse函数将studyParse和parseHTML变量附加到HTML中。我尝试使用createElement，但是感觉就像是copout，因为如果我像这样创建一个div元素，那我会漏掉标记模板文字的意义。我在项目中使用了它，所以这就是为什么我有一些奇怪的字符串的原因。请彻底解释您编写的函数的工作原理和作用，以使我得到充分的理解。

const testInf = `Test your skills`;
const studyInf = `Study with flashcards`;
let testParse = parseHTML `<div>${testInf}</div>`;
let studyParse = parseHTML `<div>${studyInf}</div>`;

function parseHTML(){

};

console.log(parseHTML);

Answer 1

要使用parseHTML将这些字符串添加到HTML中，只需使用innerHTML：

const testInf = `Test your skills`;
const studyInf = `Study with flashcards`;
let testParse = `<div>${testInf}</div>`;
let studyParse = `<div>${studyInf}</div>`;

function parseHTML() {
  document.body.innerHTML += `${testParse}<br>${studyParse}`;
};

parseHTML();

Answer 2

From the MDN内的文本字段的现有文本来预填充x可编辑的弹出窗口：

模板文字的更高级形式是带有标签的模板。 标签允许您使用函数解析模板文字。标记函数的第一个参数包含一个字符串值数组。其余参数与表达式相关。最后，您的函数可以返回您操作的字符串（或者它可以返回完全不同的内容，如下面的示例所述）。标记所使用的函数名称可以是您想要的任何名称。

因此，基本上，您可以将tag用作函数来解析 template literal。在您的特定情况下，您必须定义标记模板文字以执行某些操作的解析器函数的参数：

const testInf = `Test your skills`;
const studyInf = `Study with flashcards`;
let testParse = parseHTML `<div>${testInf}</div>`;
let studyParse = parseHTML `<div>${studyInf}</div>`;

function parseHTML(arrayOfStrings, exp1)
{
    // We will just return a string with the received arguments.
    return JSON.stringify(arrayOfStrings) + exp1;
};

console.log(testParse);
console.log(studyParse);

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

如您所见，变量testParse和studyParse将保存解析器函数（parseHTML）返回的内容。现在，我们了解了它们的工作原理，让我们看一个与您想要做的事有关的示例（即添加HTML内容）。

for (let i = 0; i < 5; i++)
{
    console.log(putOption `Item${i}`);
}

function putOption(strings, exp1)
{
    let newli = `<li>${strings[0]} ${exp1 + 1}</li>`;
    document.getElementById("ul").innerHTML += newli;
    return `Element ${newli} was added!`;
};

.as-console-wrapper {max-height:30% !important;}
.as-console {background-color:black !important; color:lime;}

<ul id="ul"></ul>

但是，您基本上可以不使用它们而使用相同的方法。

标记模板文字混淆

2 个答案: