When to Use Double or Single Quotes in JavaScript

In JavaScript, single (‘ ’) and double (“ ”) quotes are frequently used for creating a string literal.

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

There is only one difference in the usage of single and double quotes, and it comes down to what quote character you need to escape using the backslash character (\): \’ or \”. Each type of quote should escape its own type.

For instance:

"double quotes ( \" ) should escape a double quote"
'single quotes ( \' ) should escape a single quote'

But there is no need to escape the other character inside a string. Hence, a double quote can have single quotes without escaping them, and vice versa.

An important argument for single quotes is when you need to write html inside JavaScript:

  • When you use single quotes you can act as follows:
    let html = '<div id="someDiv"></div>';
  • But if you use double quotes, you need to escape every " EX :
    let html = "<div id=\"someDiv\"></div>";

    which can be pretty annoying.

  • Single quotes look better when you use them for representing an empty string '' vs "" .

The only disadvantage of single quotes that you may come up with is copying and pasting between JSON and JavaScript files: single quotes are not supported within JSON files.

On the contrary, JSON allows using double quotes only. Also, using double quotes, you get rid of apostrophes while writing English letters.

There is also an alternative and efficient solution: using backticks (` `) Using this type of quote has many advantages.

First and foremost, they allow simple string concentration (“variable interpolation”). Here is an example:

"string " + variable becomes `string ${variable}`

Secondly, there is no need to escape (\) single or double quotes. Take a look at this example:

"\"Welcome to W3Docs!\""
becomes `"Welcome to W3Docs"`

Thirdly, they allow multi-line code without new line character (\n):

"Welcome to\nW3Docs!"
`Welcome to W3Docs`

Also, they operate better for HTML; hence you can use them by default, as follows:

const value = `<div class="className"> 
<h1> Loading...</h1> 

To avoid making a choice every time you intend to write a string, we recommend you pick one of the styles described above and stick with it. Single quotes are the most common ones in contemporary programming. But, always keep in mind that JSON does not support them.

Strings and Quotes in JavaScript

The strings in JavaScript are generally used to store and manipulate text. UTF-16 is their persistent internal format. Strings are capable of representing zero or more characters, written inside quotes.

Тhere are three ways to write strings: you can write them inside single quotes, double quotes, or backticks. The quote type that is used should match on both sides. Anyway, it is possible to use all of the quotes within the same script. Strings that use single quotes and double quotes are considered effectively the same. The final and newest way of using the strings is called a template literal: it uses backticks and works the same ways as regular strings.

Do you find this helpful?

Related articles