Quando usar aspas duplas ou simples em JavaScript?

console.log("double"); vs console.log('single');

Eu vejo mais e mais bibliotecas JavaScript lá fora, usando aspas simples ao manipular as seqüências de caracteres. Quais são os motivos para usar um sobre o outro? Eu pensei que eles são praticamente intercambiáveis.

O motivo mais provável para o uso de single vs double em bibliotecas diferentes é a preferência do programador e / ou a consistência da API.

Além de ser consistente, use o que melhor se adequar à string:

Usando o outro tipo de citação como um literal:

 alert('Say "Hello"'); alert("Say 'Hello'"); 

… Mas isso pode ficar complicado…

 alert("It's \"game\" time."); alert('It\'s "game" time.'); 

Outra opção, nova no ES6, são literais de modelo que usam o caractere de back-tick :

 alert(`Use "double" and 'single' quotes in the same string`); alert(`The escape the \` back-tick character in a string`); 

Os literais de modelo oferecem uma syntax limpa para: interpolação de variables, sequências de várias linhas e muito mais.

Se você está lidando com JSON, deve-se notar que, estritamente falando, strings JSON devem ser duplamente citadas. Claro, muitas bibliotecas também suportam aspas simples, mas eu tive grandes problemas em um dos meus projetos antes de perceber que a simples citação de uma string não está de fato de acordo com os padrões JSON.

Não há uma solução melhor ; no entanto, gostaria de argumentar que as aspas duplas podem ser mais desejáveis ​​às vezes:

  • Os recém-chegados já estarão familiarizados com aspas duplas de seu idioma . Em inglês, devemos usar aspas duplas " para identificar uma passagem de texto citado. Se fôssemos usar uma citação única ' , o leitor pode interpretá-la erroneamente como uma contração. O outro significado de uma passagem de texto circundada pela ' indica a “sentido coloquial” Faz sentido manter-se consistente com linguagens pré-existentes, e isso pode facilitar o aprendizado e a interpretação do código.
  • Aspas duplas eliminam a necessidade de escaping apóstrofos (como nas contrações). Considere a sequência: "I'm going to the mall" , em comparação com a versão de outra forma escapada: 'I\'m going to the mall' .
  • Aspas duplas significam uma string em muitos outros idiomas . Quando você aprende uma nova linguagem como Java ou C, as aspas duplas são sempre usadas. Em Ruby, PHP e Perl, strings entre aspas simples não implicam em escapes de barra invertida enquanto as aspas duplas as suportam.

  • A notação JSON é escrita com aspas duplas.

No entanto, como outros afirmaram, é mais importante permanecer consistente.

A única diferença é demonstrada no seguinte:

 'A string that\'s single quoted' "A string that's double quoted" 

Então, é só até quanta fuga você quer fazer. Obviamente, o mesmo se aplica às aspas duplas em strings entre aspas duplas.

Citações Únicas

Eu gostaria que as aspas duplas fossem o padrão, porque elas fazem um pouco mais de sentido , mas continuo usando aspas simples porque elas dominam a cena.

Aspas simples:

  • airbnb
  • Facebook
  • Google
  • grunhido
  • gole
  • npm (embora não definido no guia do autor)
  • wikimedia
  • wordpress
  • yandex

Sem preferência:

  • three.js

Aspas duplas:

  • Crockford
  • d3 (embora não definido em .eslintrc )
  • jquery

Eu gostaria de dizer que a diferença é puramente estilística, mas estou realmente tendo minhas dúvidas. Considere o seguinte exemplo:

 /* Add trim() functionality to JavaScript... 1. By extending the String prototype 2. By creating a 'stand-alone' function This is just to demonstrate results are the same in both cases. */ // Extend the String prototype with a trim() method String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ''); }; // 'Stand-alone' trim() function function trim(str) { return str.replace(/^\s+|\s+$/g, ''); }; document.writeln(String.prototype.trim); document.writeln(trim); 

No Safari, Chrome, Opera e Internet Explorer (testado no IE7 e IE8), isso retornará o seguinte:

 function () { return this.replace(/^\s+|\s+$/g, ''); } function trim(str) { return str.replace(/^\s+|\s+$/g, ''); } 

No entanto, o Firefox renderá um resultado ligeiramente diferente:

 function () { return this.replace(/^\s+|\s+$/g, ""); } function trim(str) { return str.replace(/^\s+|\s+$/g, ""); } 

As aspas simples foram substituídas por aspas duplas. (Observe também como o espaço de recuo foi substituído por quatro espaços). Isso dá a impressão de que pelo menos um navegador analisa o JavaScript internamente como se tudo estivesse escrito usando aspas duplas. Pode-se pensar, o Firefox leva menos tempo para analisar JavaScript se tudo já está escrito de acordo com este ‘padrão’.

O que, a propósito, me deixa um panda muito triste, já que acho que as aspas simples são mais legais no código. Além disso, em outras linguagens de programação, elas geralmente são mais rápidas de usar do que as aspas duplas, por isso só faria sentido se o mesmo fosse aplicado ao JavaScript.

Conclusão: Acho que precisamos fazer mais pesquisas sobre isso.

Edit: Isso pode explicar os resultados do teste de Peter-Paul Koch de volta em 2003.

Parece que as aspas simples às vezes são mais rápidas no Explorer Windows (aproximadamente 1/3 dos meus testes mostraram um tempo de resposta mais rápido), mas se a Mozilla mostrar uma diferença, ela manipula aspas duplas um pouco mais rápido. Não encontrei nenhuma diferença no Opera.

Edit 2014: As versões modernas do Firefox / Spidermonkey não fazem mais isso.

Se você está fazendo JavaScript embutido (possivelmente uma coisa “ruim”, mas evitando essa discussão), aspas simples são sua única opção para literais de string, acredito.

por exemplo, isso funciona bem:

 hi 

Mas você não pode envolver o “oi” entre aspas duplas, através de qualquer método de escape que eu conheça. Mesmo " qual teria sido meu melhor palpite (já que você está escapando de citações em um valor de atributo de HTML) não funciona para mim no Firefox. \" não funciona porque neste momento você está escapando para HTML, não JavaScript.

Então, se o nome do jogo é consistente, e você vai fazer algum JavaScript in-line em partes do seu aplicativo, acho que aspas simples são as vencedoras. Alguém por favor me corrija se eu estiver errado.

Tecnicamente não há diferença, é apenas questão de estilo e convenção.

Douglas Crockford recomenda o uso de aspas simples para strings internas e aspas duplas para externo (por externo queremos dizer as que serão exibidas ao usuário do aplicativo, como mensagens ou alertas).

Eu pessoalmente sigo isso.

ATUALIZAÇÃO: Parece que o Sr. Crockford mudou de idéia e agora recomenda usar aspas duplas em todo 🙂

Estritamente falando, não há diferença de significado; então a escolha se resume a conveniência.

Aqui estão vários fatores que podem influenciar sua escolha:

  • Estilo da casa: alguns grupos de desenvolvedores já usam uma convenção ou outra.
  • Requisitos do lado do cliente: você usará citações nas strings? (Veja a resposta de Ady).
  • Linguagem do lado do servidor: pessoas do VB.net podem optar por usar aspas simples para o java-script para que os scripts possam ser construídos no lado do servidor (o VB.Net usa aspas duplas para cadeias de caracteres, portanto as cadeias java-script são fáceis de distinguir se eles usam aspas simples).
  • Código da biblioteca: se você estiver usando uma biblioteca que usa um estilo específico, considere usar o mesmo estilo por conta própria.
  • Preferência pessoal: Você pode achar que um ou outro estilo parece melhor.

Vamos ver o que uma referência faz.

Dentro do jquery.js, cada string é citada com aspas duplas.

Então, começando agora, eu vou usar strings com aspas duplas. (Eu estava usando single!)

É principalmente uma questão de estilo e preferência. Há algumas explorações técnicas bastante interessantes e úteis nas outras respostas, então talvez a única coisa que eu possa acrescentar seja oferecer um pequeno conselho mundano.

  • Se você está codificando em uma empresa ou equipe, provavelmente é uma boa ideia seguir o “estilo da casa”.

  • Se você está sozinho invadindo alguns projetos paralelos, então veja alguns líderes proeminentes na comunidade. Por exemplo, digamos que você esteja entrando no Node.js. Dê uma olhada nos módulos principais, por exemplo, underscore.js ou express e veja que convenção eles usam, e considere seguir isso.

  • Se ambas as convenções são igualmente usadas, então adie ao seu
    preferência.

  • Se você não tem preferência pessoal, então lance uma moeda.

  • Se você não tem uma moeda, então a cerveja está em mim;)

Espero não estar adicionando algo óbvio, mas tenho lutado com o Django, o Ajax e o JSON.

Supondo que em seu código HTML você use aspas duplas, como normalmente deveria ser, sugiro usar aspas simples para o resto em JavaScript.

Então eu concordo com @ady mas com algum cuidado.

Minha conclusão é: em JavaScript provavelmente não importa, mas assim que você o insere em HTML ou algo parecido, você começa a ter problemas. Você deve saber o que está realmente escapando, lendo, passando sua corda.

Meu caso simples foi:

 tbox.innerHTML = tbox.innerHTML + '

' + myThis[i].fields.title +' ' + myThis[i].fields.description +'

'

Você pode manchar o \ ‘no terceiro campo de showThis.

As aspas duplas não funcionaram!

É claro por que, mas também é claro por que devemos ficar com aspas simples … .. Eu acho ..

Este caso é uma incorporação HTML muito simples, o erro foi gerado por um simples copiar / colar de um código JavaScript ‘double quoted’.

Então, para responder a pergunta:

Tente usar aspas simples enquanto estiver no HTML. Pode salvar alguns problemas de debugging …

Não tenho certeza se isso é relevante no mundo atual, mas as aspas duplas costumavam ser usadas para conteúdo que precisava ter caracteres de controle processados ​​e aspas simples para sequências de caracteres que não eram.

O compilador executará a manipulação de strings em uma string com aspas duplas, deixando uma única string entre aspas literalmente intocada. Isso costumava levar os desenvolvedores ‘bons’ a escolherem usar aspas simples para cadeias de caracteres que não continham caracteres de controle como \n ou \0 (não processados ​​entre aspas simples) e aspas duplas quando precisassem da sequência analisada (a um custo leve em ciclos de CPU para processamento da string).

Se você estiver usando o jshint , ele irá gerar um erro se você usar aspas duplas.

Eu usei-o através do Scafflholding Yeoman do AngularJS, mas talvez haja alguma forma de configurá-lo.

A propósito, quando você lida com HTML em JavaScript, é mais fácil usar aspas simples:

 var foo = '
Cool content
';

E pelo menos o JSON está usando aspas duplas para cadeias de reprensent.

Não há maneira trivial de responder à sua pergunta

Falando sobre desempenho, as cotações nunca serão o seu gargalo, no entanto, o desempenho é o mesmo em ambos os casos.

Falando sobre velocidade de codificação, se você usar ' para delimitar uma string, você precisará escaping " aspas. É mais provável que você precise usar " dentro da string, no exemplo:

 //JSON Objects: var jsonObject = '{"foo":"bar"}'; //HTML attributes: document.getElementById("foobar").innerHTML = ''; 

Então, eu prefiro usar ' para delimitar a string, então eu tenho que escaping menos caracteres.

Apenas mantenha a consistência no que você usa. Mas não desanime seu nível de conforto.

 "This is my string."; // :-| "I'm invincible."; // comfortable :) 'You can\'t beat me.'; // uncomfortable :( 'Oh! Yes. I can "beat" you.'; // comfortable :) "Do you really think, you can \"beat\" me?"; // uncomfortable :( "You're my guest. I can \"beat\" you."; // sometimes, you've to :P 'You\'re my guest too. I can "beat" you too.'; // sometimes, you've to :P 

Atualização ES6

Usando a syntax literal do modelo .

 `Be "my" guest. You're in complete freedom.`; // most comfort :D 

Um motivo (bobo) para usar aspas simples seria que elas não exigem que você pressione a tecla Shift para digitá-las, ao passo que uma aspas duplas o fazem. (Suponho que a string média não exija escape, o que é uma suposição razoável.) Agora, vamos supor que todos os dias eu codifique 200 linhas de código. Talvez nessas 200 linhas eu tenha 30 citações. Talvez digitar uma aspa dupla leve 0,1 segundos a mais do que digitar uma aspa simples (porque eu tenho que apertar a tecla Shift). Então, em qualquer dia, eu perco 3 segundos. Se eu codificar dessa maneira por 200 dias por ano durante 40 anos, então perdi 6,7 horas da minha vida. Alimento para o pensamento.

Examinando os prós e contras

Em favor de aspas simples

  • Menos desordem visual.
  • Gerando HTML: os atributos HTML geralmente são delimitados por aspas duplas.
 elem.innerHTML = 'Hello'; 

Mais uma coisa que você pode querer considerar como uma razão para a mudança de aspas duplas para aspas simples é o aumento da popularidade dos scripts do lado do servidor. Ao usar o PHP você pode passar variables ​​e analisar funções javascript usando strings e variables ​​em PHP.

Se você escrever uma string e usar aspas duplas para o seu PHP, você não terá que escaping de nenhuma daspas simples e o PHP irá recuperar automaticamente o valor das variables ​​para você.

Exemplo: eu preciso executar uma function javascript usando uma variável do meu servidor.

 public static function redirectPage( $pageLocation ) { echo ""; } 

Isso me poupa um monte de problemas em ter que lidar com a junit de strings, e eu posso efetivamente chamar um javascript do PHP. Este é apenas um exemplo, mas isso pode ser uma das várias razões pelas quais os programadores estão padronizando aspas simples em javascript.

Citação de documentos PHP : “O recurso mais importante de cadeias de caracteres com aspas duplas é o fato de que os nomes das variables ​​serão expandidos. Consulte a análise de cadeias de caracteres para obter detalhes.”

I would use double quotes when single quotes cannot be used and vice versa:

 "'" + singleQuotedValue + "'" '"' + doubleQuotedValue + '"' 

Instead of:

 '\'' + singleQuotedValue + '\'' "\"" + doubleQuotedValue + "\"" 

There is no difference between single and double quotes in JavaScript.

Specification is important:

Maybe there are performance diffs, but they are absolutely minimum and can change everyday according to browsers’ implementation. Further discussion is futile unless your JavaScript application is hundreds of thousands long.

It’s like a benchmark if

 a=b; 

is faster than

 a = b; 

(extra spaces)

today, in a particular browser and platform, etc.

When using CoffeeScript I use double quotes. I agree that you should pick either one and stick to it. CoffeeScript gives you interpolation when using the double quotes.

 "This is my #{name}" 

ES6 is using back ticks (`) for template strings. Which probably has a good reason, but when coding it can be cumbersome to change the string literals character from quotes or double quotes to back ticks in order to get the interpolation feature. CoffeeScript might not be perfect, but using the same string literals character everywhere (double quotes) and always be able to interpolate is a nice feature.

 `This is my ${name}` 

There are people that claim to see performance differences: old mailing list thread . But I couldn’t find any of them to be confirmed.

The main thing is to look at what kind of quotes (double or single) you are using inside your string. It helps to keep the number of escapes low. For instance when you are working with html inside your strings, it is easier to use single quotes so that you don’t have to escape all double quotes around the attributes.

If you’re jumping back an forth between JavaScript and C#, it’s best to train your fingers for the common convention which is double quotes.

I’ve been running the following about 20 times. And it appears that double quotes are about 20% faster.

The fun part is, if you change part 2 and part 1 around, single quotes are about 20% faster.

 //Part1 var r=''; var iTime3 = new Date().valueOf(); for(var j=0; j<1000000; j++) { r+='a'; } var iTime4 = new Date().valueOf(); alert('With single quote : ' + (iTime4 - iTime3)); //Part 2 var s=""; var iTime1 = new Date().valueOf(); for(var i=0; i<1000000; i++) { s += "a"; } var iTime2 = new Date().valueOf(); alert('With double quote: ' + (iTime2 - iTime1)); 

After reading all the answers that say it maybe be faster or maybe have advantages, I would say double quote is better or maybe faster too because Google closure compiler convert single quotes to double quotes.

There is strictly no difference, so it is mostly a matter of taste and of what is in the string (or if the JS code itself is in a string), to keep number of escapes low.

The speed difference legend might come from PHP world, where the two quotes have different behavior.

If your JS source is:

 elem.innerHTML="It\"; 

The HTML source will be:

 It's a Smiley 

or for HTML5

 It's a Smiley 

JS allows arrays like that:

 var arr=['this','that']; 

But if you stringify it, it will be for compatibly reason:

 JSON=["this","that"] 

I’m sure this takes some time.

Just to add my 2 cents: In working with both JS and PHP a few years back, I’ve become accustom to using single quotes so I can type the escape character (‘\’) without having to escape it as well. I usually used it when typing raw strings with file paths, etc. ( http://en.wikipedia.org/wiki/String_literal#Raw_strings )

Anyhow, my convention ended up becoming the use of single quotes on identifier-type raw strings, such as if (typeof s == 'string') ... (in which escape characters would never be used – ever), and double quotes for texts , such as “Hey, what’s up?”. I also use single quotes in comments as a typographical convention to show identifier names. This is just a rule of thumb, and I break off only when needed, such as when typing HTML strings ' like so ' (though you could reverse the quotes here also). I’m also aware that, in the case of JSON, double quotes are used for the names – but outside that, personally, I prefer the single quotes when escaping is never required for the text between the quotes – like document.createElement('div') .

Bottom line, and as some have mentioned/alluded to, pick a convention, stick with it, and only deviate when necessary.

You can use single quotes or double quotes. This enables you for example to easily nest javascript inside HTML attributes, without the need to escape the quotes. The same is when you create javascript with PHP.

The general idea is: if it is possible use such quotes that you won’t need to escape. Less escaping = better code.