Single quotes (‘ ’) and double quotes (“ ”) in JavaScript

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

1. Easier string concatenation (“variable interpolation”) "string "+variable becomes `string ${variable}`

2. No need to escape (\) single or double quotes "\"Hello World!\"" becomes `"Hello World"`

3. Multi-line code without new line character (\n) "Hello\nWorld!" becomes `Hello World`

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:

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.