The real difference between ‘single quotes’ and “double quotes” in JavaScript
Should I use ‘ ’ or “ ” for strings in JavaScript? The answer surprised me: either quote character is identical except for when escaping itself.
“Single quotes and double quotes behave in exactly the same way in JavaScript.” — Matthew Holman in CloudBoost
Both single quotes ('') double quotes ("") are used frequently in JavaScript to create a string literal.
A literal is another word for a value, as opposed to a reference, which would be indicated by the variable name.
There is only one difference between the use of single quotes ('') and double quotes ("") in JavaScript, and it comes down to which quote character you have to escape using the backslash (\) character: \' or \".
‘Single quotes “escape” single quotes’
When using single quotes ('') to create a string literal, the single quote character needs to be escaped using a backslash (\').
“Double quotes ‘escape’ double quotes“
When using double quotes "" to create a string literal, the double quote character needs to be escaped using a backslash: \".
"Empty" === 'Empty'
Either two double "" or single '' quote marks next to each other can represent an empty string containing no characters at all.
Are `backticks` a better solution?
An ES6 feature called template literals, backtick literals, or backticks uses backticks `` instead of a single '' or double quote "".
“Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.” — MDN Docs
Backtick (` `) literals have 3 big advantages:
- Easier string concatenation (“variable interpolation”)
"string "+variablebecomes`string ${variable}` - No need to escape (
\) single or double quotes"\"Hello World!\""becomes`"Hello World"` - Multi-line code without new line character (
\n)"Hello\nWorld!"becomes`Hello World`
Backticks also work better for HTML:
Backtick literals are just as fast as other string literals, whether or not you compile them using Babel. So why not use backticks `` instead? 😊
Don’t forget about JSON
JavaScript Object Notation (JSON), the lightweight data storage format, only allows double quotes.
If I happen to be copying back-and-forth from JavaScript to JSON files, using just double quotes helps me stay consistent.
This is pretty rare — I just try to remember to not use single quotes in JSON.
When handling JSON files from within JavaScript, the stringify() and parse() functions know about the double quotes already:
As you can see from the code snippet, single quotes break JSON parsing.
The technical reason has to do with the JSON specification (RFC 7159), which requires double quotes as the JSON string character.
What is wrong with using all 3?
Yes, there would be nothing wrong with using “ ” by default, ‘ ’ for strings including double-quotes, and ` ` for including variables or multi-lines.
It comes down to personal preference, though many people lobby for picking one and using it consistently when creating JavaScript strings.
For example, Airbnb’s style guide prefers single quotes (‘ ’), avoids double quotes (“ ”), and uses backtick literals (` `) sparingly:
6.1 Use single quotes '' for strings. — Airbnb
Use ESLint for consistency
If consistent quote style in JavaScript is important to you, like it is to the engineers at Airbnb, then it is easy to fix with ESLint:
- The ESLint
quotes rule can require the use of double quotes (default), single quotes, or backticks whenever possible. - The quotes rule can also enforce one type of quote except when the string contains a quote character that would have to be escaped otherwise.
- And finally, ESLint can require single or double quotes but still allow strings to use backtick literals.
Use prettier and stop worrying about it
An easier (or supporting) solution to using ESLint to keep quote styles consistent is to use prettier for automatic formatting.
With prettier on, the default is double quotes, but requiring single quotes is just a toggle away — at least when using prettier at CodeSandbox.io.
There is also a VSCode extension available for prettier.
My personal preference
I tend to mix double quotes and backtick literals in my code, although I have considered using backtick literals exclusively.
I use prettier with the default double quote (“ ”) setting, which I am used to.
While I understand the usefulness of consistency in coding, I do not think quote characters matter too much in the grand scheme of things.
If anything, we should consistently pick backtick literals (` `) for their advantages around interpolation and multi-line strings.
Additional resources
- Panu Pitkämäki wrote at ByteArcher about quoting style in JavaScript:
- Slate explained single and double quote use in English, in plain English:
- Tania Rascia wrote at DigitalOcean about how to use JavaScript strings:
- W3Schools lists all the backslash (escape) characters in JavaScript:
Dr. Derek Austin is the author of Career Programming: How You Can Become a Successful 6-Figure Programmer in 6 Months, now available on Amazon.