单引号和双引号的区别 (' vs ")

293

我一直在手写HTML时使用单引号。我处理很多渲染后的HTML,它们总是使用双引号。这样可以让我确定HTML是手写的还是生成的。这是一个好主意吗?

两者之间有什么区别?我知道它们都可以工作,并且所有现代浏览器都支持它们,但在不同情况下是否有真正的区别,其中一个比另一个更好?


2
相关链接:https://dev59.com/DHVC5IYBdhLWcg3wfxU8 和 https://dev59.com/QnVC5IYBdhLWcg3wnCWA。 - ЯegDwight
8
回答这个关于使用单引号还是双引号来区分手写和生成的HTML的问题,不,这可能不是一个好主意。虽然在代码中不一致(在某些地方使用单引号,在其他地方使用双引号)的代码可能是手写的,但我确信许多人(包括我自己)都会到处使用双引号,但我们的代码肯定不是计算机生成的 ;) - Doktor J
@Aito的回答确实是正确的,应该被接受...就我个人而言,我使用单引号来表示短属性,比如单个关键字/标签、URL和引用;实际上,任何不打算供人阅读的内容都可以使用单引号。对于较长的文本或包含空格、单引号/撇号(作为内容)的任何内容,我使用双引号。这只是你的风格问题(或者你使用的样式指南)。 - cedbeu
1
检查10个主要网站并查看它们大多数使用的内容,例如stackoverflow、youtube/google和wikipedia。到目前为止,我很难找到使用单引号的主要网站。 - Timo Huovinen
很多网站在HTML中使用双引号,所以请使用双引号。这也会影响HTML文档的搜索,单引号和双引号都会生效。我规范化使用双引号。 - Fauzan Edris
17个回答

423

w3.org 表示

默认情况下,SGML要求所有属性值使用双引号(ASCII十进制34)或单引号(ASCII十进制39)进行分隔。当该值由双引号标记时,可以在属性值中包含单引号,并且反之亦然。作者还可以使用数字字符引用来表示双引号(")和单引号(')。对于双引号,作者还可以使用字符实体引用"

所以...似乎没有区别。只取决于你的风格。


47
保持一致(使用单引号或双引号)很可能会使压缩率更高,特别是在服务压缩过的页面(gzip、deflate)时。 - cherouvim
8
我建议使用单人床而不是双人床——一个人的情况下,一个床位足矣完成任务。 - Ujjwal Singh
7
@cherouvim 高压缩比?我们只谈论1或2个字节的大小。哈哈,我觉得这不重要。 - John Hunt
16
@JohnHunt: 我刚对一份1823字节的js文件进行了快速测试(随机选取一个应用程序中的Backbone Model)。如果所有引号都相同(要么是',要么是"),则gzip输出的大小为809字节。混合使用它们将输出大小增加到829字节。这可能与您无关,但这并不意味着它对每个人都无关紧要。 - cherouvim
7
请问需要翻译的内容是:@Jacob Think more like 0.0001%, at most. In the real world this difference isn't worth anyone's time to even think about unless people are using morse code to transfer the data with a flashlight. 20 bytes is 160 bits. To put this into perspective, in 1962 a Bell 103 or V.21 modem could transfer this in about half a second. In 1991 with a 14.4k modem it'd take a 90th of a second. Today, on the web? It's irrelevant. Period. Integrated specialised north-pole or space comms stuff, maybe not. The web, yes, irrelevant.回答如下: 想象一下只有0.0001%的差异,最多也就这样了。在现实世界中,除非人们使用摩尔斯电码和手电筒传输数据,否则这种差异甚至不值得任何人花费时间去思考。20字节相当于160位。为了让你更好地理解,1962年的贝尔103或V.21调制解调器可以在约半秒钟内传输这么多数据。到了1991年,使用14.4k调制解调器只需1/90秒。而如今,在网络上?这种区别无关紧要,就是这样。除了北极特定专用通信设备或空间通信设备等特殊情况,网络上的这种区别都是无关紧要的。 - John Hunt
显示剩余17条评论

86

我使用"作为优先选择,使用'作为备选,我想大多数人也是这样做的。例如:

<a href="#" onclick="alert('Clicked!');">Click Me!</a>

在那个例子中,你必须同时使用它们两个,这是不可避免的。


43
我也这么做,但如果你避免将JavaScript内嵌在HTML中,就可以避免这种情况发生。 - cherouvim
5
在其他非内联JavaScript的情况下可能需要使用单引号,比如在使用自定义 data-* 属性时。根据你的应用程序和如何使用 data-* 属性,你可能需要在 " 内使用 '。有时我们会在 Google Analytics 事件跟踪中使用它们:<a href="..." data-track="Homepage Banner|Clicked|Dick's Sporting Goods">click me</a> - Jake Wilson
3
考虑以下代码:var x = "<a href='" + url + "'>点击我</a>"; - NibblyPig
4
可以这样轻松地避免:<a onclick="alert("Clicked!")">。不过,这种方式可读性较差。 - fabspro
2
我不太确定这是否是 SGML 和 HTML5 官方支持的。 - fabspro
显示剩余2条评论

43

Web开发者的引号惯例

简短回答

在HTML中,单引号(')和双引号(")是可以互换使用的,没有区别。

但建议保持一致性,并选择一种语法习惯并经常使用。

详细解答

Web开发通常涉及多种编程语言,如HTML、JS、CSS、PHP、ASP、RoR、Python等,因此我们有许多不同的编程语言语法约定。通常来自一种语言的习惯会影响到我们在其他语言中的写作风格,即使这不被认为是“正确”的(例如注释约定)。对于引号约定也是如此。

但我往往会将HTML与PHP紧密结合使用。在PHP中,单引号和双引号有重大区别。在PHP中,使用双引号“可以直接在字符串的文本中插入变量”(scriptingok.com)。而使用单引号时,“文本会按原样显示”(scriptingok.com)。

PHP处理双引号字符串需要更长时间。由于PHP解析器必须预先读取整个字符串以检测其中的任何变量,并进行串联操作,因此处理时间比单引号字符串长(scriptingok.com)。

 

单引号对服务器更友好。由于PHP无需预先读取整个字符串,因此服务器可以更快地工作(scriptingok.com)。

其他需要考虑的事项

  1. 字符串中双引号出现频率。我发现在我的字符串中,需要使用双引号(")的情况比需要在字符串中使用单引号(')的情况更多。为了减少所需的字符转义次数,我更喜欢使用单引号分隔符。
  2. 制作单引号更容易。这是相当显而易见的,但为了澄清,为什么要按多次SHIFT键呢。

我的惯例

对于 PHP 的理解,我已经设定了一个惯例(对于我和公司的其他成员),即默认情况下将字符串表示为单引号以进行服务器优化。如果需要在属性中使用引号,例如 JavaScript,则在字符串内部使用双引号,如下所示:

<button onClick='func("param");'>Press Me</button>

当然,如果我们在 PHP 中希望解析器处理字符串内的 PHP 变量,则应故意使用双引号。$a='Awesome'; $b = "Not $a";

Sources

PHP 单引号与双引号的区别。 (n.d.). 2022年3月22日从http://www.scriptingok.com/tutorial/Single-quotes-vs-double-quotes-in-PHP检索


6
在你回答这个问题之前,PHP中单引号与双引号的性能差异已经被证明为零。参考链接:https://nikic.github.io/2012/01/09/Disproving-the-Single-Quotes-Performance-Myth.html - Conor Mancone
1
你在字符串中发现了更多的双引号而不是单引号?有趣。我已经记不清上一次在我的字符串中使用双引号是什么时候了。 - Zonker.in.Geneva
在过去的10年中,作为一名全栈开发人员,我经常需要在字符串中使用双引号,比单引号多10倍。JavaScript中最常见的例子是属性选择器仅适用于双引号,因此document.querySelector("[name^='myname']")根本不起作用,而document.querySelector('[name^="myname"]')则完美地工作。 - Dustin Poissant
2
@DustinPoissant 什么??在哪个浏览器上?? - Mr Lister

20
如果不介意的话,也许使用单引号会更好,因为它不需要按住Shift键。少按键 == 减少重复性劳损伤的机会。

2
好吧,至少在银河通用布局上。(保密) - n611x007
2
RSI的风险和按键次数与编码标准有什么关系? - Dib
有关单引号和双引号之间没有区别的观点很多,但只有一种观点明确指出按键次数相差两倍。而且我们需要很多引号。我可以补充建议,双引号在我们的大脑中需要更多神经元来进行模式识别。 - Roland
我不同意。显示的字符和输入它们的方式是两个不同的事情。你个人喜欢某种需要按住Shift键才能获得双引号的输入机制并不意味着OP喜欢使用相同的输入机制。 - Damien L
不打算撒谎,RSI 是我尽可能使用单引号的主要原因。少一些小指疼痛! - JoePC

15

迄今为止我遇到的绝大多数网站,包括stackoverflow在内,都使用双引号。我认为网络上的一致性更好,所以在我看来正确答案也应该是“双引号”。 - Timo Huovinen
2
但是为什么!?为什么要用 " 而不是 '!? - San
2
主要是为了保持一致性。它遵循美式英语标准,即双引号用于引用,单引号用于子引用。 - Nielsvh

11
在HTML中,我认为使用"'不重要,但在整个文档中应始终保持一致。
我的做法是使属性/ HTML 使用 ",而所有的 JavaScript 则使用 '
这对于我来说使阅读和检查稍微容易一些。如果你的用法比我的更有意义,那么就没有必要进行更改。但对我来说,你的代码会感觉混乱。这只是个人习惯问题。

为什么需要一致地使用它?只是为了可读性吗? - timetofly
因为那样更容易避免错误。 - David Thomas
2
我经常使用"作为属性,但有时我会在编写PHP代码时更喜欢使用echo"以允许解析。如果在此echo中存在任何html属性,则使用'更易读。虽然这不是一致的,但没有所有反斜杠会更容易。 - timetofly
3
对你来说有用的方式就可以,保持一致并不意味着“总是做X”,而是表示“在情况X下以这种方式做”,一致性要考虑情境; 因此最好根据情境使用。 - David Thomas

6

我知道很多人可能不同意我的做法,但这正是我所使用的编程风格,我非常喜欢:在HTML中,除非绝对必要,否则我不使用任何引号。

例如:

<form method=post action=#>
<fieldset>
<legend>Register here: </legend>
  <label for=account>Account: </label>
  <input id=account type=text name=account required><br>
  <label for=password>Password: </label>
  <input id=password type=password name=password required><br>
...

仅当属性值或其他内容中存在空格时才使用双引号:

<form class="val1 val2 val3" method=post action=#>
  ...
</form>

1
有什么原因吗?还是你只是“真的喜欢这种编码风格”? - Bugs Bunny
4
没有引号的HTML看起来更简洁(文件大小也稍微小一些),这就是唯一的原因,没有别的。此外,我真的看不出必须每个属性都要有引号的意义所在。为什么不能省略它以节省麻烦呢?即使w3.org也接受未加引号的属性值(http://www.w3.org/TR/html-markup/syntax.html#syntax-attr-unquoted)。简单比复杂更好。难道有引号是一种宗教吗? - Randy Tang
6
没有,据我所知没有涉及宗教的内容。我对 HTML 的了解已经有一段时间了,但从未见过您使用的这种风格...因此我问了一下。 - Bugs Bunny
2
此外,HTML压缩器也会去除不必要的引号。 - Nimrod
2
忽略属性值周围的引号的问题在于不同的标准有不同的需要加引号的字符列表。例如,HTML4仅表示由字母、数字、破折号和点组成的值可以不加引号,但是HTML5表示除了空格和“'`<> = >”之外的任何内容都可以,因此您应该特别小心,尤其是对于旧浏览器! - Mr Lister
显示剩余7条评论

5
使用双引号编写HTML
即:
<div class="colorFont"></div>

使用单引号表示JavaScript字符串

例如:

$('#container').addClass('colorFont');
$('<div class="colorFont2></div>');

3

我曾遇到一个与Bootstrap有关的问题,因为单引号无法使用,所以我不得不使用双引号。

class='row-fluid'会使最后一个<span>下降到其他<span>下面,而不是在最右边与它们并排。使用class="row-fluid"就可以解决这个问题。


2

这并不影响html的内容,但如果你要使用其他编程语言动态生成html,则有一种方式可能比另一种更容易。

例如,在Java中,双引号用于表示字符串的开始和结束,因此如果要在字符串中包含双引号,则必须使用反斜杠进行转义。

String s = "<a href=\"link\">a Link</a>"

在Java中,单引号不会出现这样的问题,因此使用单引号可以使代码更易读。

String s = "<a href='link'>a Link</a>"

特别是当你需要写带有许多属性的html元素时。(注意,我通常使用像jhtml这样的库在Java中编写html,但不总是实际可行的)


在Servlet上做了两个实习。我一直在分析我的代码,直到现在才开始意识到双引号、单引号和字符串拼接的真相。我用来学习的网站在HTML中使用双引号,在Java中使用单引号。甚至没有意识到。很高兴我终于明白了... - Michael

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接