双嵌套引号

Question

我有这行代码

formsParent.innerHTML = "<p style = 'color: black; font-family: "Times New Roman" font-size: 2em'> Order submitted. Thank you for ordering! </p>"

第一个引用是 innerHTML 属性。接下来是 <p> 元素的 style 属性内的属性，最后我需要在其中对 font-family 属性 的另一个引号，其值具有多个单词，因此它还需要引号。只有 "" 和 ''，并且对字体系列使用双引号会引发错误。如何在引号内使用引号？

编辑：这不是 Double quote in JavaScript string 的副本。停止举报！

在上面的问题中，OP 要求单引号 - 单引号在双引号旁边是答案，反之亦然。

在我的问题中，我要求使用双嵌套引号 - [quotes] 内的 [quotes] 内的 [quotes]。我的问题是额外的引号层。

Answer 1

此处最好的选择是转义引号字符：

formsParent.innerHTML = "<p style=\"color: black; font-family: 'Times New Roman' font-size: 2em\"> Order submitted. Thank you for ordering!</p>";

Answer 2

使用 template literal

document.getElementById('formsParent').innerHTML = `<p style = 'color: red; font-family: "Times New Roman" font-size: 2em'> Order submitted. Thank you for ordering! </p>`

<div id="formsParent">

Answer 3

在您的情况下，您需要转义 quotes:

formsParent.innerHTML = "<p style='color: black; font-family: \"Times New Roman\"; font-size: 2em'> Order submitted. Thank you for ordering! </p>";

但是，在这种情况下，最好使用 backtick 来包含 innerHTML 值，因此您永远不需要转义 apostrophes 或 quotes:

formsParent.innerHTML = `<p style='color: black; font-family: "Times New Roman"; font-size: 2em'> Order submitted. Thank you for ordering! </p>`;