Today, I’ve
asked on Twitter:
JavaScript: single quotes versus double quotes. Any preferences?
And I got great answers. Two funny examples:
- “Is this a ploy to get lots of @-replies?” – @tobie
- “Using single quotes saves bandwidth because you don’t have to send the extra pixels. #performance #truestory” – @mathias
Among the respondents, there was a slight preference for single quotes.
Examining the pros and cons
Let’s examine the arguments in favor of each kind of quote.
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.” – @wiredearp
- 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!\"'
@medikoo proposes the following convention:
Single quotes for internal strings and double for external.
Nice idea. 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.
In favor of neither
For human language, you want to use curly quotes and apostrophes. For example:
He said: “Let’s go”
That’s the typographically decent thing to do.
What do JavaScript engines prefer?
Chrome console – double quotes:
> 'abc'
< "abc"
Firefox console – double quotes:
19:39:39.659 ❙ ◀ 'abc'
19:39:39.662 ❙ ▶ "abc"
Node.js REPL – single quotes:
> "abc"
'abc'
18 comments:
This reminds me of the time I looked into how various browsers/engines `toString` a function. Firefox/Spidermonkey seems to clean up whitespace and indentation, and converts everything to use double quotes: http://stackoverflow.com/a/814376/96656
I started to use single quotes because of PHP - there is no var interpolation if using single quotes - It is also "easier" to type (no shift key required).
Strings scattered across the code are a red flag, trust no strings! http://blog.millermedeiros.com/trust-no-strings/
Cheers.
Being used to Ruby's use of doubles to create a string which can be interpolated I just always use doubles... And I find them easier to hit on the keyboard, which is only true on the german I guess ;)
You omitted the biggest reason for single quotes. Be consistent. The best developers are using single quotes. Use double quotes If you want your code to look familiar for jQuery beginner.
Btw, strings handling is another good reason for CoffeeScript. http://coffeescript.org/#strings
My proposal is actually Douglas Crockford's recommendation, which I actually like and practice.
You say you shouldn't put external strings into code, but in reality you do it quite often and it's valid, just error messages are external strings.
Oh absolutely, it happens.
Single quotes are a mark of the "best developers"? If there is one big mistake I have suffered from many times over is to do something just because "all the good developers are doing it". That reason in itself is invalid and adopting coffeescript is just another example.
Since 95% of my JS is client side backed by .NET or Python, I go the double quote route to make things read in a consistent fashion.
I use double-quotes for everything except concatenating HTML strings.
I also started using single quotes because of php, since php doesn't read variables and "\n" kind of things in single quotes, it doesn't run a parser through it, and is therefore faster than double quotes (where it does run a parser to check for variables and so on)
If you write Java code that writes Javascript, you will prefer to use single-quotes in your JavaScript. For human languages, the official apostrophe is the standard single quote U+0027. If only browsers were consistent, real quotation marks could be handled by CSS and .
“If you write Java code that writes Javascript, you will prefer to use single-quotes in your JavaScript.”
Interesting. It just goes to show: use whatever kind of quotes are appropriate for your use case.
“If only browsers were consistent, real quotation marks could be handled by CSS and the q tag.”
True, but with Unicode more or less being reliable these days, I find using “curly quotes” directly a very good solution. I have gotten used to them and find straight quotes ugly now (too computer-y).
One more single-quote pro is that you don't have to press two keys to produce the quote. Thereby increasing your productivity by 50%!
I think the only way to discover which one is better is to have a loop that will print the same line a thousand times, one with double quotes and one with single quotes, and then measure how much time it takes.
No need to get opinions of others about it - the accurate way of knowing which one is best is by experimentation.
In our organization we are trying to standardize usage of single quote for string.
single quotes all the way. Easier to type, occupy less space, more friendly to html strings.
There does not seem to be any difference between the two in recent browsers (the differences between browsers are something entirely different):
http://jsperf.com/object-literal-quotation
http://jsperf.com/quotation-marks
Post a Comment