Are double and single quotes interchangeable in JavaScript?
Asked Answered
M

24

2310

Consider the following two alternatives:

  • console.log("double");
  • console.log('single');

The former uses double quotes around the string, whereas the latter uses single quotes around the string.

I see more and more JavaScript libraries out there using single quotes when handling strings.

Are these two usages interchangeable? If not, is there an advantage in using one over the other?

Miun answered 28/10, 2008 at 10:34 Comment(0)
C
1433

The most likely reason for use of single vs. double in different libraries is programmer preference and/or API consistency. Other than being consistent, use whichever best suits the string.

Using the other type of quote as a literal:

alert('Say "Hello"');
alert("Say 'Hello'");

This can get complicated:

alert("It's \"game\" time.");
alert('It\'s "game" time.');

Another option, new in ECMAScript 6, is template literals which use the backtick character:

alert(`Use "double" and 'single' quotes in the same string`);
alert(`Escape the \` back-tick character and the \${ dollar-brace sequence in a string`);

Template literals offer a clean syntax for: variable interpolation, multi-line strings, and more.

Note that JSON is formally specified to use double quotes, which may be worth considering depending on system requirements.

Cherian answered 28/10, 2008 at 10:34 Comment(11)
An important point to note with all code conventions - Define it once and stick with it. IOW, don't use double quotes someplace and single quotes elsewhere.Cyn
@Cyn - I think flexibility is OK with this one. Sure pick a preferred style, but if you need to break away from the style to save escaping lots of quotes in one string. I'd be OK with that.Gregoriagregorian
I don't think there's any reason to have to be consistent about it. There's no advantage to either one, and I don't think the readability is really affected whether or not you use ' in one place and " in another.Aeroneurosis
Javascript was designed for web programmers and its creators wanted it to be as simple and flexible as possible. So I think unbounded data types and flexibility like single quote and double quote string declaration is result of that.Missilery
The problem with consistency is that nowadays people are often reusing code snippets from the Internet or other projects, thus it is frustrating to refactor all " to ' or vice versa after each copy->paste and it might introduce some bugs if you mess up escaping. I wish the entire Internet was consistent about quotes in Javascript...Heredity
A little off-topic, but if people used correct typography, a lot of these discussions about escaping would be obsolete: alert('It’s “game” time') vs. alert("It’s “game” time") – doesn’t matter. You would only need to escape in the (rare) cases where the single or double prime sign ', " is actually appropriate.Neibart
@DarrenEvans I standardized on single-quote for JS strings because HTML uses double quotes... someElement.innerHTML = '<div class="something">etc</div>'; vs someElement.innerHTML = "<div class=\"something\">etc</div>";Ninette
Nowadays, tools like ESlint are enforcing it. So, if you have (and probably should use them btw) some styling conventions, you won't even need to ask yourself that kind of question, it will format it for you. ^^Ammoniate
Another good argument for consistency is that some (many) auto-formatters help you to enforce consistency. They even reformat code you copied from another project that uses standards different from yours.Horseleech
does single quotes use less disk drive space ? Will use of them make script smaller ?Anglosaxon
@Anglosaxon Single and double quotes are both a single character and will result in the same file size. However it's possible to reduce file size if one results in fewer escaped characters. But unless you're doing something like writing uncompressed unminified script to run on cheap/old hardware, it's negligible.Proem
O
691

If you're dealing with JSON, it should be noted that strictly speaking, JSON strings must be double quoted. Sure, many libraries support single quotes as well, but I had great problems in one of my projects before realizing that single quoting a string is in fact not according to JSON standards.

Observer answered 28/10, 2008 at 10:34 Comment(12)
This is very relevant when working with jQuery.ajax calling into an ASP.NET service (Web Service, Page Method, or MVC).Tripodic
The property names within the JSON strings must be double-quoted, but a JSON string as a whole can be single-quoted: var jsonString = '{"key1":"value1"}'; (Not that I recommend manually building JSON.)Paragon
I also found this pretty relevant when creating package.json files for node.js. jsonlint.com could be used to validate json.Backboard
You shouldn't write JSON by hand if you can .stringify() it.Talya
This is also relevant when working with multiple languages where nearly all other lanuguages (Java, C, C++, ...) use double quotes for strings and single quotes for chars. I prefer to use the same quoting across the board and so stick with double quotes for JS. With years of touch typing the extra key to shift for double quotes is entirely irrelevant, and if your coding is constrained by your typing then you need to practice typing properly.Membrane
I like Lawrence Dol's comment as it's exactly how I work. Can someone cite where in the json standard I can find Arne's assertion that only double quotes are strictly supported?Sergu
@mister270: json.org Specifically, the definition of a string, "A string is a sequence of zero or more Unicode characters, wrapped in double quotes, using backslash escapes."Alginate
Note that this applies to JSON the datatype and not POJSO that are created within JavaScript itself which accept unquoted strings, single quoted strings, and double quote strings as keys.Randolf
@JoshfromQaribou Actually I would say the opposite. If valid JSON required double-quotes, then the strings in your JavaScript should use single quotes, since this allows you to quote JSON strings without issue.Vaden
@Vaden I use single quotes everywhere myself. I was just pointing out that if you're using it together this approach makes sense. I do think double-quotes feels a bit dated, since it made sense back in the days of JSONP hackery, but now that we have proper CORS we ought to respect JSON as its own filetype. There are other things that will get you in trouble if you try to treat JSON like it's ecma anyway (unquoted props, trailing commas)Pup
As @JoshfromQaribou notes, this JSON point touches the best reason for single quotes: JSON is not JavaScript. JavaScript is easily confused with surrounding code/syntax like JSON, or Java,C,ASP,CF (server side). Using single quotes can help clarify what language (and location: client vs server side) one is in. I've strongly encouraged single quotes in JavaScript to help distinguish from server side code, a very educational pattern for newbies but also helpful to old guys, and JSON is another fine example.Tile
@CrisMooney , and when people try to use single quotes in JSON, Java, C, ASP, etc. and their code doesn't compile and such because they were encouraged to use single quotes in JavaScript instead of staying consistent across languages... What then? Javascript not being JSON doesn't mean it should go all hipster on other languages. I don't know of a single non-esoteric language that enforces the use of single quote for strings.Hairstyle
G
405

There is no one better solution; however, I would like to argue that double quotes may be more desirable at times:

  • Newcomers will already be familiar with double quotes from their language. In English, we must use double quotes " to identify a passage of quoted text. If we were to use a single quote ', the reader may misinterpret it as a contraction. The other meaning of a passage of text surrounded by the ' indicates the 'colloquial' meaning. It makes sense to stay consistent with pre-existing languages, and this may likely ease the learning and interpretation of code.

  • Double quotes eliminate the need to escape apostrophes (as in contractions). Consider the string: "I'm going to the mall", vs. the otherwise escaped version: 'I\'m going to the mall'.

  • Double quotes mean a string in many other languages. When you learn a new language like Java or C, double quotes are always used. In C single quotes are reserved for something different (char). In Ruby, PHP and Perl, single-quoted strings imply no backslash escapes while double quotes support them.

  • JSON notation is written with double quotes.

Nonetheless, as others have stated, it is most important to remain consistent.

Gearalt answered 28/10, 2008 at 10:34 Comment(10)
Your first point about English language is not always true and can change depending on the locality/house convention. Printed materials typically use single-quotes for speech and use other formatting for large blocks of quoted text. Your 'colloquial' meaning is not a useful definition of quotes for emphasis. Plus English users are in general very poor with quotation marks and apostrophes.Lunna
@JohnFerguson, for that reason alone, it may be desirable to use double-quotes so as to make that differentiation (between apostrophes and quoted passages).Gearalt
I'm all about pragmatism. Due to the fact that 1 in 100 strings that I type or uses has double quotes, and many, many more have apostrophes, I use doubles. At the end of the day, though, you should use the quote type that's 1) already in use in the project if you're a new developer to the project, or 2) use the one that you think makes more sense.Mauk
Case in point-- what I just typed (there are multiple apostrophes, no double quotes ;)Mauk
To add to @user1429980's third point, single quotes denotes a different datatype in Java and C.Reest
If you're building strings for JSON or HTML, you should use single quotes for the strings, because all the JSON properties and all the HTML attributes need double quotes. To avoid escaping them, the string must use single quotes. I find this to be the most common scenario, since JavaScript tends to work with JSON and HTML quite a bit.Kraemer
@Triynko, not necessarily; using single quotes in HTML is perfectly valid: let escapedHTML = "<section class='page-field'></section>". For JSON, you should use single quotes when building, but in Javascript (context of this question), you will likely never encounter the need to do this because you will just build the JSON with objects.Gearalt
This convinced me, and I want to add to the third point, "double quotes mean a string in many other languages". In Ruby, a string can be surrounded with single quotes or double, but in single quotes \ is not interpreted as escape (as it is in JavaScript), so using double quotes makes it easier for Ruby user to switch to JavaScript where \ means escape. Situation in Python is same as in JavaScript though.Sansbury
' is easier to confuse with `, so stick with " so that you can see ` better.Proportionate
Douglas Crockford thinks we should get rid of the single quote.Miun
A
125

Section 7.8.4 of the specification describes literal string notation. The only difference is that DoubleStringCharacter is "SourceCharacter but not double-quote" and SingleStringCharacter is "SourceCharacter but not single-quote". So the only difference can be demonstrated thusly:

'A string that\'s single quoted'

"A string that's double quoted"

So it depends on how much quote escaping you want to do. Obviously the same applies to double quotes in double quoted strings.

Ashleaashlee answered 28/10, 2008 at 10:34 Comment(6)
@Gareth: I wasn't talking about specifications though, I was talking about possible performance impact. #243313Dominate
if you're putting enough apostrophes in your code to make up for how many times you need to hit shift+' then you're doing it wrong.Hyperemia
What about "{\"name\": \"Peter\"}" vs '{"name": "Peter"}'? Admittedly, you could say this is the same difference, but it would certainly affect your decision in a different way than the example above.Ebba
@MathiasBynens - That's an interesting observation that hasn't been relevant for at least a year, and maybe as long as 6 years.Mudlark
One should use U+2019 for an apostrophe, not a vertical-single-quoteSolly
@MathiasBynens dunno what's your thoughts 9 years later.. but I would say that difference of implementation does not count as specification does, since that causes (caused?) little performance issues is some browser versions, returning expected values. If it's a bug causing unexpected behavior it'd worth a note though.Chris
D
61

I'd like to say the difference is purely stylistic, but I'm really having my doubts. Consider the following example:

/*
    Add trim() functionality to JavaScript...
      1. By extending the String prototype
      2. By creating a 'stand-alone' function
    This is just to demonstrate results are the same in both cases.
*/

// Extend the String prototype with a trim() method
String.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g, '');
};

// 'Stand-alone' trim() function
function trim(str) {
    return str.replace(/^\s+|\s+$/g, '');
};

document.writeln(String.prototype.trim);
document.writeln(trim);

In Safari, Chrome, Opera, and Internet Explorer (tested in Internet Explorer 7 and Internet Explorer 8), this will return the following:

function () {
    return this.replace(/^\s+|\s+$/g, '');
}
function trim(str) {
    return str.replace(/^\s+|\s+$/g, '');
}

However, Firefox will yield a slightly different result:

function () {
    return this.replace(/^\s+|\s+$/g, "");
}
function trim(str) {
    return str.replace(/^\s+|\s+$/g, "");
}

The single quotes have been replaced by double quotes. (Also note how the indenting space was replaced by four spaces.) This gives the impression that at least one browser parses JavaScript internally as if everything was written using double quotes. One might think, it takes Firefox less time to parse JavaScript if everything is already written according to this 'standard'.

Which, by the way, makes me a very sad panda, since I think single quotes look much nicer in code. Plus, in other programming languages, they're usually faster to use than double quotes, so it would only make sense if the same applied to JavaScript.

Conclusion: I think we need to do more research on this.

This might explain Peter-Paul Koch's test results from back in 2003.

It seems that single quotes are sometimes faster in Explorer Windows (roughly 1/3 of my tests did show a faster response time), but if Mozilla shows a difference at all, it handles double quotes slightly faster. I found no difference at all in Opera.

2014: Modern versions of Firefox/Spidermonkey don’t do this anymore.

Dominate answered 28/10, 2008 at 10:34 Comment(19)
If it's slightly faster in one browser to do it one way and slightly faster in another to do it the other way, it seems like the only guidance we can take away from that is that we should do whatever we like more because it will hurt some users and help others, and the amount of difference is likely to be imperceptible. "Premature optimization..." and all that.Diathermy
The thing is: it might be slightly faster in one browser (Firefox) while in other browsers, performance is unaffected.Dominate
I fail to see how the way Firefox prints out functions is relevant here. This doesn't really answer the question.Ineptitude
@ChristopherJamesCalo Did you actually read the answer? “[…] This gives the impression that at least one browser parses JavaScript internally as if everything was written using double quotes. One might think, it takes Firefox less time to parse JavaScript if everything is already written according to this ‘standard’.”Dominate
I'm sorry my comment was not more constructive. I'm only saying that how the browser chooses to display its internal representation of the syntax probably has very little to do with how it is parsed and therefore probably isn't a reason to prefer one type of quotes over the other. Performance data comparing parse times for single and double quotes across browsers, on the other hand, would be more compelling.Ineptitude
@ChristopherJamesCalo I’m just responding to the other comments here that claim both are the same and there’s no difference at all, other than syntax.Dominate
I don't think you should choose a coding style based on a slight difference in browser parsing speeds. Javascript parsers change and if it's faster in one and slower in the other it's not really an optimization, right? I believe that if you want to optimize your code there are probably more important things you can do than changing quotes.Weevily
@RenaatDeMuynck I never said one is faster than the other — I just pondered the question. Either way, it shouldn’t affect anyone’s coding style, but it’s still interesting to think about it.Dominate
This is an awesome answer, a break from the rest that just chirp 'They\'re the same they\'re the same'... You said "Plus, in other programming languages, they're usually faster to use than double quotes", May I ask which languages? I have used regular langs like Java and C#, never seen one other than JS that accepts string literals in single quotes. The single quote enclosures are usually used only for character constants (only one char allowed).Hinge
@Hinge I was referring to PHP. This article claims single quotes are faster than double quotes, because PHP has to interpret variables in string values with double quotes. I later heard that wasn’t true (anymore?), though.Dominate
Thanks for your reply. I haven't done anything big in PHP and I kinda dislike it. Prefer JSP over it since I'm very familiar with Java. Never touched ASP :/. Anyway I thought you were referring to a language similar to Java, C#, etc coz I haven't come across such a case.Hinge
AFAIK this was fixed in Firefox 17, Firefox used to do decompilation when doing .toString but now it returns the original copy. Modern firefox will not have this issue.Rufe
Don't know about speed differences. But I'd like to note that "This gives the impression that at least one browser parses JavaScript internally as if everything was written using double quotes." is nonsense. It UNparsed as if written with double quotes. That is it turned its internal representation (which just stores the string, not the quotes) into an human readable version, for which it happens to use one set of quotes. Anyhow, this seems to have changed, as per Benjamin's comment.Hoshi
@Hinge I know this is an old post now, but I'd just like to add that PowerShell also has a difference in how it handles single and double quote strings. When you use single quotes, you are specifying a literal string, while the use of double quotes makes PS do string interpolation, resolving the variables inside the string. Thus, I assume that single quotes are probably faster (even though it might not be noticeable really), and I think the way they represent different semantics helps when you explicitly want interpolation or not.Breastpin
Not sure if this is some bug I'm not seeing or if there's something hinky when using pattern= attribute in Chrome; I have this on a text field: pattern='((12)|([2-9]|1[01]?)(\s(([13]\/4)|(1\/2)))?)\"?' This works. Doesn't work if I use double quotes. I tried double escaping the end quote in the pattern, but that didn't work, either.Inclose
@JeffLowery In HTML " is escaped as &quot; or similar, not as \".Dominate
Actually, \" is valid in an attribute value (when I said text field, I meant input of type=text); like I said, the pattern above is working in Chrome and Firefox and I guess now I will tack on a jsFiddle example... might try &quot; as well.Inclose
@JeffLowery Of course pattern='\"' is valid but the backlash is useless there. jsfiddle.net/bL37n14j/3Dominate
"One might think, it takes Firefox less time to parse JavaScript if everything is already written according to this 'standard'." One would think wrong. It'll make no difference which quote you use as they'll both be tokenized to the same thingPiggery
U
34

If you're doing inline JavaScript (arguably a "bad" thing, but avoiding that discussion) single quotes are your only option for string literals, I believe.

E.g., this works fine:

<a onclick="alert('hi');">hi</a>

But you can't wrap the "hi" in double quotes, via any escaping method I'm aware of. Even &quot; which would have been my best guess (since you're escaping quotes in an attribute value of HTML) doesn't work for me in Firefox. " won't work either because at this point you're escaping for HTML, not JavaScript.

So, if the name of the game is consistency, and you're going to do some inline JavaScript in parts of your application, I think single quotes are the winner. Someone please correct me if I'm wrong though.

Unbosom answered 28/10, 2008 at 10:34 Comment(7)
Agreed about being arguably a bad thing, however if it must be done, I'm pretty sure URL-style encoding can be used eg <a onclick="alert(%22hi%22);">hi</a> - from memory this works, though it may have been in the href attribute instead <a href="javascript:alert(%22hi%22);">hi</a>Collapse
@Robert I'm impressed that works. Obviously that is not valid JavaScript... if you were to run it in any interpreter other than a browser, it would be a syntax error. But, interesting anyhow.Unbosom
@Tom Lianza, surely alert(&quot;hi&quot;) is not valid JavaScript. But values of attributes are encoded. w3.org/TR/html4/intro/sgmltut.html#didx-attributeLactoscope
In HTML, using single-quotes is also allowed. However, in XML (and XHTML), double-quotes must be used for attributes. That's why people (myself included) usually use only double-quotes for attributes.Plier
Agreed with @Lactoscope here. &quot; is the correct way to escape a double quote inside of an HTML attribute. It works fine in Firefox. @Denilson, XML (and therefore XHTML) allows both single and double quotes. See the AttValue literal in the XML spec at w3.org/TR/REC-xml/#d0e888.Ineptitude
About the only option thing and this specific example you could do <a onclick="alert(/hi/);">hi</a> which also add these neat / characters around your string literal.Wilde
<a onclick='alert("hi");'>hi</a>. Wrapping the HTML attribute value in a quote is possible in HTML but not commonly used.Oldwife
C
31

Technically there's no difference. It's only matter of style and convention.

Douglas Crockford1 recommends using double quotes.

I personally follow that.

Cephalic answered 28/10, 2008 at 10:34 Comment(0)
P
30

Strictly speaking, there is no difference in meaning; so the choice comes down to convenience.

Here are several factors that could influence your choice:

  • House style: Some groups of developers already use one convention or the other.
  • Client-side requirements: Will you be using quotes within the strings? (See Ady's answer.)
  • Server-side language: VB.NET people might choose to use single quotes for JavaScript so that the scripts can be built server-side (VB.NET uses double-quotes for strings, so the JavaScript strings are easy to distinguished if they use single quotes).
  • Library code: If you're using a library that uses a particular style, you might consider using the same style yourself.
  • Personal preference: You might think one or other style looks better.
Piling answered 28/10, 2008 at 10:34 Comment(0)
D
19

Just keep consistency in what you use. But don't let down your comfort level.

"This is my string."; // :-|
"I'm invincible."; // Comfortable :)
'You can\'t beat me.'; // Uncomfortable :(
'Oh! Yes. I can "beat" you.'; // Comfortable :)
"Do you really think, you can \"beat\" me?"; // Uncomfortable :(
"You're my guest. I can \"beat\" you."; // Sometimes, you've to :P
'You\'re my guest too. I can "beat" you too.'; // Sometimes, you've to :P

ECMAScript 6 update

Using template literal syntax.

`Be "my" guest. You're in complete freedom.`; // Most comfort :D
Dietitian answered 28/10, 2008 at 10:34 Comment(0)
D
17

I hope I am not adding something obvious, but I have been struggling with Django, Ajax, and JSON on this.

Assuming that in your HTML code you do use double quotes, as normally should be, I highly suggest to use single quotes for the rest in JavaScript.

So I agree with ady, but with some care.

My bottom line is:

In JavaScript it probably doesn't matter, but as soon as you embed it inside HTML or the like you start to get troubles. You should know what is actually escaping, reading, passing your string.

My simple case was:

tbox.innerHTML = tbox.innerHTML + '<div class="thisbox_des" style="width:210px;" onmouseout="clear()"><a href="/this/thislist/'
                   + myThis[i].pk +'"><img src="/site_media/'
                   + myThis[i].fields.thumbnail +'" height="80" width="80" style="float:left;" onmouseover="showThis('
                   + myThis[i].fields.left +','
                   + myThis[i].fields.right +',\''
                   + myThis[i].fields.title +'\')"></a><p style="float:left;width:130px;height:80px;"><b>'
                   + myThis[i].fields.title +'</b> '
                   + myThis[i].fields.description +'</p></div>'

You can spot the ' in the third field of showThis.

The double quote didn't work!

It is clear why, but it is also clear why we should stick to single quotes... I guess...

This case is a very simple HTML embedding, and the error was generated by a simple copy/paste from a 'double quoted' JavaScript code.

So to answer the question:

Try to use single quotes while within HTML. It might save a couple of debug issues...

Doy answered 28/10, 2008 at 10:34 Comment(1)
I ran into a similar problem with ES6 string interpolation (backticks). My build system compiled it to a double-quoted string, which broke an Auth header that had been working with single quotes!Hollands
K
14

It's mostly a matter of style and preference. There are some rather interesting and useful technical explorations in the other answers, so perhaps the only thing I might add is to offer a little worldly advice.

  • If you're coding in a company or team, then it's probably a good idea to follow the "house style".

  • If you're alone hacking a few side projects, then look at a few prominent leaders in the community. For example, let's say you getting into Node.js. Take a look at core modules, for example, Underscore.js or express and see what convention they use, and consider following that.

  • If both conventions are equally used, then defer to your personal preference.

  • If you don't have any personal preference, then flip a coin.

  • If you don't have a coin, then beer is on me ;)

Kyanite answered 28/10, 2008 at 10:34 Comment(0)
B
13

If you are using JSHint, it will raise an error if you use a double quoted string.

I used it through the Yeoman scafflholding of AngularJS, but maybe there is somehow a manner to configure this.

By the way, when you handle HTML into JavaScript, it's easier to use single quote:

var foo = '<div class="cool-stuff">Cool content</div>';

And at least JSON is using double quotes to represent strings.

There isn't any trivial way to answer to your question.

Brownley answered 28/10, 2008 at 10:34 Comment(2)
Has the implementation jshint changed? since the demo website seems to accept either without throwing any warnings/errors and I cannot find any options to constrain jshint to use either. Perhaps this answer is outdated or inaccurate?Lapin
if jshint raises an error for a double quoted string, its seriously broken. The JavaScript standard defines what is correct and not some broken linter.Biform
M
13

I am not sure if this is relevant in today's world, but double quotes used to be used for content that needed to have control characters processed and single quotes for strings that didn't.

The compiler will run string manipulation on a double quoted string while leaving a single quoted string literally untouched. This used to lead to 'good' developers choosing to use single quotes for strings that didn't contain control characters like \n or \0 (not processed within single quotes) and double quotes when they needed the string parsed (at a slight cost in CPU cycles for processing the string).

Miun answered 28/10, 2008 at 10:34 Comment(1)
It's not that things used to be done one way and now they are done another. Different languages handle quotes differently, and some work as you describe. But this is a JavaScript question. Single and double quotes are treated identically in JavaScript (except for allowing the other type of quote to be used in a string without escaping). There is no question of double quotes allowing control characters or string interpolation. JavaScript doesn't work like that. Control characters and escape sequences work the same whichever type of quote you use.Pretty
C
13

There isn't any difference between single and double quotes in JavaScript.

The specification is important:

Maybe there are performance differences, but they are absolutely minimum and can change any day according to browsers' implementation. Further discussion is futile unless your JavaScript application is hundreds of thousands lines long.

It's like a benchmark if

a=b;

is faster than

a = b;

(extra spaces)

today, in a particular browser and platform, etc.

Chromomere answered 28/10, 2008 at 10:34 Comment(3)
without spaces is faster. less characters to parse in the string. :pOtic
@pilavdzice: Yes, but is it significant? Is it only 0.0057% faster?Miun
At the end, it can be done with Webpack or alike before shipping to production (during the build), no need to have that kind of reasoning while coding. :DAmmoniate
U
11

Examining the pros and cons

In favor of single quotes

  • Less visual clutter.
  • Generating HTML: HTML attributes are usually delimited by double quotes.

elem.innerHTML = '<a href="' + url + '">Hello</a>';
However, single quotes are just as legal in HTML.

elem.innerHTML = "<a href='" + url + "'>Hello</a>";

Furthermore, inline HTML is normally an anti-pattern. Prefer templates.

  • Generating JSON: Only double quotes are allowed in JSON.

myJson = '{ "hello world": true }';

Again, you shouldn’t have to construct JSON this way. JSON.stringify() is often enough. If not, use templates.

In favor of double quotes

  • Doubles are easier to spot if you don't have color coding. Like in a console log or some kind of view-source setup.
  • Similarity to other languages: In shell programming (Bash etc.), single-quoted string literals exist, but escapes are not interpreted inside them. C and Java use double quotes for strings and single quotes for characters.
  • If you want code to be valid JSON, you need to use double quotes.

In favor of both

There is no difference between the two in JavaScript. Therefore, you can use whatever is convenient at the moment. For example, the following string literals all produce the same string:

    "He said: \"Let's go!\""
    'He said: "Let\'s go!"'
    "He said: \"Let\'s go!\""
    'He said: \"Let\'s go!\"'

Single quotes for internal strings and double for external. That allows you to distinguish internal constants from strings that are to be displayed to the user (or written to disk etc.). Obviously, you should avoid putting the latter in your code, but that can’t always be done.

Unmanly answered 28/10, 2008 at 10:34 Comment(2)
Re "inline HTML": Do you mean "inline JavaScript"?Miun
@PeterMortensen I believe they are referring to injecting HTML "in line" while writing JavaScript, rather than referring to injecting JavaScript inside an HTML line.Channelize
T
10

Talking about performance, quotes will never be your bottleneck. However, the performance is the same in both cases.

Talking about coding speed, if you use ' for delimiting a string, you will need to escape " quotes. You are more likely to need to use " inside the string. Example:

// JSON Objects:
var jsonObject = '{"foo":"bar"}';

// HTML attributes:
document.getElementById("foobar").innerHTML = '<input type="text">';

Then, I prefer to use ' for delimiting the string, so I have to escape fewer characters.

Thibodeau answered 28/10, 2008 at 10:34 Comment(0)
O
8

There are people that claim to see performance differences: old mailing list thread. But I couldn't find any of them to be confirmed.

The main thing is to look at what kind of quotes (double or single) you are using inside your string. It helps to keep the number of escapes low. For instance, when you are working with HTML content inside your strings, it is easier to use single quotes so that you don't have to escape all double quotes around the attributes.

Or answered 28/10, 2008 at 10:34 Comment(2)
Though attributes can be as well surrounded with single quotes :)Heroin
Your right, I thought that xml and xhtml prescribed double quotes surrounding attributes, but single quotes are allowed to.Or
S
7

When using CoffeeScript I use double quotes. I agree that you should pick either one and stick to it. CoffeeScript gives you interpolation when using the double quotes.

"This is my #{name}"

ECMAScript 6 is using back ticks (`) for template strings. Which probably has a good reason, but when coding, it can be cumbersome to change the string literals character from quotes or double quotes to backticks in order to get the interpolation feature. CoffeeScript might not be perfect, but using the same string literals character everywhere (double quotes) and always be able to interpolate is a nice feature.

`This is my ${name}`
Selfrenunciation answered 28/10, 2008 at 10:34 Comment(1)
To me the back tick is a clear winner in this contest, (almost) no presence inside common text strings, plus var interpolationIong
G
5

I would use double quotes when single quotes cannot be used and vice versa:

"'" + singleQuotedValue + "'"
'"' + doubleQuotedValue + '"'

Instead of:

'\'' + singleQuotedValue + '\''
"\"" + doubleQuotedValue + "\""
Guatemala answered 28/10, 2008 at 10:34 Comment(1)
What about a string containing both single quote and double quote like O'rea"llyAnthropomorphous
M
5

There is strictly no difference, so it is mostly a matter of taste and of what is in the string (or if the JavaScript code itself is in a string), to keep number of escapes low.

The speed difference legend might come from PHP world, where the two quotes have different behavior.

Mezuzah answered 28/10, 2008 at 10:34 Comment(3)
And Ruby, I may add. Python has the same behavior as JavaScript: no difference is made between single/double quotes.Heroin
Douglas Crockford thinks we should get rid of the single quote.Miun
Well, some years later, we use single quotes everywhere in our JS (actually TS) code (ou backticks, of course). That mix well with double quotes used in HTML, when you have a JS/TS code in a template (eg. in Angular).Mezuzah
O
2

You can use single quotes or double quotes.

This enables you for example to easily nest JavaScript content inside HTML attributes, without the need to escape the quotes. The same is when you create JavaScript with PHP.

The general idea is: if it is possible use such quotes that you won't need to escape.

Less escaping = better code.

Orthodontia answered 28/10, 2008 at 10:34 Comment(0)
D
2

The difference is purely stylistic. I used to be a double-quote Nazi. Now I use single quotes in nearly all cases. There's no practical difference beyond how your editor highlights the syntax.

Diathermy answered 28/10, 2008 at 10:34 Comment(4)
No practical difference? Can you prove it?Dominate
The burden of proof is on the guy asserting there's a difference when the language doesn't.Blackstone
Wisdom; the language doesn't specify a difference, which means there is no syntactical difference. However, there seems to be a cross-browser difference which appears to indicate performance implications: #243313 People saying it doesn't matter what quotes you use, are talking about syntax. I'm talking about practical implementation in different browsers.Dominate
I read your comment on that other thread. Are you serious? How much faster is JavaScript that uses double quotes? 0.00001 second per line? I think the burden of proof is on you to show a test where it matters in any significant way whether one uses double or single quotes. "One might think" isn't evidence. By the way, I used to always use double quotes until I noticed that all of the JavaScript in Apple Dashboard widgets is single quoted. If it's good enough for Apple...Diathermy
A
1

In addition, it seems the specification (currently mentioned at MDN) doesn't state any difference between single and double quotes except closing and some unescaped few characters. However, template literal (` - the backtick character) assumes additional parsing/processing.

A string literal is 0 or more Unicode code points enclosed in single or double quotes. Unicode code points may also be represented by an escape sequence. All code points may appear literally in a string literal except for the closing quote code points, U+005C (REVERSE SOLIDUS), U+000D (CARRIAGE RETURN), and U+000A (LINE FEED). Any code points may appear in the form of an escape sequence. String literals evaluate to ECMAScript String values...

Source: https://tc39.es/ecma262/#sec-literals-string-literals

Agranulocytosis answered 28/10, 2008 at 10:34 Comment(0)
E
-1

In the case where you use the JQuery library, they are not interchangeable.

Consider the example where you are appending some HTML to an element:

        $("#comment-list").append(
            "<div class='panel'><a class='panel-heading collapsed comment-item' role='tab' id='headingTwo' data-toggle='collapse' href='javascript:void(0);' onclick='bank.matter.view.commentItem_OnClick(this, event);' data-commentid='{{ID}}'>" + model.CommentDescription + "</a></div>"
        );

If you had to replace every ' with a ", you would get an error. Should you wish to use a " in this case, you would need to escape it as \".

Eddi answered 28/10, 2008 at 10:34 Comment(1)
Yes, because "abc"def" ends the string after c it's not a string that contains a ""* character. Doesn't make the quotes "different", though, neither anything at all to do with jQuery since the same can happen with 'abc'def'. You can however do 'abc"def' or `"abc'def" to avoid escaping the inner quote. Again, nothing to do with the quotes but basic syntax. Otherwise how would you know where the string ends and what to include in it?Dania

© 2022 - 2024 — McMap. All rights reserved.