This article aims to clarify when you should use double or single quotes while coding in JavaScript. If you have worked with JavaScript, you may know that it allows expressing string literals with both double quotes (“) and single quotes (‘).
There are many differences between double and single quotes in other programming languages. In JavaScript, both have the same qualities and are essentially the same.
Example:
Javascript
<!DOCTYPE html> <html lang="en"> <body style="text-align:center;"> <h2 style="color:green"> neveropen </h2> <h2> When should I use double or single quotes in JavaScript </h2> <p id="Using Quotes"></p> <script> // Single quote let text1 = 'James Smith'; // Double Quote let text2 = "James Smith"; document.getElementById("Using Quotes"). innerHTML = text1 + "<br>" + text2; </script> </body> </html> |
Output:
But there is only one difference between double and single quotes. In a single quoted string, double quotes are not escaped (\).
Double-quoted strings can contain single quotes without escaping (\) them. Put simply, each quote type escapes its own type.
For Example:
Javascript
<!DOCTYPE html> <html lang="en"> <body style="text-align:center;"> <h2 style="color:green"> neveropen </h2> <h2> When should I use double or single quotes in JavaScript </h2> <p id="Using Quotes"></p> <script> // Single quote let quote1 = 'Jessie said, "Goodbye"'; // Double Quote let quote2 = "The mayor told the people of his town " + "that he 'cares' about their well-being."; document.getElementById("Using Quotes"). innerHTML = quote1 + "<br>" + quote2; </script> </body> </html> |
Output:
On the other hand, if you use double quotes with double quotes and single quotes with single quotes, the code will become complicated.
For example:
Javascript
<!DOCTYPE html> <html lang="en"> <body style="text-align:center;"> <h2 style="color:green"> neveropen </h2> <h2> When should I use double or single quotes in JavaScript </h2> <p id="Using Quotes"></p> <script> // Single quote let quote1 = 'James \'hoped\' to be a profiecient programmer.'; // Double Quote let quote2 = "Jessie said that the case was \"far from over\" "; document.getElementById("Using Quotes"). innerHTML = quote1 + "<br>" + quote2; </script> </body> </html> |
Output:
Advantages of using Double Quotes in JavaScript:
- JSON (JavaScript Object Notation) only supports double quotes rather than single quotes for copying and pasting files.
- There’s no need to escape apostrophes in English Sentences while using double quotes.
Advantages of using Single Quotes in JavaScript:
- Provides better readability for empty strings.
- It is one of the most commonly used quotes among different libraries and frameworks, such as the standard npm package, gjslint, async, express, etc.
- Easier to use when writing HTML code within JavaScript.
While there is no official convention for JavaScript String Quotes, you must be consistent and use the same quote throughout the project code regarding coding style.
