The real difference between ‘single quotes’ and “double quotes” in JavaScript

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.

Image for postPhoto by John Fornander on Unsplash

?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 “.

Image for postPhoto by Joo Silas on Unsplash

?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 (‘).

Image for postPhoto by Priscilla Du Preez on Unsplash

?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: “.

Image for postPhoto by frank mckenna on Unsplash

“Empty” === ‘Empty’

Either two double “” or single ” quote marks next to each other can represent an empty string containing no characters at all.

Image for postPhoto by Mimi Thian on Unsplash

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:

  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)”HellonWorld!” becomes `HelloWorld`

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? ?

Image for postPhoto by Greg Raines on Unsplash

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.

Image for postPhoto by Kyle Broad on Unsplash

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

Image for postPhoto by Wellington Sanipe on Unsplash

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.

Image for postPhoto by Samule Sun on Unsplash

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.

Image for post

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.

Image for postPhoto by freestocks.org on Unsplash

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.

Image for postPhoto by Eli DeFaria on Unsplash

Additional resources

  • Panu Pitkmki wrote at ByteArcher about quoting style in JavaScript:

Should I use ‘single’ or “double-quotes” for strings in JavaScript

You’ve seen both ‘single quotes’ and “double quotes” used for writing strings in JavaScript. You’re wondering if they?

bytearcher.com

  • Slate explained single and double quote use in English, in plain English:

Single Quotes or Double Quotes? It’s Really Quite Simple.

If you are an American, using quotation marks could hardly be simpler: Use double quotation marks at all times unless?

slate.com

  • Tania Rascia wrote at DigitalOcean about how to use JavaScript strings:

How To Work with Strings in JavaScript | DigitalOcean

A string is a sequence of one or more characters that may consist of letters, numbers, or symbols. Strings in?

www.digitalocean.com

  • W3Schools lists all the backslash (escape) characters in JavaScript:

JavaScript Strings

Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript?

www.w3schools.com

Image for postPhoto by Paolo Nicolello on Unsplash

1

No Responses

Write a response