When to Use Double or Single Quotes in JavaScript

Question

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

I see more and more JavaScript libraries out there using single quotes when handling strings. What are the reasons to use one over the other? I thought they're pretty much interchangeable.

Answer 1

I wouldn't say there is a preferred method, you can use either. However If you are using one form of quote in the string, you might want to use the other as the literal.

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

The most likely reason is programmer preferance / API consistency.

Answer 2

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 inside your strings, it is easier to use single quotes so that you don't have to escape all double quotes around the attributes.

Answer 3

There is strictly no difference, so it is mostly a matter of taste and of what is in the string (or if the JS 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.

Answer 4

You want to use single quotes since you'll save bandwidth by not sending the extra pixels ;).

Answer 5

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

Here are several factors that could influence your choise:

• 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 java-script so that the scripts can be built server-side (VB.Net uses double-quotes for strings, so the java-script 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 thing one or other style looks better.

Answer 6

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.

Answer 7

The only difference is demonstrated in the following:

'A string that\'s single quoted'

"a string that's double quoted"

So, it's only down to how much quote escaping you want to do. Obviously the same applies to double quotes in double quoted strings.

Answer 8

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 IE7 and IE8), 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.

Edit: 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.

Answer 9

Double quotes will wear your shift key out faster :)

Answer 10

I think it's important not to forget that while IE might have 0 extensions/toolbars installed, firefox might have some extensions installed (I'm just thinking of firebug for instance). Those extensions will have an influence on the benchmark result.

Not that it really matters since browser X is faster in getting elementstyles, while browser Y might be faster in rendering a canvas element. (hence why a browser "manufacturer" always has the fastest javascript engine)

Answer 11

A modest proposal:

Let's start a movement to change code syntax (for all programming languages) to support paired quotation marks (distinctive open and close quote symbols) such as the Guillemet (used by the French, Spanish, Italians, Norwegians, Russians, et al.) http://en.wikipedia.org/wiki/Guillemets

Any paired symbols would work, but they should be easily generated from most keyboards. Since parentheses, square brackets, curly braces, and the back quote are already in wide use for other purposes, I suggest we use double angle brackets to simulate the Guillemet << like this >>.

If we did this, we would never again need to escape a quotation mark!

Answer 12

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

ex, 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 " 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 app, I think single quotes are the winner. Someone please correct me if I'm wrong though.

Answer 13

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

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

Instead of:

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

Answer 14

there is no difference between single and double quotes in javascript.

specification is important:

maybe there are performance diffs, but they are absolutely minimum and can change everyday according to browsers' implementation. further discussion is futile unless your js application is hundreds of thousands long.

it's like benchmark if

a=b;

is faster than

a = b;

(extra spaces) today, in a particular browser and platform, etc.

Answer 15

i've been running the following about 20 times. and it appears that Double quotes are about 20% faster. Fun part is, if you change part 2 and part 1 around, Single quotes are about 20% faster.

//Part1
var r='';
var iTime3 = new Date().valueOf();
for(var j=0;j<1000000;j++){
    r+='a';
}
var iTime4 = new Date().valueOf();
alert('With single quote : ' + (iTime4 - iTime3));  

//Part 2                
var s="";
var iTime1 = new Date().valueOf();
for(var i=0;i<1000000;i++){
    s+="a";
}
var iTime2 = new Date().valueOf();
alert('With double quote : ' + (iTime2 - iTime1));