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

Not sure if this is relevant in todays 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).

Answer 2

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.

Answer 3

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 4

If your JS source is:

elem.innerHTML="<img src='smily' alt='It\'s a Smily' style='width:50px'>";

The HTML source will be:

<img src="smiley" alt="It's a Smiley" style="width:50px">

or for HTML5

<img src=smiley alt="It's a Smiley" style=width:50px>

JS allows arrays like that:

var arr=['this','that'];

But if you stringify it, it will be for compatibly reason:

JSON=["this","that"]

I'm sure this takes some time.

Answer 5

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, in 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 less characters.

Answer 6

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.