我在JavaScript中是否正确转义字符串？

Question

我正在尝试在JavaScript中创建可点击的链接。

var content = '<a href=\"#\" onclick=\"displayContent(\"TEST\")\">Whatever</a>';

$("#placeHolder").html(content);

但是我一直收到一个错误

未捕获的SyntaxError: 意外的token }

这不是转义双引号并创建链接的正确方式吗？

- CodeCrack

---

这里缺少代码。您提供的代码示例中没有}字符。 - ceejayoz

似乎原因超出了此代码片段的范围。 - Dykam

你至少正确转义了双引号 - Sam I am says Reinstate Monica

@ceejayoz，这很可能是在函数的上下文中，但我认为还缺少相关的代码。 - Dykam

正如@AdamRackis的答案所示，问题出在TEST参数周围的双引号。最终生成的onclick将会是onclick="displayContent("TEST")"而不是onclick="displayContent('TEST')". - user1106925

Answer 1

您只需要转义单引号

var content = '<a href="#" onclick="displayContent(\'TEST\')">Whatever</a>'

正如bozdoz所说：

在单引号内部需要转义单引号；在双引号内部需要转义双引号。

---

但为什么不这样做：

var content = $("<a />").attr("href", "#").text("Whatever").click(function(){
     displayContent('TEST')
});

或者像Nathan所说的那样：

var content = $('<a href="#">Whatever</a>').click(
     function() { displayContent('TEST') 
});

- Adam Rackis

---

补充一下：在单引号内部需要转义单引号，在双引号内部需要转义双引号。 - bozdoz

那似乎是有效的，但如果我将其替换为("TEST")，为什么会出现相同的错误？ - CodeCrack

@CodeCrack - 因为这样你的HTML会变成：<a href="#" onclick="displaycontent("TEST")"- 看到了吗，onclick周围的双引号正在与TEST周围的双引号产生干扰？ - Adam Rackis

@Nathan - 我认为性能不会有太大影响，但我肯定你的版本更干净。 - Adam Rackis

我认为今天我们回答了一个完全相同的问题，并且给出了完全相同类型的答案:D - Esailija

Answer 2

您可以通过创建以下元素来避免这种混乱：

var content = $( "<a>", {
    href: "#",
    text: "whatever",
    click: $.proxy( displayContent, 0, "TEST" )
});

- Esailija

---

$.proxy - 我得查一下 +1 :) - Adam Rackis

@AdamRackis 第一个参数是函数，第二个参数是上下文（0比null更短），其余的是柯里化的参数。我想柯里化是在1.6版本中添加的，甚至没有记录在案。原生的Function#bind也总是柯里化参数，所以一开始$.proxy没有这样做有点奇怪。 - Esailija

啊，我明白了柯里化（我喜欢function.bind）- 我只是没有意识到你可以像那样传递0作为null。很酷。（为什么这个没有被记录下来呢） - Adam Rackis

@AdamRackis 将 0 作为上下文传递并不等同于 null，它将被转换为一个 Number 对象，在非严格模式下调用函数时成为 this，在严格模式下仍然是一个原始值。null 在非严格模式下是 window/null，在严格模式下也是 null。 - Esailija

啊 - 代理有另一个重载，可以接受一个字符串 - 明白了。 - Adam Rackis

Answer 3

只有当引号与你的开头和结尾引号使用相同类型时，才需要转义引号。在你的例子中，你不必要地转义了双引号，因为你的字符串被单引号包裹起来。话虽如此，由于onclick语句中的双引号，解析器将对调用displayContent()产生问题。

试试这个：

var content = '<a href="#" onclick="displayContent(\'TEST\')">Whatever</a>'; 

- Nathan Taylor

Answer 4

你根本不需要转义它们！

var content = '<a href="#" onclick="displayContent(\'TEST\')">Whatever</a>'; 

$("#placeHolder").html(content); 

就像这样，您通常不需要转义"，当它嵌入到'中时。

但是，在函数参数中使用'字符时，您确实需要进行转义。

- H Bellamy

---

这样不行（您在displayContent的参数和onclick属性值中都使用了双引号）。 - James Allardice