'Single' vs "Double" quotes for strings in javascript
Tags: javascript, quotes, strings, tutorial
Published: 2020-11-11 08:38:53

Often while coding using javascript, you would have come across the use of 'single' or "double" quotes for strings and would have wondered, if there is any real difference between the two and if there is, is there an advantage of using one type of quote over the other? This article is going to answer just that! Read on!

## **Table of Contents**

* [Difference between the two quote styles](#section1)
* [Choosing the right quoting style](#section2)
* [Single vs Double Quotes - Pros and Cons](#section3)
* [Popular Quoting Styles](#section4)
* [Parting Words](#section5)


## **Difference between the two quoting styles**<span id = "section1"></span>

Both single (' ') and double (" ") quotes are used to represent a string in Javascript. Choosing a quoting style is up to you and there is no special semantics for one style over the other. Nevertheless, it is important to note that there is no type for a single character in javascript, everything is always a string!

```
'apple' === "apple"
```
### **Some of the other key points that both styles of quoting are as follows:**

* Whichever quoting style you open a string with, close it with the same style.
```
'apple' //correct
"apple" //correct
"apple' //incorrect
```
* The system doesn't care which one you use.
* On German, Hungarian, Austrian, and many other keyboards, you have to use the Shift key for both single or double-quotes.
* On Turkish Q keyboards, we need to press **Shift** for a single quote and not for a double quote!

## **Choosing the right quoting style**<span id = "section2"></span>


Wise selection of quoting can help you from escaping **single (') or double(")** quotes within a string. For example, if you wish to store a HTML snippet in a variable, you can use double quotes (") for HTML attribute values and use single quotes (') for enclosing the JavaScript string:

```
var div = '<div class="panel">...</div>'
```
### **Quote within a quote**

Using quotations within a string gives rise to an error. for example,

```
var message='Javascript's beauty is simplicity';

```
There is no way for the browser to know which one is the closing quote. The interpreter sees the second quote in 'Javascript's as the ending quote - so the rest of the line becomes invalid.

We can fix this by using the fact that javascript allows both single and double quotes to define a string. So in this case you can go for double-quotes.

```
var message="Javascript's beauty is simplicity";

```
An alternate method is to escape quote arks using a forward slash "\". You use a forward slash in front of the character you intend to escape. So the same message becomes:

```
var message='Javascript\'s beauty is simplicity';
```
### **Points to remember**

* A double-quoted string can have single quotes without escaping them, conversely, a single-quoted string can have double quotes within it without having to escape them.

* Double quotes ( \" ) must escape a double quote and vice versa single quotes ( \' ) must escape a single quote.

## **Single vs Double Quotes - Pros and Cons**<span id = "section3"></span>


### **Pros**

<table border="1" cellspacing="1" cellpadding="0" data-type="table">
<tbody>
<tr>
<td data-type="table-cell" data-table-id="9261e789-67d0-4cc0-823d-69f012407d4e" data-id="fd7beeec-41f3-413c-a5e4-45231e3f050a"><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Single Quotes</strong></td>
<td data-type="table-cell" data-table-id="9261e789-67d0-4cc0-823d-69f012407d4e" data-row-break="true" data-id="85cf2fd1-d81f-4f3f-931b-9540d258df5d"><strong data-type="bold">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Double Quotes</strong></td>
</tr>
<tr>
<td data-type="table-cell" data-table-id="9261e789-67d0-4cc0-823d-69f012407d4e" data-id="e258a506-1941-4adf-8e45-a5dff5fa13ba">&nbsp;Better readability for empty strings (' ') looks&nbsp; &nbsp;better than ("" "")</td>
<td data-type="table-cell" data-table-id="9261e789-67d0-4cc0-823d-69f012407d4e" data-row-break="true" data-id="ec558904-141f-4fc1-a9ae-cbcbfce91945">&nbsp;In JSON the only quoting style allowed is double quotes (" ")</td>
</tr>
<tr>
<td data-type="table-cell" data-table-id="9261e789-67d0-4cc0-823d-69f012407d4e" data-id="52d4f66b-bc30-49ab-816c-6d7edb446b9f">&nbsp;Easier if you wish to write html within javascript</td>
<td data-type="table-cell" data-table-id="9261e789-67d0-4cc0-823d-69f012407d4e" data-row-break="true" data-id="1612b7e1-05a2-4fb2-9462-43fa7faabfdc">&nbsp;Eliminates the need to escape apostrophes when writing&nbsp; &nbsp;sentences in english</td>
</tr>
</tbody>
</table>

### **Cons**

<table border="1" data-type="table">
<tbody>
<tr>
<td data-type="table-cell" data-table-id="ee9eb039-cc00-4225-a0fd-1e1e7f845fc1" data-id="608f4aa8-3030-4d80-b8c9-abdfcbc00f9f"><strong data-type="bold">&nbsp; &nbsp; Single Quotes</strong></td>
<td data-type="table-cell" data-table-id="ee9eb039-cc00-4225-a0fd-1e1e7f845fc1" data-row-break="true" data-id="f6d93557-c711-4136-a239-dc38c6672029"><strong data-type="bold">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Double Quotes</strong></td>
</tr>
<tr>
<td data-type="table-cell" data-table-id="ee9eb039-cc00-4225-a0fd-1e1e7f845fc1" data-id="9ede2dec-2fb4-4c13-b9cd-07a830d651a6">&nbsp;&nbsp;Not supported by JSON</td>
<td data-type="table-cell" data-table-id="ee9eb039-cc00-4225-a0fd-1e1e7f845fc1" data-row-break="true" data-id="7bead05c-7820-46a9-bbae-4edcbba63268">&nbsp;&nbsp;Must press an extra key (Shift) &nbsp;when wanting to use double quotes</td>
</tr>
</tbody>
</table>

## **Popular Quoting Style**<span id = "section4"></span>


Combing through a few popular JavaScript projects we can see a clear preference for **single quotes** over **double-quotes**.

<table border="1" cellspacing="1" data-type="table" data-table-id="8000c708-ea76-4bd9-acff-5c91cfea3046">
<tbody>
<tr>
<td data-type="table-cell" data-id="da14226f-ecd3-41bd-ab77-63042de5d4b9" data-table-id="8000c708-ea76-4bd9-acff-5c91cfea3046" data-row-break="false"><strong data-type="bold">&nbsp;Project</strong></td>
<td data-type="table-cell" data-id="11e9565a-e8d0-45fe-b8c3-7799f87ebfa8" data-table-id="8000c708-ea76-4bd9-acff-5c91cfea3046" data-row-break="true"><strong data-type="bold">&nbsp;Dominant quote&nbsp; &nbsp; &nbsp;style</strong></td>
</tr>
<tr>
<td data-type="table-cell" data-id="5ac34872-87d9-4ec1-b28c-61e4115413d4" data-table-id="8000c708-ea76-4bd9-acff-5c91cfea3046" data-row-break="false">&nbsp;lodash</td>
<td data-type="table-cell" data-id="057957e6-08d5-450e-898a-f9d9625f8586" data-table-id="8000c708-ea76-4bd9-acff-5c91cfea3046" data-row-break="true">&nbsp;&nbsp;<strong>'</strong>&nbsp;- 99% of quotes</td>
</tr>
<tr>
<td data-type="table-cell" data-id="7445e914-0adf-4b6d-8545-c1543425d249" data-table-id="8000c708-ea76-4bd9-acff-5c91cfea3046" data-row-break="false">&nbsp;chalk</td>
<td data-type="table-cell" data-id="92ee5be2-34f3-4d60-a648-bced99037f0b" data-table-id="8000c708-ea76-4bd9-acff-5c91cfea3046" data-row-break="true">&nbsp;&nbsp;<strong>'</strong>&nbsp;- 100% of quotes</td>
</tr>
<tr>
<td data-type="table-cell" data-id="845bf22f-bb65-4de8-8fc6-3870dfcd854a" data-table-id="8000c708-ea76-4bd9-acff-5c91cfea3046" data-row-break="false">&nbsp;react</td>
<td data-type="table-cell" data-id="fd748032-3c74-45fe-aff6-91e7c9022ded" data-table-id="8000c708-ea76-4bd9-acff-5c91cfea3046" data-row-break="true">&nbsp;&nbsp;<strong>'</strong>&nbsp;- 90% of quotes</td>
</tr>
<tr>
<td data-type="table-cell" data-id="a0cf15af-dda5-4b5b-88f8-0803c4b1648c" data-table-id="8000c708-ea76-4bd9-acff-5c91cfea3046" data-row-break="false">&nbsp;request</td>
<td data-type="table-cell" data-id="c5e4df38-3f92-42d6-a2de-23a11fa3be37" data-table-id="8000c708-ea76-4bd9-acff-5c91cfea3046" data-row-break="true">&nbsp;&nbsp;<strong>'</strong>&nbsp;- 97% of quotes</td>
</tr>
<tr>
<td data-type="table-cell" data-id="2b97eec5-875e-4549-ba3a-aebc0df0a63c" data-table-id="8000c708-ea76-4bd9-acff-5c91cfea3046" data-row-break="false">&nbsp;commander.js</td>
<td data-type="table-cell" data-id="34c69d9a-c9a5-4bc5-8b32-8336f05d47b8" data-table-id="8000c708-ea76-4bd9-acff-5c91cfea3046" data-row-break="true">&nbsp;&nbsp;<strong>'</strong>&nbsp;- 97% of quotes</td>
</tr>
<tr>
<td data-type="table-cell" data-id="11074a43-5300-4119-a5be-c9cf4dbfd976" data-table-id="8000c708-ea76-4bd9-acff-5c91cfea3046" data-row-break="false">&nbsp;moment</td>
<td data-type="table-cell" data-id="ebc4b74c-b969-4c83-a6ba-18dd33331e82" data-table-id="8000c708-ea76-4bd9-acff-5c91cfea3046" data-row-break="true">&nbsp;&nbsp;<strong>'</strong>&nbsp;- 90% of quotes</td>
</tr>
<tr>
<td data-type="table-cell" data-id="0c3505d4-8539-4afb-bdb6-84d18754578e" data-table-id="8000c708-ea76-4bd9-acff-5c91cfea3046" data-row-break="false">&nbsp;express</td>
<td data-type="table-cell" data-id="46a497ac-9bfa-4a87-bfda-88995388c599" data-table-id="8000c708-ea76-4bd9-acff-5c91cfea3046" data-row-break="true">&nbsp;&nbsp;<strong>'</strong>&nbsp;- 92% of quotes</td>
</tr>
<tr>
<td data-type="table-cell" data-id="73060fcf-f061-4684-8af7-7f26f6553a84" data-table-id="8000c708-ea76-4bd9-acff-5c91cfea3046" data-row-break="false">&nbsp;tslib</td>
<td data-type="table-cell" data-id="6e15b0a6-eed3-48a8-9614-4c0ba1f06df4" data-table-id="8000c708-ea76-4bd9-acff-5c91cfea3046" data-row-break="true">&nbsp;&nbsp;<strong>"</strong>&nbsp;- 100% of quotes</td>
</tr>
<tr>
<td data-type="table-cell" data-id="76b5229f-553e-4190-8766-ae6a6f747885" data-table-id="8000c708-ea76-4bd9-acff-5c91cfea3046" data-row-break="false">&nbsp;debug</td>
<td data-type="table-cell" data-id="85b6eeed-82af-40ba-85bf-427c4da6c627" data-table-id="8000c708-ea76-4bd9-acff-5c91cfea3046" data-row-break="true">&nbsp;&nbsp;<strong>'</strong>&nbsp;- 97% of quotes</td>
</tr>
<tr>
<td data-type="table-cell" data-id="f531b5d5-e170-4c5a-b9ed-5509cd07d652" data-table-id="8000c708-ea76-4bd9-acff-5c91cfea3046" data-row-break="false">&nbsp;node-fs-extra</td>
<td data-type="table-cell" data-id="7b35ac8b-cafe-4303-a85e-e035d6699638" data-table-id="8000c708-ea76-4bd9-acff-5c91cfea3046" data-row-break="true">&nbsp;&nbsp;<strong>'</strong>&nbsp;- 98% of quotes</td>
</tr>
<tr>
<td data-type="table-cell" data-id="0ff98363-bb2a-41ce-a99a-9943898f6db2" data-table-id="8000c708-ea76-4bd9-acff-5c91cfea3046" data-row-break="false">&nbsp;axios</td>
<td data-type="table-cell" data-id="e1041bfa-04c8-42bd-92a6-f2f5ac1095d4" data-table-id="8000c708-ea76-4bd9-acff-5c91cfea3046" data-row-break="true">&nbsp;&nbsp;<strong>'</strong>&nbsp;- 81% of quotes</td>
</tr>
</tbody>
</table>
Data obtained from https://bytearcher.com/


However, a considerable number of front-end libraries prefer double quote style which might have to do with the presence of HTML fragments.

## **Parting words**<span id = "section5"></span>


To sum it up, try to stick with one quoting style throughout. If you are confused about which one to pick, go with the widely-used single quotes. In ES6, you also have a third option to enclose strings - the `backtick` string.