JavaScript中需要第三种引号答案

【问题标题】：Need third kind of quotation marks in JavaScriptJavaScript中需要第三种引号
【发布时间】：2016-12-08 22:21:19
【问题描述】：

我正在使用 javascript 更改 HTML。因此，我有一个保存 HTML 代码的字符串，因为它是在 for 循环中生成的。其中有一个<a> 标签。在<a> 标记中，我想添加一个onClick，它使用保存在javascript 变量中的参数调用函数。

let parameter = "p1";
let to_html_String = "<a href='#' onClick='create_sprite_window("+parameter+")'></a>";
document.getElementById('sidebar_left_sprites').innerHTML = to_html_String;

这不起作用，因为它会产生以下 html：

<a href='#' onClick='create_sprite_window(p1)'></a>

因为p1前后没有引号所以不行。我的问题是我需要第三种引号来解决这个问题。在以下示例中，我将在需要这些引号的地方使用 #：

let parameter = "p1";
let to_html_String = "<a href='#' onClick='create_sprite_window(#"+parameter+"#)'></a>";
document.getElementById('sidebar_left_sprites').innerHTML = to_html_String;

我不能使用单引号，因为它会结束 onClick，我不能使用双引号，因为它会结束 to_html_String。

是否有第三个引号或有其他方法可以解决这个问题？

【问题讨论】：

也可以酌情使用转义字符...\'或\"

标签： javascript html quotation-marks

【解决方案1】：

这会起作用

"<a href='#' onClick='create_sprite_window('"+parameter+"')></a>";

【讨论】：

【解决方案2】：

如果你使用的是 ES6，你可以使用template stringslike

let foo = `Hello "World's"`;

无论如何 - 你为什么不直接转义引号？

let bar = 'hello \' world';
let buz = "hello \" world";

【讨论】：

【解决方案3】：

不要使用 JavaScript 构建 HTML。 DOM API 可以让您干净、安全地构建文档节点，甚至可以附加事件侦听器，因此您不必在使用 JavaScript 构建的 HTML 中构建 JavaScript 字符串。

let parameter = "p1";

const link = document.createElement('a');
link.href = '#';
link.textContent = 'maybe you want something in this link?';
link.addEventListener('click', function (e) {
    e.preventDefault();
    create_sprite_window(parameter);
});

document.getElementById('sidebar_left_sprites')
    .appendChild(link);

【讨论】：

【解决方案4】：

/* 使用 \' 区分函数单引号 */

让参数=“p1”；让 to_html_String = ""; document.getElementById('sidebar_left_sprites').innerHTML = to_html_String;

【讨论】：