是否可以用双引号替换这些单引号？

Question

我在尝试将以下代码段中的单引号 ('...') 替换为双引号 ("...") 时遇到了一些问题：

<img id="image" src="images/bird.jpg"  onmouseover="PlaySound('mySound'); this.src='images/bird_second_frame.jpg'" 
onmouseout="StopSound('mySound'); this.src='images/bird.jpg'">

每当我尝试用双引号替换单引号时，代码就会中断，而且我似乎找不到不同的解决方案。我被告知根本不要使用单引号 - 这是一个例外吗？

感谢任何帮助。

Answer 1

您不能在由 " 个字符分隔的 HTML 属性值中使用文字 "。它将过早地终止属性值。

您可以包括一个 "，但这会使代码更难阅读。

<img id="image" src="images/bird.jpg" onmouseover="PlaySound(&quot;mySound&quot;); this.src=&quot;images/bird_second_frame.jpg&quot;" onmouseout="StopSound(&quot;mySound&quot;); this.src=&quot;images/bird.jpg&quot;">

I've been told not to use single quotes at all - is this an exception?

没有。您刚刚收到了错误的建议。

JavaScript 和 HTML 不区分 ' 和 "，除非确定哪些字符可以出现在它们之间而不被转义。

在您的示例中使用 ' 更易读。

更好的方法是完全避免内联 JavaScript。

<img id="image" 
     src="images/bird.jpg"
     data-sound="mySound"
     data-frame="images/bird_second_frame.jpg">

<script>
    var element = document.getElementById("image");
    element.addEventListener("onmouseover", play);
    element.addEventListener("onmouseover", stop);

    function play() {
        PlaySound(this.dataset.sound);
        this.dataset.original = this.src;
        this.src = this.dataset.frame;
    }

    function stop() {
        StopSound(this.dataset.sound);
        this.src = this.dataset.original;
    }
</script>

Answer 2

您不能在由双引号包围的字符串中使用双引号，因为它们会结束字符串。

在这种情况下，您使用单引号看起来很合适。

Answer 3

您可以在JavaScript中自由使用单引号；它们在语法上等同于双引号字符（尽管任何单个字符串常量必须由相同类型的引号绑定）。这也适用于 HTML，因此您可以通过对属性值分隔符使用单引号来在 JavaScript 中使用双引号：

<button onclick='alert("Hello World")'>Click Me</button>

但是如果你真的想要到处都是双引号，你可以将它们转义为 HTML 个实体：

<button onclick="alert(&quot;Hello World&quot;)">Click Me</button>

这很丑陋，但它有效：HTML 解析器专门寻找引号字符。

最好的 做法是停止将 JavaScript 事件处理程序设置嵌入到 HTML 中，而完全使用 JavaScript .

是否可以用双引号替换这些单引号？

Is it possible to replace these single quotes with double quotes?

html

javascript

css

double-quotes

single-quotes