What is the difference between ' and " in JavaScript?

Question

<button onClick="function("parameter")">Click</button>
<button onClick="function('parameter')">Click</button>

var variable = "value";
var variable = 'value';

Is there a difference?

Your code will not work as it is. If you use `'` to delimit the `onClick` string then you should use `"` to delimit the parameter string and viceversa. The code highlighting gives you a clue about this. — nico, Dec 23 '10 at 16:08
possible duplicate of [Difference between single quotes and double quotes in Javascript](http://stackoverflow.com/questions/3149192/difference-between-single-quotes-and-double-quotes-in-javascript) — user113716, Dec 23 '10 at 16:26

Oded · Accepted Answer · 2010-12-23T16:16:37.463

4

No. They are interchangeable by design.

The only requirement is that you need matching pairs (either use " or ', but not both to signify a string).

See the spec for string literals:

StringLiteral:
          " StringCharactersDQopt " 
          ' StringCharactersSQopt '

When used within HTML, you need to be careful not to use the same delimiter in HTML attributes as the javascript ones (which is why your first example is not legal).

To function correctly you would need to change it to:

<button onClick='function("parameter")'>Click</button>

edited Dec 23 '10 at 16:16

answered Dec 23 '10 at 16:06

Oded

489,969
99
883
1,009

True, although not in the way the OP used them! – nico Dec 23 '10 at 16:08
@nico - True, but only for the first example, and when mixed with HTML attributes. – Oded Dec 23 '10 at 16:10
Even in example one? Doesn't the HTML recognize it as onClick="function(" ? – DarkLightA Dec 23 '10 at 16:14
@DarkLightA - Yes, that is incorrect, as far as mixing HTML attributes with javascript, as I noted. – Oded Dec 23 '10 at 16:15
@DarkLightA: Yes, but that's not what you want. So either you write: `onclick="function('param')"` or `onclick="function(\"param\")"` or you do a much better thing and separate JS from HTML, making easier to read and mantain your code. :) – nico Dec 23 '10 at 16:17
@nico, To further reinforce your point, I'm fairly sure that `onclick="function(\"param\")"` would be parsed as `onclick="function(\"`. HTML does not treat the backslash as an escape character, instead requiring entities. You'd need to use `onclick="function("param")"`. Like you said, one of many reasons to properly separate concerns and keep scripting out of markup. – eyelidlessness Dec 26 '10 at 09:55

score 2 · Answer 2 · answered Dec 23 '10 at 16:06

2

Yes, there's a difference when you mix it with HTML like you do: the first snippet will throw an exception because you need to escape the double quotes while the second will work (that's one of the reasons why you should avoid mixing markup with javascript). In pure javascript (a separate file) there's no difference.

answered Dec 23 '10 at 16:06

Darin Dimitrov

1,023,142
271
3,287
2,928

Only because he didn't escape the inner quotes. It is still valid to use either, you just have to escape them if the inner style is supposed to print and is the same as the encapsulating style. – josh.trow Dec 23 '10 at 16:07
1

@josh.trow, I agree, he needs to escape them or even better separate javascript and markup. – Darin Dimitrov Dec 23 '10 at 16:09

PleaseStand · Answer 3 · 2010-12-26T18:19:59.190

2

The two are equivalent as long as the same one is used at both the beginning and end of the string literal. That said, choosing the correct one can avoid needless string escaping:

<button onClick="function(&quot;parameter&quot;)">Click</button> <!-- becomes -->
<button onClick="function('parameter')">Click</button>

var foo = "And the computer said: \"Hello, world!\""; // becomes
var foo = 'And the computer said: "Hello, world!"';

This has a clear advantage when using JavaScript to generate HTML, as is common in scripts using jQuery.

edited Dec 26 '10 at 18:19

answered Dec 23 '10 at 16:09

PleaseStand

31,641
6
68
95

+1 for properly using entities where others are incorrectly using a backslash. – eyelidlessness Dec 26 '10 at 09:58

score 1 · Answer 4 · answered Dec 23 '10 at 16:06

1

There is no difference. ' and " are interchangeable. Now you can't have a string like this: var my_var = 'hello world"; Opening and close quotes have to match. This does allow you to easily do: var my_variable = 'John says "I love JavaScript."' without having to escaping anything.

so this: <button onClick="function("parameter")">Click</button> won't work because you have opened and closed the onclick event prematurely "function("

answered Dec 23 '10 at 16:06

kemiller2002

113,795
27
197
251

Even in example one? Doesn't the HTML recognize it as onClick="function(" ? – DarkLightA Dec 23 '10 at 16:07
2

I can't speak for Kevin, but that looked like a typo. Your question, was "What is the difference between ' and " in JavaScript?", not "Where is the syntax error?" – Jonathan Fingland Dec 23 '10 at 16:08
They're not *quite* interchangeable. A string quoted with `'` needs to have `'` escaped within the string; a string quoted with `"` doesn't (it *can* be escaped, it just doesn't have to be). (And vice-versa, of course.) – T.J. Crowder Dec 23 '10 at 16:08
just to add, your first example could be: `` – Jonathan Fingland Dec 23 '10 at 16:09
@DarkLightA: Yes, that's how a browser would likely recognize your first example. Either single or double quotes may be used in JavaScript, but you must correctly form the string as valid HTML. – Jonathan Wood Dec 23 '10 at 16:10
@Jonathan Fingland, the backslash is not an HTML escape character. You'd need to use HTML entities. Or properly separate markup from JavaScript. – eyelidlessness Dec 26 '10 at 09:57

score 0 · Answer 5 · answered Dec 23 '10 at 16:07

0

It is the same. The only reason for having ' and " is, that you cannot nest them, for example, in given onClick example ->

onClick=" and there you need to use ' to encapsulate string "

answered Dec 23 '10 at 16:07

nothrow

15,882
9
57
104

*"...you cannot nest them..."* You can, it's just a pain. Having two kinds makes life easier. – T.J. Crowder Dec 23 '10 at 16:10

score 0 · Answer 6 · answered Dec 23 '10 at 16:30

The only time that there is a difference (that I am aware of) is in JSON: Double quotes are required around the keys and values.

And yes, everyone is right; Your first line should read like this or it will throw an error:

<button onClick='function("parameter")'>Click</button>

score 0 · Answer 7 · answered Dec 23 '10 at 16:55

I prefer to use the double quotes only (if possible) because I'm used to C like languages (C, C++, C#) where string can be wrapped only with double quotes. (Single quotes is used, but to wrap char type)

To answer the question itself: same like all others said, no real difference - guess it exists to support cases when you mix JavaScript with HTML.

What is the difference between ' and " in JavaScript?

7 Answers7