Quand utiliser des guillemets doubles ou simples en JavaScript?


1969

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

Je vois de plus en plus de bibliothèques JavaScript utiliser des guillemets simples lors de la manipulation des chaînes. Quelles sont les raisons d'utiliser l'un sur l'autre? Je pensais qu'ils étaient à peu près interchangeables.


125
qui est plus facile à lire? alerte ("Il est temps de jouer"); ou alerte ("C'est l'heure du jeu");
Ryan Miller

591
Et Ryan? alert("It's \"game\" time.");ou alert('It\'s "game" time.');?
Francisc

37
Si des guillemets simples sont toujours utilisés et parfois des guillemets doubles où le littéral contient des guillemets simples, alors nous devrons taper beaucoup moins de boutons de décalage et notre petit doigt gauche nous donnera des bénédictions. Mais oui, comme l'a dit @arne, pour JSON, il faut utiliser des guillemets doubles.
IsmailS

9
Les guillemets simples sont plus faciles à faire lorsque vous utilisez un clavier européen (les guillemets doubles correspondent à Shift + 2, ce qui n'est pas aussi simple que d'appuyer sur une seule touche à côté de votre petit doigt droit).
Arne

38
@Arne Il n'existe pas de "clavier européen". Par exemple, le clavier allemand nécessite un décalage pour les deux types de devis. (Mais les guillemets simples sont plus faciles.)
ANeves

Réponses:


1223

La raison la plus probable de l'utilisation de single vs double dans différentes bibliothèques est la préférence du programmeur et / ou la cohérence de l'API. En plus d'être cohérent, utilisez celui qui convient le mieux à la chaîne.

Utiliser l'autre type de citation comme littéral:

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

Cela peut devenir compliqué:

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

Une autre option, nouvelle dans ES6, est les littéraux de modèle qui utilisent le back-tickcaractère:

alert(`Use "double" and 'single' quotes in the same string`);
alert(`Escape the \` back-tick character and the \${ dollar-brace sequence in a string`);

Les littéraux de modèle offrent une syntaxe propre pour: interpolation variable, chaînes multi-lignes, etc.

Notez que JSON est formellement spécifié pour utiliser des guillemets doubles, ce qui peut être intéressant à considérer en fonction des exigences du système.


85
Un point important à noter avec toutes les conventions de code - Définissez-le une fois et respectez-le. IOW, n'utilisez pas de guillemets doubles quelque part et de guillemets simples ailleurs.
Cerebrus

170
@Cerebrus - Je pense que la flexibilité est OK avec celui-ci. Bien sûr, choisissez un style préféré, mais si vous devez vous éloigner du style pour enregistrer beaucoup de citations qui s'échappent dans une chaîne. Je serais d'accord avec ça.
Martin Clarke

5
Je ne pense pas qu'il y ait de raison d'être cohérent à ce sujet. Il n'y a aucun avantage à l'un ou l'autre, et je ne pense pas que la lisibilité soit vraiment affectée, que vous
utilisiez

2
@Olly Hicks, test intéressant !! Les guillemets simples sont en fait plusieurs fois plus rapides que les guillemets doubles ici dans Chrome 13 (OSX). Intéressant ...
Ricket

12
Un peu hors sujet, mais si les gens utilisaient une typographie correcte, beaucoup de ces discussions sur l'évasion seraient obsolètes: alert('It’s “game” time')vs alert("It’s “game” time")- n'a pas d'importance. Vous auriez besoin seulement d'échapper aux (rares) cas où le simple ou double signe prime ', "est en fait approprié.
jotaen

617

Si vous traitez avec JSON, il convient de noter qu'à proprement parler, les chaînes JSON doivent être entre guillemets. Bien sûr, de nombreuses bibliothèques prennent également en charge les guillemets simples, mais j'ai eu de gros problèmes dans l'un de mes projets avant de réaliser que les guillemets simples ne sont en fait pas conformes aux normes JSON.


5
Ceci est très pertinent lorsque vous travaillez avec jQuery.ajax appelant dans un service ASP.NET (service Web, méthode de page ou MVC).
Schmuli

100
Les noms de propriété dans les chaînes JSON doivent être entre guillemets, mais une chaîne JSON dans son ensemble peut être entre guillemets simples: var jsonString = '{"key1":"value1"}';(Pas que je recommande de construire manuellement JSON.)
nnnnnn

51
Vous ne devriez pas écrire JSON à la main si vous le pouvez .stringify().
Camilo Martin

23
C'est ici le meilleur argument pour toujours utiliser des guillemets doubles. JSON doit avoir des guillemets doubles. Les autres réponses donnent principalement le conseil de «être cohérent», ce qui signifie que si une partie de la langue peut forcer de manière réaliste une double citation, vous devez toujours utiliser cette citation double.
Josh de Qaribou le

18
Cela est également pertinent lorsque vous travaillez avec plusieurs langues où presque tous les autres langages (Java, C, C ++, ...) utilisent des guillemets doubles pour les chaînes et des guillemets simples pour les caractères. Je préfère utiliser la même citation dans tous les domaines et donc m'en tenir à des guillemets doubles pour JS. Avec des années de frappe tactile, la touche supplémentaire pour passer aux guillemets doubles est totalement hors de propos, et si votre codage est contraint par votre frappe, vous devez vous entraîner à taper correctement.
Lawrence Dol

336

Il n'y a pas de meilleure solution ; cependant, je voudrais faire valoir que les guillemets doubles peuvent parfois être plus souhaitables:

  • Les nouveaux arrivants connaissent déjà les doubles guillemets de leur langue . En anglais, nous devons utiliser des guillemets doubles "pour identifier un passage de texte cité. Si nous devions utiliser une seule citation ', le lecteur pourrait la mal interpréter comme une contraction. L'autre sens d'un passage de texte entouré par le 'indique le sens «familier». Il est logique de rester cohérent avec les langages préexistants, et cela peut probablement faciliter l'apprentissage et l'interprétation du code.
  • Les guillemets doubles éliminent le besoin d'échapper aux apostrophes (comme dans les contractions). Considérez la chaîne: "I'm going to the mall", par rapport à la version autrement échappé: 'I\'m going to the mall'.
  • Les guillemets doubles signifient une chaîne dans de nombreuses autres langues . Lorsque vous apprenez un nouveau langage comme Java ou C, des guillemets doubles sont toujours utilisés. En Ruby, PHP et Perl, les chaînes entre guillemets simples n'impliquent aucune fuite de barre oblique inverse tandis que les guillemets doubles les prennent en charge.

  • La notation JSON est écrite avec des guillemets doubles.

Néanmoins, comme d'autres l'ont dit, il est très important de rester cohérent.


Votre premier point sur la langue anglaise n'est pas toujours vrai et peut changer en fonction de la convention localité / maison. Les documents imprimés utilisent généralement des guillemets simples pour la parole et utilisent une autre mise en forme pour les gros blocs de texte cité. Votre sens «familier» n'est pas une définition utile des citations à souligner. De plus, les utilisateurs anglais sont en général très pauvres avec des guillemets et des apostrophes.
John Ferguson

2
@JohnFerguson, pour cette seule raison, il peut être souhaitable d'utiliser des guillemets doubles afin de faire cette différenciation (entre apostrophes et passages cités).
user1429980

Je suis tout à fait pragmatiste. Étant donné que 1 chaîne sur 100 que je tape ou utilise a des guillemets doubles, et beaucoup, beaucoup plus ont des apostrophes, j'utilise des doubles. À la fin de la journée, cependant, vous devez utiliser le type de devis 1) déjà utilisé dans le projet si vous êtes un nouveau développeur du projet, ou 2) utiliser celui qui vous semble plus logique.
dudewad

Exemple - ce que je viens de taper (il y a plusieurs apostrophes, pas de guillemets doubles;)
dudewad

FWIW - ceci est une citation d'un article de Quora: quora.com/…
theUtherSide

118

La section 7.8.4 de la spécification décrit la notation de chaîne littérale. La seule différence est que DoubleStringCharacter est «SourceCharacter but not double-quote» et SingleStringCharacter est «SourceCharacter but not single-quote». La seule différence peut donc être démontrée ainsi:

'A string that\'s single quoted'

"A string that's double quoted"

Cela dépend donc de la quantité de citation que vous souhaitez faire. Évidemment, la même chose s'applique aux guillemets doubles dans les chaînes entre guillemets doubles.


@Gareth: Je ne parlais pas de spécifications, je parlais d'un impact possible sur les performances. stackoverflow.com/questions/242813/…
Mathias Bynens

si vous mettez suffisamment d'apostrophes dans votre code pour compenser le nombre de fois que vous devez appuyer sur Maj + ', vous vous trompez.
SgtPooki

1
Et "{\"name\": \"Peter\"}"vs '{"name": "Peter"}'? Certes, vous pourriez dire que c'est la même différence, mais cela affecterait certainement votre décision d'une manière différente de l'exemple ci-dessus.
Trevor

@MathiasBynens - C'est une observation intéressante qui n'a pas été pertinente depuis au moins un an, et peut-être aussi longtemps que 6 ans.
ArtOfWarfare

4
Il faut utiliser U + 2019 pour une apostrophe, pas un guillemet simple vertical
jjg

95

Guillemets simples

Je souhaite que les guillemets doubles soient la norme, car ils ont un peu plus de sens , mais je continue à utiliser des guillemets simples car ils dominent la scène.

Guillemets simples:

Pas de préférence:

Double citation:


7
Crockford préfère désormais les guillemets doubles.
Adam Calvet Bohl

6
airbnb préfère désormais les guillemets doubles
Suraj Jain

15
@SurajJain Source? Les guides de style Airbnb et Google répertorient toujours les single comme préférés.
Alec Mev

5
@SurajJain Ah, ce sont des configurations de vérificateur de style de code, écrites en JSON, qui ne permettent pas du tout les guillemets simples. Les lire est une belle façon de comparer les choix faits par les différents projets.
Alec Mev

2
Google préfère désormais les guillemets simples
GabrielOshiro

57

Je voudrais dire que la différence est purement stylistique, mais j'ai vraiment des doutes. Prenons l'exemple suivant:

/*
   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);

Dans Safari, Chrome, Opera et Internet Explorer (testé dans IE7 et IE8), cela renverra les éléments suivants:

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

Cependant, Firefox donnera un résultat légèrement différent:

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

Les guillemets simples ont été remplacés par des guillemets doubles. (Notez également comment l'espace d'indentation a été remplacé par quatre espaces.) Cela donne l'impression qu'au moins un navigateur analyse JavaScript en interne comme si tout avait été écrit à l'aide de guillemets doubles. On pourrait penser, cela prend moins de temps à Firefox pour analyser JavaScript si tout est déjà écrit selon cette «norme».

Ce qui, en passant, fait de moi un panda très triste, car je pense que les guillemets simples sont beaucoup plus agréables dans le code. De plus, dans d'autres langages de programmation, ils sont généralement plus rapides à utiliser que les guillemets doubles, donc cela n'aurait de sens que si la même chose s'appliquait à JavaScript.

Conclusion: je pense que nous devons faire plus de recherche à ce sujet.

Edit: Cela pourrait expliquer les résultats des tests de Peter-Paul Koch datant de 2003.

Il semble que les guillemets simples soient parfois plus rapides dans Windows Explorer (environ 1/3 de mes tests ont montré un temps de réponse plus rapide), mais si Mozilla montre une différence, il gère les guillemets doubles légèrement plus rapidement. Je n'ai trouvé aucune différence à Opera.

Edit 2014: les versions modernes de Firefox / Spidermonkey ne font plus cela.


25
Si c'est un peu plus rapide dans un navigateur pour le faire dans un sens et un peu plus rapide dans un autre pour le faire dans l'autre sens, il semble que le seul conseil que nous puissions en retirer est que nous devrions faire ce que nous voulons le plus, car cela nuira à certains utilisateurs et aider les autres, et le montant de la différence est susceptible d'être imperceptible. "Optimisation prématurée ..." et tout ça.
Andrew Hedges

2
Je suis désolé que mon commentaire n'ait pas été plus constructif. Je dis seulement que la façon dont le navigateur choisit d'afficher sa représentation interne de la syntaxe a probablement très peu à voir avec la façon dont elle est analysée et n'est donc probablement pas une raison de préférer un type de guillemets à l'autre. En revanche, les données de performances comparant les temps d'analyse pour les guillemets simples et doubles entre les navigateurs seraient plus convaincantes.
Chris Calo

1
Ceci est une réponse impressionnante, une pause par rapport au reste qui gazouille simplement "Ils \ sont les mêmes, ils sont les mêmes" ... Vous avez dit "De plus, dans d'autres langages de programmation, ils sont généralement plus rapides à utiliser qu'à doubler citations " , puis-je demander quelles langues? J'ai utilisé des langages réguliers comme Java et C #, jamais vu un autre que JS qui accepte les littéraux de chaîne entre guillemets simples. Les guillemets simples sont généralement utilisés uniquement pour les constantes de caractères (un seul caractère autorisé).
ADTC

3
AFAIK, cela a été corrigé dans Firefox 17, Firefox faisait la décompilation lors de cette opération .toStringmais maintenant il retourne la copie originale. Firefox moderne n'aura pas ce problème.
Benjamin Gruenbaum

3
Je ne connais pas les différences de vitesse. Mais je voudrais noter que "cela donne l'impression qu'au moins un navigateur analyse JavaScript en interne comme si tout avait été écrit à l'aide de guillemets doubles." est un non-sens. Il n'est pas analysé comme s'il était écrit avec des guillemets doubles. C'est-à-dire qu'il a transformé sa représentation interne (qui stocke juste la chaîne, pas les guillemets) en une version lisible par l'homme, pour laquelle il se trouve qu'il utilise un ensemble de guillemets. Quoi qu'il en soit, cela semble avoir changé, selon le commentaire de Benjamin.
subsub

32

Si vous utilisez JavaScript en ligne (sans doute une «mauvaise» chose, mais en évitant cette discussion), les guillemets simples sont votre seule option pour les littéraux de chaîne, je crois.

par exemple, cela fonctionne bien:

<a onclick="alert('hi');">hi</a>

Mais vous ne pouvez pas mettre le "salut" entre guillemets doubles, via toute méthode d'échappement que je connaisse. Même &quot;ce qui aurait été ma meilleure estimation (puisque vous échappez aux guillemets dans une valeur d'attribut HTML) ne fonctionne pas pour moi dans Firefox. \"ne fonctionnera pas non plus car à ce stade, vous vous échappez pour HTML, pas pour JavaScript.

Donc, si le nom du jeu est cohérence et que vous allez faire du JavaScript en ligne dans certaines parties de votre application, je pense que les guillemets simples sont gagnants. Je vous en prie, corrigez-moi si je me trompe.


8
Convenu d'être sans doute une mauvaise chose, mais si cela doit être fait, je suis presque sûr que le codage de style URL peut être utilisé, par exemple <a onclick="alert(%22hi%22);">hi</a>- de la mémoire, cela fonctionne, bien qu'il puisse avoir été dans l'attribut href à la place<a href="javascript:alert(%22hi%22);">hi</a>
Graza

2
@PhiLho vous avez raison à ce sujet ... Je supposais que les gens écrivaient des attributs HTML entre guillemets conventionnels et n'allaient pas (1) tout convertir en gros entre guillemets simples, ou (2) mélanger et assortir les attributs entre guillemets simples et doubles. Mais oui, vous avez raison, c'est légal
Tom Lianza

4
@ Tom Lianza, alert(&quot;hi&quot;)n'est sûrement pas du JavaScript valide. Mais les valeurs des attributs sont codées. w3.org/TR/html4/intro/sgmltut.html#didx-attribute
Robert

4
D'accord avec @Robert ici. &quot;est la bonne façon d'échapper à un guillemet double à l'intérieur d'un attribut HTML. Cela fonctionne bien dans Firefox. @Denilson, XML (et donc XHTML) autorise les guillemets simples et doubles. Voir le AttValuelittéral dans la spécification XML à w3.org/TR/REC-xml/#d0e888 .
Chris Calo

1
@ Pacener: Parce que ce n'est pas faux. Il existe une convention en HTML pour mettre des attributs entre guillemets doubles.
Konrad Borowski

30

Techniquement, il n'y a pas de différence, c'est seulement une question de style et de convention.

Douglas Crockford recommande d'utiliser des guillemets simples pour les chaînes internes et des guillemets doubles pour les externes (par externes, nous entendons ceux qui doivent être affichés pour l'utilisateur de l'application, comme les messages ou les alertes).

Personnellement, je suis cela.

MISE À JOUR: Il semble que M. Crockford a changé d'avis et recommande maintenant d'utiliser des guillemets doubles :)


13
Douglas Crockford contre JQuery. Choisis ton poison.
Eric

Quel est le raisonnement de Crockford à ce sujet?
BadHorsie

1
Ceci est la convention que je respecte. C'est une préférence plus personnelle. J'aime utiliser des chaînes entre guillemets simples pour des trucs internes comme les sélecteurs jQuery et / ou des choses comme getElementById ('id') ;, j'aime juste la façon dont il ressemble aux guillemets simples. Mais, passez aux guillemets doubles pour le texte externe, car il peut souvent contenir des guillemets internes dans le texte. En outre, il permet de repérer et de différencier facilement les chaînes externes des chaînes internes si vous essayez de trouver une erreur dans l'une ou l'autre.
adimauro

3
Depuis avril 2016, Douglas Crockford recommande désormais d' utiliser uniquement des guillemets doubles, étant donné qu'en pratique, de nombreux développeurs ont trouvé la dichotomie interne versus externe difficile à utiliser.
Thunderforge

27

À strictement parler, il n'y a pas de différence de sens; donc le choix se résume à la commodité.

Voici plusieurs facteurs qui pourraient influencer votre choix:

  • Style maison: certains groupes de développeurs utilisent déjà l'une ou l'autre convention.
  • Exigences côté client: utiliserez-vous des guillemets dans les chaînes? (Voir la réponse d'Ady).
  • Langage côté serveur: les utilisateurs de VB.Net peuvent choisir d'utiliser des guillemets simples pour le script java afin que les scripts puissent être créés côté serveur (VB.Net utilise des guillemets doubles pour les chaînes, de sorte que les chaînes de script java sont faciles à distinguer s'ils utilisent des guillemets simples).
  • Code de bibliothèque: si vous utilisez une bibliothèque qui utilise un style particulier, vous pourriez envisager d'utiliser le même style vous-même.
  • Préférence personnelle: vous pourriez penser que l'un ou l'autre style est plus esthétique.

Pas vrai, 'est 00100111en binaire, tout "est 00100010en binaire. Ainsi, les guillemets doubles consomment moitié moins d'énergie que les guillemets simples. Voilà la différence.

19

Voyons ce que fait une référence.

Dans jquery.js, chaque chaîne est mise entre guillemets.

Donc, à partir de maintenant, je vais utiliser des chaînes entre guillemets doubles. (J'utilisais un single!)


11
Pourquoi ce vote est-il rejeté? C'est une question de style et le meilleur style est d'être cohérent et de suivre ceux qui vous ont précédé.
Eric

2
+1 La documentation de l'API jQuery aussi. C'est la seule raison pour laquelle j'ai opté pour des guillemets doubles. Personnellement, je pense que les réponses selon lesquelles "cela dépend de vos préférences personnelles" sont un peu erronées - il vaut mieux trouver une convention largement utilisée et la respecter. Et comme je peux vouloir copier et coller des exemples à partir de jQuery (directement ou indirectement), je ne veux pas avoir à remplacer les guillemets à chaque fois.
Steve Chambers le

2
Peut-être que jQuery n'a pas suivi les gens avant eux (ou s'en fichait vraiment, comme la plupart des autres experts). ;)
James Wilkins

14

Gardez simplement une cohérence dans ce que vous utilisez. Mais ne laissez pas tomber votre niveau de confort.

"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

Mise à jour ES6

Utilisation de la syntaxe littérale du modèle .

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

13

C'est surtout une question de style et de préférence. Il y a des explorations techniques plutôt intéressantes et utiles dans les autres réponses, donc peut-être la seule chose que je pourrais ajouter est d'offrir un petit conseil mondain.

  • Si vous codez dans une entreprise ou une équipe, alors c'est probablement une bonne idée de suivre le "style maison".

  • Si vous êtes seul à pirater quelques projets parallèles, alors regardez quelques dirigeants éminents de la communauté. Par exemple, disons que vous entrez dans Node.js. Jetez un œil aux modules de base, par exemple underscore.js ou express et voyez quelle convention ils utilisent, et envisagez de suivre cela.

  • Si les deux conventions sont également utilisées, puis defer à votre personnel
    préférence.

  • Si vous avez pas de préférence personnelle, puis retourner une pièce de monnaie.

  • Si vous n'avez pas de pièce, alors la bière est sur moi;)


13

J'espère que je n'ajoute pas quelque chose d'évident, mais j'ai eu du mal avec Django et Ajax et JSON à ce sujet.

En supposant que dans votre code HTML, vous utilisez des guillemets doubles, comme cela devrait être normalement, je suggère fortement d'utiliser des guillemets simples pour le reste en JavaScript.

Je suis donc d'accord avec @ady mais avec un peu de soin.

Ma conclusion est la suivante: en JavaScript, cela n'a probablement pas d'importance, mais dès que vous l'incorporez dans HTML ou autre, vous commencez à avoir des problèmes. Vous devez savoir ce qui s'échappe réellement, lire, passer votre chaîne.

Mon cas simple était:

tbox.innerHTML = tbox.innerHTML + '<div class="thisbox_des" style="width:210px;" onmouseout="clear()"><a href="https://stackoverflow.com/this/thislist/'
                   + myThis[i].pk +'"><img src="/site_media/'
                   + myThis[i].fields.thumbnail +'" height="80" width="80" style="float:left;" onmouseover="showThis('
                   + myThis[i].fields.left +','
                   + myThis[i].fields.right +',\''
                   + myThis[i].fields.title +'\')"></a><p style="float:left;width:130px;height:80px;"><b>'
                   + myThis[i].fields.title +'</b> '
                   + myThis[i].fields.description +'</p></div>'

Vous pouvez repérer le \ 'dans le troisième champ de showThis.

La double citation n'a pas fonctionné!

Il est clair pourquoi, mais il est également clair pourquoi nous devrions nous en tenir aux guillemets simples ... .. Je suppose ..

Ce cas est une intégration HTML très simple, l'erreur a été générée par un simple copier / coller à partir d'un code JavaScript "entre guillemets".

Donc pour répondre à la question:

Essayez d'utiliser des guillemets simples dans HTML. Cela pourrait sauver quelques problèmes de débogage ...


1
J'ai rencontré un problème similaire avec l'interpolation de chaînes ES6 (backticks). Mon système de compilation l'a compilé en une chaîne entre guillemets doubles, ce qui a cassé un en-tête Auth qui fonctionnait avec des guillemets simples!
Jay

12

Je ne sais pas si cela est pertinent dans le monde d'aujourd'hui, mais les guillemets doubles étaient utilisés pour le contenu qui devait traiter les caractères de contrôle et les guillemets simples pour les chaînes qui ne le faisaient pas.

Le compilateur exécutera la manipulation de chaînes sur une chaîne entre guillemets doubles tout en laissant une chaîne entre guillemets littéralement intacte. Cela conduisait les `` bons '' développeurs à choisir d'utiliser des guillemets simples pour les chaînes qui ne contenaient pas de caractères de contrôle comme \nou \0(non traités dans des guillemets simples) et des guillemets doubles lorsqu'ils avaient besoin de la chaîne analysée (à un faible coût dans les cycles de CPU pour traitement de la chaîne).


14
Ce n'est pas que les choses étaient faites d'une manière et maintenant elles le sont d'une autre. Différentes langues traitent les citations différemment et certaines fonctionnent comme vous le décrivez. Mais c'est une question JavaScript . Les guillemets simples et doubles sont traités de manière identique en JavaScript (sauf pour permettre à l'autre type de guillemet d'être utilisé dans une chaîne sans s'échapper). Il n'est pas question de guillemets doubles permettant des caractères de contrôle ou une interpolation de chaîne. JavaScript ne fonctionne pas comme ça. Les caractères de contrôle et les séquences d'échappement fonctionnent de la même manière, quel que soit le type de citation que vous utilisez.
Michael Geary

En tant qu'ex-programmeur Perl, c'est ce que je continue de penser bien que je sache que cela n'est pas pertinent dans JS.
zkent

12

Si vous utilisez jshint , cela générera une erreur si vous utilisez une chaîne de guillemets doubles.

Je l'ai utilisé via l'échafaudage Yeoman d'AngularJS, mais il y a peut-être une manière de configurer cela.

Soit dit en passant, lorsque vous gérez du HTML en JavaScript, il est plus facile d'utiliser des guillemets simples:

var foo = '<div class="cool-stuff">Cool content</div>';

Et au moins JSON utilise des guillemets doubles pour représenter les chaînes.

Il n'y a aucun moyen trivial de répondre à votre question


L'implémentation jshint a-t-elle changé? car le site Web de démonstration semble accepter non plus sans lancer aucun avertissement / erreur et je ne trouve aucune option pour contraindre jshint à utiliser non plus. Peut-être que cette réponse est obsolète ou inexacte?
Lea Hayes

si jshint déclenche une erreur pour une chaîne entre guillemets doubles, son sérieusement cassé. La norme JavaScript définit ce qui est correct et non un linter cassé.
Mecki

10

En parlant de performances, les devis ne seront jamais votre goulot d'étranglement, cependant, les performances sont les mêmes dans les deux cas.

En parlant de vitesse de codage, si vous utilisez 'pour délimiter une chaîne, vous devrez échapper les "guillemets. Vous êtes plus susceptible d'avoir besoin d'utiliser "à l'intérieur de la chaîne, par exemple:

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

Ensuite, je préfère utiliser 'pour délimiter la chaîne, donc je dois échapper moins de caractères.


10

Une raison (idiote) d'utiliser des guillemets simples serait qu'ils ne nécessitent pas que vous appuyiez sur la touche Maj pour les taper, contrairement à un guillemet double. (Je suppose que la chaîne moyenne ne nécessite pas d'échappement, ce qui est une hypothèse raisonnable.) Supposons maintenant que chaque jour je code 200 lignes de code. Peut-être que dans ces 200 lignes, j'ai 30 citations. Peut-être que taper un guillemet double prend 0,1 seconde de plus que de taper un guillemet simple (car je dois appuyer sur la touche Maj). Puis un jour donné, je perds 3 secondes. Si je code de cette manière 200 jours par an pendant 40 ans, alors j'ai perdu 6,7 heures de ma vie. Nourriture pour la pensée.


1
Je suppose que vous ne faites référence qu'à la disposition du clavier anglais ici ... J'en ai un en allemand, je dois appuyer sur shift pour les deux. Quoi qu'il en soit, je ne vois pas pourquoi le fait d'appuyer sur la touche Maj ajoute du temps au processus. J'appuie sur Maj avec la main gauche et j'appuie sur la touche de devis avec la droite. Ça arrive en même temps, pour moi il n'y a pas de différence.
codewandler

1
@codewandler Il faut toujours appuyer sur la touche Maj, même si vous pouvez l’appuyer en parallèle sur la touche ". Cela vous oblige à éloigner un doigt de sa position par défaut. Par exemple, supposons que vous tapez: var description = "This is a \"quick\" test";on un clavier anglais. Pour un clavier anglais, votre petit doigt doit se déplacer de la touche Maj gauche vers la touche Q sur la ligne supérieure au lieu de passer de la touche A à la touche Q. En d'autres termes, il doit parcourir deux fois la distance Je ne sais pas où se trouvent les touches sur le clavier allemand, mais je suis sûr qu'il y a un exemple analogue.
John Kurlak

2
@codewandler De plus, devoir taper shift, même si je peux le faire en parallèle, ne permet pas au petit doigt gauche de se préparer à taper le caractère suivant après "dans ce que vous tapez.
John Kurlak

1
L'idée de «perte de temps» est un peu idiote, mais l'idée d'une tension moins ergonomique (en particulier à l'ère du syndrome du tunnel carpien, etc.), en fait un bon gain, surtout dans les cas où cela n'a pas d'importance autrement. Compte tenu de plus de 1 000 lignes de code par jour, cela pourrait permettre d'économiser des centaines de virages quotidiens.
Beejor

9

Examiner les avantages et les inconvénients

En faveur des guillemets simples

  • Moins d'encombrement visuel.
  • Génération de HTML: les attributs HTML sont généralement délimités par des guillemets doubles.

elem.innerHTML = '<a href="' + url + '">Hello</a>';
Cependant, les guillemets simples sont tout aussi légaux en HTML.

elem.innerHTML = "<a href='" + url + "'>Hello</a>";

De plus, le HTML en ligne est normalement un anti-modèle. Préférez les modèles.

  • Génération de JSON: seuls les guillemets doubles sont autorisés dans JSON.

myJson = '{ "hello world": true }';

Encore une fois, vous ne devriez pas avoir à construire JSON de cette façon. JSON.stringify () suffit souvent. Sinon, utilisez des modèles.

En faveur des guillemets doubles

  • Les doubles sont plus faciles à repérer si vous n'avez pas de code couleur. Comme dans un journal de console ou une sorte de configuration de source de vue.
  • Similitude avec d'autres langages: dans la programmation shell (Bash etc.), des littéraux de chaîne entre guillemets simples existent, mais les échappements ne sont pas interprétés à l'intérieur. C et Java utilisent des guillemets doubles pour les chaînes et des guillemets simples pour les caractères.
  • Si vous voulez que le code soit JSON valide, vous devez utiliser des guillemets doubles.

En faveur des deux

Il n'y a aucune différence entre les deux en JavaScript. Par conséquent, vous pouvez utiliser tout ce qui vous convient en ce moment. Par exemple, les littéraux de chaîne suivants produisent tous la même chaîne:

    "He said: \"Let's go!\""
    'He said: "Let\'s go!"'
    "He said: \"Let\'s go!\""
    'He said: \"Let\'s go!\"'

Citations simples pour les chaînes internes et doubles pour les externes. Cela vous permet de distinguer les constantes internes des chaînes qui doivent être affichées pour l'utilisateur (ou écrites sur le disque, etc.). Évidemment, vous devriez éviter de mettre ce dernier dans votre code, mais cela ne peut pas toujours être fait.


8

Une autre chose que vous voudrez peut-être considérer comme une raison du passage des guillemets doubles aux guillemets simples est l'augmentation de la popularité des scripts côté serveur. Lorsque vous utilisez PHP, vous pouvez transmettre des variables et analyser des fonctions javascript en utilisant des chaînes et des variables en PHP.

Si vous écrivez une chaîne et utilisez des guillemets doubles pour votre PHP, vous n'aurez pas à échapper à l'un des guillemets simples et PHP récupérera automatiquement la valeur des variables pour vous.

Exemple: j'ai besoin d'exécuter une fonction javascript en utilisant une variable de mon serveur.

public static function redirectPage( $pageLocation )
{
    echo "<script type='text/javascript'>window.location = '$pageLocation';</script>";
}

Cela me permet d'économiser beaucoup de tracas pour avoir à gérer la jonction de chaînes, et je peux effectivement appeler un javascript depuis PHP. Ce n'est qu'un exemple, mais cela peut être l'une des nombreuses raisons pour lesquelles les programmeurs utilisent par défaut des guillemets simples en javascript.

Citation de documents PHP : "La caractéristique la plus importante des chaînes entre guillemets doubles est le fait que les noms de variables seront développés. Voir l'analyse des chaînes pour plus de détails."


+1, je le fais dans mon projet MVC.Net afin que les guillemets doubles de C # n'interfèrent pas avec les guillemets simples de javascript, et vice-versa.
DCShannon

3
Je pense que si vous écrivez JavaScript sur votre page à partir d'une méthode de classe PHP, vous avez de plus gros problèmes.
BadHorsie

6

Il y a des gens qui prétendent voir des différences de performances: l' ancien fil de la liste de diffusion . Mais je n'ai trouvé aucun d'entre eux à confirmer.

L'essentiel est de regarder quel type de guillemets (double ou simple) vous utilisez dans votre chaîne. Cela aide à maintenir un faible nombre de sorties. Par exemple, lorsque vous travaillez avec du HTML dans vos chaînes, il est plus facile d'utiliser des guillemets simples pour ne pas avoir à échapper tous les guillemets doubles autour des attributs.


Bien que les attributs puissent également être entourés de guillemets simples :)
Damir Zekić

Votre droite, je pensais que xml et xhtml prescrivaient des guillemets doubles entourant les attributs, mais les guillemets simples sont autorisés à.
Michiel Overeem

6

J'utiliserais des guillemets doubles lorsque les guillemets simples ne peuvent pas être utilisés et vice versa:

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

Au lieu de:

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

Qu'en est-il d'une chaîne contenant à la fois des guillemets simples et des guillemets doubles comme O'rea "lly
sudhAnsu63

6

Il n'y a aucune différence entre les guillemets simples et doubles en JavaScript.

La spécification est importante:

Il existe peut-être des différences de performances, mais elles sont absolument minimales et peuvent changer tous les jours en fonction de la mise en œuvre des navigateurs. Une discussion plus approfondie est vaine à moins que votre application JavaScript ne soit longue de plusieurs centaines de milliers.

C'est comme une référence si

a=b;

est plus rapide que

a = b;

(espaces supplémentaires)

aujourd'hui, dans un navigateur et une plateforme particuliers, etc.


2
sans espaces est plus rapide. moins de caractères à analyser dans la chaîne. : p
pilavdzice

6

Lorsque j'utilise CoffeeScript, j'utilise des guillemets doubles. Je suis d'accord que vous devez en choisir un et vous y tenir. CoffeeScript vous donne une interpolation lors de l'utilisation des guillemets doubles.

"This is my #{name}"

ES6 utilise des tiques inversées (`) pour les chaînes de modèle. Ce qui a probablement une bonne raison, mais lors du codage, il peut être fastidieux de changer le caractère littéral de chaîne de guillemets ou de guillemets doubles pour revenir en arrière afin d'obtenir la fonction d'interpolation. CoffeeScript n'est peut-être pas parfait, mais utiliser le même caractère littéral de chaîne partout (guillemets doubles) et toujours pouvoir interpoler est une fonctionnalité intéressante.

`This is my ${name}`

Pour moi, la tique arrière est clairement gagnante dans ce concours, (presque) aucune présence dans les chaînes de texte courantes, plus l'interpolation var
Simone Poggi

5

Si vous sautez en arrière entre JavaScript et C #, il est préférable de former vos doigts pour la convention commune qui est les guillemets doubles.


5

J'ai exécuté les opérations suivantes environ 20 fois. Et il semble que les guillemets doubles soient environ 20% plus rapides.

La partie amusante est que si vous modifiez la partie 2 et la partie 1, les guillemets simples sont environ 20% plus rapides.

//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));

31
Autrement dit, vous avez constaté que le code le plus récent s'exécute le plus rapidement. C'est le problème lors de la réalisation de micro-benchmarks. Vous devez tenir compte du moteur JS optimisant le code lors de son exécution. (Vous verrez ce même effet lors de l'analyse comparative de Java en raison du fonctionnement du JIT.)
David Phillips

4
première nouvelle date est lente, ajouter var dummy_date = new Date()au début
Lauri

1
Le niveau de micro-optimisation ici est si stupide que vous pourriez également affirmer que les guillemets simples sont plus rapides à taper, ce qui conduit à un développement plus rapide.
Beejor

4

Il n'y a strictement aucune différence, donc c'est principalement une question de goût et de ce qui est dans la chaîne (ou si le code JS lui-même est dans une chaîne), pour maintenir un nombre bas d'échappements.

La légende de la différence de vitesse peut provenir du monde PHP, où les deux guillemets ont un comportement différent.


Et Ruby, je peux ajouter. Python a le même comportement que JavaScript: aucune différence n'est faite entre les guillemets simples / doubles.
Damir Zekić

4

Après avoir lu toutes les réponses qui disent que cela peut être plus rapide ou peut-être avoir des avantages, je dirais que les guillemets doubles sont meilleurs ou peut-être aussi plus rapides parce que le compilateur de fermeture Google convertit les guillemets simples en guillemets doubles.


Savez-vous pourquoi il fait ça?
ma11hew28

Je ne sais pas. C'est peut-être une convention de codage et rien de spécial.
Mohsen

4

Maintenant que nous sommes en 2020, nous devrions envisager une troisième option pour Javascript: le seul backtick pour tout.

Cela peut être utilisé partout au lieu de guillemets simples ou doubles.

Cela vous permet de tout faire!

  1. Intégrez des guillemets simples à l'intérieur: "C'est génial!"
  2. Intégrez des guillemets doubles à l'intérieur: `C'est" vraiment "génial!`
  3. Utilisez l'interpolation de chaînes: `C'est" $ {mieux} "que génial!`
  4. Il autorise plusieurs lignes: `

    Cette

    Fait du

    Javascript

    Meilleur!

    "

Il ne provoque également aucune perte de performances lors du remplacement des deux autres: https://medium.com/javascript-in-plain-english/are-backticks-slower-than-other-strings-in-javascript-ce4abf9b9fa


3

Si votre source JS est:

elem.innerHTML="<img src='smily' alt='It\'s a Smily' style='width:50px'>";

La source HTML sera:

<img src="smiley" alt="It's a Smiley" style="width:50px">

ou pour HTML5

<img src=smiley alt="It's a Smiley" style=width:50px>

JS autorise des tableaux comme celui-ci:

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

Mais si vous le strifiez, ce sera pour une raison compatible:

JSON=["this","that"]

Je suis sûr que cela prend un certain temps.


3

Juste pour ajouter mes 2 cents: en travaillant avec JS et PHP il y a quelques années, je me suis habitué à utiliser des guillemets simples pour pouvoir taper le caractère d'échappement ('\') sans avoir à l'échapper également. Je l'utilisais généralement pour taper des chaînes brutes avec des chemins de fichiers, etc. ( http://en.wikipedia.org/wiki/String_literal#Raw_strings )

Quoi qu'il en soit, ma convention a fini par devenir l'utilisation de guillemets simples sur les chaînes brutes de type identificateur, telles que if (typeof s == 'string') ...(dans lesquelles les caractères d'échappement ne seraient jamais utilisés - jamais), et de guillemets doubles pour les textes , tels que "Hey, quoi de neuf?". J'utilise également des guillemets simples dans les commentaires comme convention typographique pour afficher les noms d'identificateurs. Ce n'est qu'une règle de base, et je ne m'interromps qu'en cas de besoin, comme lors de la saisie de chaînes HTML '<a href="#"> like so <a>'(bien que vous puissiez également inverser les guillemets ici). Je suis également conscient que, dans le cas de JSON, des guillemets doubles sont utilisés pour les noms - mais en dehors de cela, personnellement, je préfère les guillemets simples lorsque l'échappement n'est jamais requis pour le texte entre les guillemets - comme document.createElement('div').

En bout de ligne, et comme certains l'ont mentionné / fait allusion, choisissez une convention, respectez-la et ne déviez que lorsque cela est nécessaire.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.