Home

Published

- 3 min read

Single Quotes vs Double Quotes

img of Single Quotes vs Double Quotes

Photo by Pixabay from Pexels

If there is one past time that programmers like to engage with is having discussions about formatting. It is a question of taste, a statement of your personal style and something where only one opinion can be the right answer.

Let’s take a look at the all important question if '' is better than "".

First off is there any meaningful difference

Generally, there is no difference between using double or single quotes, as both of them represent a string in the end. W3docs

Pro Double Quotes

JavaScript Object Notation (JSON)

Unlike JavaScript the JSON Format settled this issue once and for all. Valid JSON only allows the usage of double quotes.

It is highly likely that you are going to have a .json file in your project. (like the package.json file). Your JavaScript and your JSON files would be consistent.

VSCode Default Settings

By default VSCode will format your JavaScript with double quotes. It does not look like that there is a setting to change that. You need to add a extension like eslint or prettier and then vscode will use that formatter instead of the default formatter.

For TypeScript there is the option to ‘automatically detect single or double quotes’ but in practice it still will just import them with double quotes.

Style Guides

Following Styleguides use doublequotes as default:

Easier to write English

When you use double quotes you do not have to escape apostrophes.

const buttonLabel = "JavaScript's cool print button"

However you will have to escape quotes

const uncommonButtonLabel = 'Say: "Hello World"'

Now for single quotes, obviously you will have to escape the apostrophe. In practice, in most case you are going to dealing with a lot of strings that are using quotes.

Cons Double Quotes

More keys to press

Let’s face it, a single quote is just pressing on the keyboard the '-key but when you want to use a double quote you need to press shift + '-key

Pros Single Quotes

Visually more appealing

A this is highly subjective, but some developers say:

Better readability for empty strings (’ ’) looks   better than ("" "") Flexiple.com

Styleguides

Single quotes:

The ‘HTML-String-Argument’

In the camp for pro single-quote the argument is as follows, when writing an html-string it is easier to write it with signal quotes:

const htmlString = '<a href="cool.html">Sunglasses</a>'

There are two flaws in this argument:

  1. In HTML both single-quotes and double-quotes are valid. There is the argument to be made that it is more ‘usual’ to use double-quotes (Example you open the Developer Tools in Chrome, the HTML-code will be formatted with double-quotes)
  2. If you are creating a html-template string you should be using backticks

Thus the correct way of writing a HTML-String would be as follows:

const htmlString = `<a href="cool.html">Sunglasses</a>`

Conclusion

In practice, you are probably going to be using single-quotes, because of the popular style guides like AirBnB have ‘single-quotes’ set as default.

Personally, I prefer the double-quotes, because then the quotes are everywhere consistent, double quotes in HTML, JSON and JavaScript.

It does not really matter - it is much more important that the code is formatted consistently. This should be done by ensuring your formatting with tools like ESLint and Prettier