Quand utiliser des guillemets doubles ou simples dans JavaScript?
console.log("double");
vs console.log('single');
je vois de plus en plus de bibliothèques JavaScript là-bas en utilisant des guillemets simples lors de la manipulation de chaînes. Quelles sont les raisons d'utiliser l'un plutôt que l'autre? Je pensais qu'ils êtes à peu près interchangeables.
30 réponses
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.
autre que cohérent, utilisez celui qui convient le mieux à la chaîne:.
utilisant l'autre type de citation comme un littéral:
alert('Say "Hello"');
alert("Say 'Hello'");
... mais cela peut se compliquer ...
alert("It's \"game\" time.");
alert('It\'s "game" time.');
une autre option, nouvelle dans ES6, sont modèles littéraux qui utilisent le caractère back-tick
:
alert(`Use "double" and 'single' quotes in the same string`);
alert(`Escape the \` back-tick character in a string`);
Modèle de littéraux offrir un nettoyage de la syntaxe: interpolation de variable, multi-ligne de chaînes, et plus encore.
si vous avez affaire à JSON, il est à noter qu'à proprement parler, JSON strings doit être cité deux fois. Bien sûr, de nombreuses bibliothèques prennent aussi en charge les citations simples, mais j'ai eu de gros problèmes dans l'un de mes projets avant de réaliser que la citation simple d'une chaîne de caractères n'est en fait pas conforme aux normes JSON.
Il n'existe pas de meilleure solution ; cependant, j'aimerais dire que les guillemets peut être plus souhaitable à la fois:
- les nouveaux arrivants connaissent déjà les doubles citations de leur langue . En anglais, nous devons utiliser des guillemets
"
pour identifier un passage de texte cité. Si nous devions utiliser une seule citation'
, le lecteur peut l'interpréter comme une contraction. Les autres signification d'un passage de texte entouré du'
indique la signification "familière". Il est logique de rester cohérent avec les langues préexistantes, ce qui pourrait faciliter l'apprentissage et l'interprétation du code. - les doubles guillemets éliminent la nécessité d'échapper aux apostrophes (comme dans les contractions). Considérez la chaîne de caractères:
"I'm going to the mall"
, vs. La version autrement échappée:'I\'m going to the mall'
. -
Les guillemets doubles signifient une chaîne dans beaucoup d'autres langues . Lorsque vous apprenez un nouveau langage comme Java ou C, les guillemets sont toujours utilisés. Dans Ruby, PHP et Perl, les chaînes à simple guillemet impliquent qu'il n'y a pas d'échappatoire aux antislash alors que les doubles guillemets les supportent.
-
la notation JSON est écrite avec des guillemets.
Néanmoins, comme d'autres l'ont déclaré, Il est très important de rester cohérent.
la différence entre et est illustrée comme suit:
'A string that\'s single quoted'
"A string that's double quoted"
donc, c'est seulement en fonction de combien de citations vous voulez échapper. De toute évidence, il en va de même pour les guillemets dans les chaînes à guillemets.
Apostrophes
j'aimerais que les doubles guillemets soient la norme, parce qu'ils font un peu plus de sens , mais je continue à utiliser des guillemets simples parce qu'ils dominent la scène.
apostrophes:
- airbnb
- grunt
- gulp
- nœud
- npm (bien que non défini dans le" guide de l'auteur ) "
- wikimedia
- wordpress
- yandex
pas de préférence:
double guillemets:
je voudrais dire que la différence est purement stylistique, mais j'ai vraiment mes 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), ce sera le retour suivant:
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 de retrait a été remplacé par quatre espaces. Cela donne l'impression qu'au moins un navigateur utilise JavaScript en interne comme si tout avait été écrit avec des guillemets. on pourrait penser qu'il faut moins de temps à Firefox pour analyser JavaScript si tout est déjà écrit selon cette "norme".
ce qui, soit dit en passant, fait de moi un panda très triste, puisque je pense que les citations simples semblent beaucoup plus belles en 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 sur ce sujet.
Edit: Ce qui pourrait expliquer Peter-Paul Koch, les résultats de tests de retour en 2003.
il semble que les citations simples sont parfois plus rapide dans les fenêtres D'Explorateur (environ 1/3 de mes tests ont montré un temps de réponse plus rapide), mais si Mozilla montre une différence du tout, il gère des guillemets doubles légèrement plus rapide. Je n'ai trouvé aucune différence dans l'Opéra.
Edit 2014: les versions modernes de Firefox/Spidermonkey ne font plus cela.
si vous faites en JavaScript en ligne (sans doute une" mauvaise "chose, mais en évitant cette discussion) single les citations sont votre seule option pour les chaînes littérales, je crois.
par exemple, cela fonctionne très bien:
<a onclick="alert('hi');">hi</a>
mais vous ne pouvez pas envelopper le "salut" dans des guillemets, par n'importe quelle méthode d'évasion que je connais. Même "
ce qui aurait été ma meilleure estimation (puisque vous échappez à des citations dans un attribut valeur de HTML) ne fonctionne pas pour moi dans Firefox. \"
ne fonctionnera pas non plus parce qu'à ce stade vous échappez pour HTML, Pas JavaScript.
donc, si le nom du jeu est consistance, et que vous allez faire du JavaScript en ligne dans certaines parties de votre application, je pense que les citations simples sont le gagnant. Que quelqu'un me corrige si je me trompe.
techniquement, il n'y a pas de différence, c'est seulement une question de style et de convention.
Douglas Crockford recommande l'utilisation de guillemets simples pour les chaînes internes et de guillemets doubles pour les externes (par externe, nous entendons ceux qui doivent être affichés à l'utilisateur de l'application, comme des messages ou des alertes).
je le suis personnellement.
mise à jour: il semble que M. Crockford a changé d'avis et maintenant recommande d'utiliser des guillemets dans :)
à proprement parler, il n'y a pas de différence de sens; le choix se résume donc à la commodité.
voici plusieurs facteurs qui pourraient influencer votre choix:
- style maison: certains groupes de développeurs utilisent déjà une convention ou l'autre.
- exigences côté Client: utiliserez-vous des guillemets dans les chaînes? (Voir la réponse D'Ady).
- langage Côté Serveur: VB.Net les gens peut choisir d'utiliser des guillemets simples pour java-script afin que les scripts puissent être construits côté serveur (VB.Net utilise des guillemets doubles pour les chaînes, de sorte que les chaînes java-script 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 chose l'un ou l'autre style semble mieux.
regardons ce qu'une référence fait.
dans jquery.js, chaque chaîne est double citation.
donc, à partir de maintenant, j'utiliserai des cordes à double citation. (J'ai été en utilisant un seul!)
C'est surtout une question de style et de préférence. Il y a quelques explorations techniques assez intéressantes et utiles dans les autres réponses, donc peut-être que la seule chose que je pourrais ajouter est d'offrir un petit conseil mondain.
-
si vous codez dans une entreprise ou une équipe, puis c'est probablement une bonne idée de suivez le "style maison".
-
Si vous êtes seul piratage d'un côté de quelques projets, puis regarder un peu les grands dirigeants de la communauté . Par exemple disons que vous dans le Nœud.js. Jetez un coup d'oeil aux modules de base, par exemple underscore.js ou d'exprimer et de voir ce que ils utilisent la convention et envisagent de la suivre.
-
si les deux conventions sont également utilisées, puis reportez à votre personnel
préférence. -
Si vous n'avez pas de préférence personnelle, puis lancez une pièce.
-
Si vous n'avez pas une pièce de monnaie, puis la bière est sur moi ;)
j'espère ne pas ajouter quelque chose d'évident, mais je me suis battu avec Django et Ajax et JSON sur ce.
en supposant que dans votre code HTML vous utilisez des guillemets doubles, comme normalement, je suggère fortement d'utiliser des guillemets simples pour le reste en JavaScript.
donc je suis d'accord avec @ady mais avec un peu de soin.
: En JavaScript ce n'est probablement pas le cas question, mais dès que vous incorporez il à L'intérieur de HTML ou comme vous commencez à avoir des problèmes. Vous devez savoir ce qui est en train de s'échapper, de lire, de passer ta corde.
mon cas simple était:
tbox.innerHTML = tbox.innerHTML + '<div class="thisbox_des" style="width:210px;" onmouseout="clear()"><a href="/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 rester sur des guillemets simples... .. Je suppose que..
ce cas est un très simple HTML embedding, l'erreur a été générée par un simple copier / coller à partir d'un code JavaScript "double Cité".
pour répondre à la question:
essayez d'utiliser des guillemets simples dans HTML. Ça éviterait quelques problèmes de débogage...
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 avoir des caractères de contrôle traités et les guillemets simples pour les chaînes qui ne l'étaient pas.
le compilateur exécutera la manipulation de la chaîne sur une chaîne double citée tout en laissant une seule chaîne Citée littéralement intacte. Cela conduisait à de "bons" développeurs qui choisissaient d'utiliser des guillemets simples pour des chaînes ne contenant pas de caractères de contrôle comme \n
ou "151910920"
(non traité dans les guillemets simples) et les guillemets doubles lorsqu'ils ont besoin de la chaîne analysée (à un léger coût dans les cycles cpu pour le traitement de la chaîne).
si vous utilisez jshint , cela soulèvera une erreur si vous utilisez une chaîne de citation double.
Je l'ai utilisé à travers L'échafaudage Yeoman D'AngularJS mais peut-être qu'il y a une maner pour configurer ceci.
soit dit en passant, lorsque vous manipulez HTML en JavaScript, il est plus facile d'utiliser une seule citation:
var foo = '<div class="cool-stuff">Cool content</div>';
et au moins JSON utilise des guillemets pour reprogrammer les chaînes.
il n'y a pas de façon triviale de répondre à votre question
en parlant de performance, les devis ne seront jamais votre goulot d'étranglement, cependant, la performance est la même dans les deux cas.
en parlant de vitesse de codage, si vous utilisez '
pour délimiter une chaîne, vous devrez échapper aux guillemets "
. Vous êtes plus susceptible d'avoir besoin d'utiliser "
à l'intérieur de la chaîne, dans l'exemple:
//JSON Objects:
var jsonObject = '{"foo":"bar"}';
//HTML attributes:
document.getElementById("foobar").innerHTML = '<input type="text">';
alors, je préfère utiliser '
pour délimiter la chaîne, donc je dois m'échapper moins caractère.
il suffit de garder la cohérence dans ce que vous utilisez. Mais ne baisse pas ton 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
à l'Aide modèle de la syntaxe littérale .
`Be "my" guest. You're in complete freedom.`; // most comfort :D
une raison (stupide) d'utiliser des guillemets simples serait qu'ils n'exigent pas que vous frappiez la touche majuscules pour les dactylographier, alors qu'un guillemet double le font. (Je suppose que la chaîne moyenne ne nécessite pas d'échappatoire, ce qui est une hypothèse raisonnable. Supposons que chaque jour je code 200 lignes de code. Peut-être que dans ces 200 lignes j'ai 30 citations. Peut-être que taper une double citation prend 0,1 seconde de plus que taper une seule citation (parce que je dois appuyer sur la touche Majuscule). Puis sur tout jour, je perds 3 secondes. Si je code de cette façon 200 jours par an pendant 40 ans, alors j'ai perdu 6,7 heures de ma vie. De la nourriture pour la pensée.
examiner le pour et le contre
en faveur des guillemets
- moins de bruit visuel.
- générer des attributs HTML: les attributs HTML sont habituellement 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, inline HTML est normalement un anti-pattern. Préférez les modèles.
- Générer du JSON: Seuls les guillemets doubles sont autorisés en JSON.
myJson = '{ "hello world": true }';
encore une fois, vous ne devriez pas avoir à construire JSON de cette façon. JSON.stringify() est souvent suffisant. Si non, utiliser des modèles.
en faveur des doubles citations
- Doubles sont plus faciles à repérer si vous n'avez pas de code couleur. Comme dans un journal de bord de console ou une sorte de configuration de view-source.
- Similarité avec d'autres langues: En programmation shell (Bash etc.), il existe des littérales à cordes simples, mais les évasions ne sont pas interprétées à l'intérieur d'elles. 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 valide JSON, vous devez utiliser des guillemets doubles.
en faveur des deux
il n'y a pas de différence entre les deux en JavaScript. Par conséquent, vous pouvez utiliser tout ce qui vous convient pour le moment. Par exemple, les chaînes littérales suivantes produisent toutes 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!\"'
guillemets simples pour chaînes internes et doubles pour externes. Cela vous permet de distinguer les constantes internes des chaînes qui doivent être affichées à l'utilisateur (ou écrits sur le disque, etc.). Évidemment, vous devriez éviter de mettre ce dernier dans votre code, mais cela ne peut pas toujours être fait.
une autre chose que vous pourriez vouloir considérer comme une raison pour le passage des guillemets doubles aux guillemets simples est l'augmentation de la popularité des scripts côté serveur. Lorsque vous utilisez PHP, vous pouvez passer des variables et analyser les fonctions javascript en utilisant des chaînes de caractères et des variables en PHP.
si vous écrivez une chaîne de caractères et utilisez des guillemets doubles pour votre PHP, vous n'aurez pas à échapper aux guillemets simples et PHP récupérera automatiquement la valeur des variables pour vous.
exemple: je dois 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 m'épargne beaucoup de tracas à gérer les chaînes de jointure, et je peux effectivement appeler un javascript à partir de PHP. Ce n'est qu'un exemple, mais c'est peut-être l'une des raisons pour lesquelles les programmeurs font défaut à des guillemets en javascript.
citation des documents PHP : "le plus important la caractéristique des chaînes de caractères double-citées est le fait que les noms de variables seront élargis. Voir l'analyse des chaînes de caractères pour plus de détails. "
j'utiliserais des guillemets doubles lorsque des guillemets simples ne peuvent pas être utilisés et vice versa:
"'" + singleQuotedValue + "'"
'"' + doubleQuotedValue + '"'
au lieu de:
'\'' + singleQuotedValue + '\''
"\"" + doubleQuotedValue + "\""
il n'y a pas de différence entre les guillemets simples et doubles en JavaScript.
Spécification importante:
peut-être qu'il y a des différences de performances, mais elles sont absolument minimales et peuvent changer tous les jours selon l'implémentation des navigateurs. Plus de discussion est futile à moins que votre application JavaScript est des centaines de milliers de long.
C'est comme un point de référence si
a=b;
est plus rapide que 151930920"
a = b;
(espaces supplémentaires)
aujourd'hui, dans un navigateur particulier et plate-forme, etc.
quand J'utilise CoffeeScript, j'utilise des guillemets doubles. Je suis d'accord que vous devez choisir entre l'un et de s'y tenir. CoffeeScript vous donne l'interpolation lors de l'utilisation des guillemets doubles.
"This is my #{name}"
ES6 utilise back ticks ( ` ) pour les chaînes de modèles. Ce qui a probablement une bonne raison, mais lors du codage, il peut être difficile de changer le caractère littéral de la chaîne de caractères à partir de guillemets ou de guillemets doubles afin d'obtenir la fonction d'interpolation. CoffeeScript pourrait ne pas être parfait, mais en utilisant la même chaîne de caractères littéraux partout (guillemets doubles) et toujours être en mesure d'interpoler est une belle fonctionnalité.
`This is my ${name}`
il y a des gens qui prétendent voir des différences de performance: fil de la vieille liste de diffusion . Mais je n'en ai trouvé aucune à confirmer.
l'essentiel est de regarder quel type de guillemets (doubles ou simples) vous utilisez à l'intérieur de votre chaîne. Il aide à garder le nombre d'évasions faible. 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.
si vous revenez en arrière entre JavaScript et C#, il est préférable de former vos doigts pour la convention commune qui est guillemets.
j'ai fait le suivi une vingtaine de fois. Et il semble que les doubles citations sont environ 20% plus rapides.
la partie amusante est, si vous changez la partie 2 et la partie 1 autour, les citations 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));
après avoir lu toutes les réponses qui disent qu'il peut-être être plus rapide ou peut-être ont des avantages, je dirais double citation est mieux ou peut-être plus rapide aussi parce que Google closure compiler convertir des citations simples à des citations doubles.
il n'y a strictement aucune différence, il est donc 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 garder le nombre d'échappées faible.
la légende de la différence de vitesse pourrait venir de PHP world, où les deux citations ont un comportement différent.
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 permet des tableaux comme celui-ci:
var arr=['this','that'];
mais si vous le stringifiez, ce sera pour une raison compatible:
JSON=["this","that"]
je suis sûr que ça prend du temps.
juste pour ajouter mes 2 cents: en travaillant à la fois avec JS et PHP il y a quelques années, je suis devenu habitué à utiliser des guillemets simples pour que je puisse taper le caractère escape ('\') sans avoir à l'échapper aussi bien. Je l'ai habituellement utilisé en tapant des chaînes brutes avec des chemins de fichier, etc. ( http://en.wikipedia.org/wiki/String_literal#Raw_strings )
quoi qu'il en soit, ma convention a fini par devenir l'utilisation de citations simples sur des chaînes brutes de type identificateur, comme if (typeof s == 'string') ...
(dans lequel les caractères d'évasion ne seraient jamais utilisés-jamais), et des doubles citations pour textes , comme "Hey, what's up?". J'utilise aussi des guillemets simples dans les commentaires comme convention typographique pour afficher les noms d'identification. C'est juste une règle empirique, et je ne me casse que lorsque c'est nécessaire, par exemple en tapant des chaînes HTML '<a href="#"> like so <a>'
(bien que vous puissiez inverser les guillemets ici aussi). Je suis également conscient que, dans le cas de JSON, des guillemets sont utilisés pour les noms - mais en dehors de cela, personnellement, je préfère les guillemets simples quand échapper est jamais requis pour le texte entre les guillemets - comme document.createElement('div')
.
en bref, et comme certains l'ont mentionné/fait allusion, choisissez une convention, tenez-vous-en à elle, et ne déviez que si nécessaire.
vous pouvez utiliser des guillemets simples ou doubles. Cela vous permet, par exemple, d'intégrer facilement javascript dans les attributs HTML, sans avoir à échapper aux guillemets. Il en va de même lorsque vous créez javascript avec PHP.
l'idée générale est: s'il est possible d'utiliser de telles citations que vous n'aurez pas besoin d'échapper. Moins d'évasion = meilleur code.