在 JavaScript 和 HTML 中嵌套引号

Question

我正在从事的项目默认使用双引号表示HTML和JavaScript中的字符串。
这已经决定了，我对此无能为力。
然而，尚未决定的是我们应该如何处理嵌套引号。

我能想到的有三个选项：

1. 从最外层的报价和替代开始。

element.innerHTML = "<a href='...'></a>";
<button onclick="alert('...')"></button>

2. 以最内层的引号和替代开头。

element.innerHTML = '<a href="..."></a>';
<button onclick='alert("...")'></button>

3. 逃避一切。

element.innerHTML = "<a href="..."></a>";
<button onclick="alert(&quot;...&quot;)"></button>

在整体便利性、风格、安全性、可维护性、便携性等方面，哪个是最佳实践？如果除上述情况外还有其他方法，请提出更好的方法。

Answer 1

我认为你给出的例子结构有点奇怪。无论如何，这是我认为您会更喜欢的另一个选项：模板文字。您可以使用反引号来定义它们。但是，要有效地使用它，您必须在传递给 HTML 参数的字符串之外定义函数onclick。

下面是一个示例：

<button onclick="foo()">Click Me!</button>
<script>
function foo() {
alert(`"Hello"`);
}
</script>