Quand utiliser des guillemets simples ou doubles en JavaScript?

https://stackoverflow.com/questions/242813

04-07-2019
|

Question

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

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

La solution

La préférence la plus probable du programmeur et / ou la cohérence de l'API sont les raisons pour lesquelles l'utilisation de single vs double est utilisée dans différentes bibliothèques.

Outre la cohérence, utilisez celle qui convient le mieux à la chaîne:.

En utilisant l'autre type de citation comme littéral:

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

& # 8230; mais cela peut devenir compliqué & # 8230;

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

Une autre option, nouvelle dans ES6, est Littéraux de modèle qui utilisent le back-tick caractè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: l'interpolation de variable, les chaînes multilignes et plus encore.

Autres conseils

Si vous utilisez JSON, il convient de noter que, à 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.

Il n'y a pas de meilleure solution ; Cependant, je voudrais dire que les guillemets doubles sont parfois plus souhaitables:

Les nouveaux arrivants seront déjà familiarisés avec les guillemets doubles de leur langue . En anglais, nous devons utiliser des guillemets doubles " pour identifier un passage du texte cité. Si nous devions utiliser une seule citation ', le lecteur pourrait l’interpréter à tort comme une contraction. L’autre sens d’un passage de texte entouré par le "I'm going to the mall" indique le sens «familier». 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 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ée: <=>.
Les guillemets doubles désignent une chaîne dans de nombreuses autres langues . Lorsque vous apprenez un nouveau langage comme Java ou C, les guillemets sont toujours utilisés. En Ruby, PHP et Perl, les chaînes entre guillemets simples n'impliquent aucune fausse 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 déjà indiqué, il est primordial de rester cohérent.

La différence seulement est démontrée dans les éléments suivants:

'A string that\'s single quoted'

"A string that's double quoted"

Donc, ce n’est que le nombre de citations que vous souhaitez échapper. Il en va évidemment de même pour les guillemets doubles dans les chaînes à guillemets doubles.

Citations uniques

J'aimerais que les guillemets doubles soient la norme, car ils est un peu plus logique , mais je continue à utiliser les guillemets simples car ils dominent la scène.

Citations simples:

airbnb
google
grunt
gulp
nœud
npm (bien que ne soit pas défini dans l'auteur guide )
wikimedia
wordpress
yandex

Aucune préférence:

trois.js

Double quotes:

crockford
d3 (bien que non défini dans .eslintrc )
jquery

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), les informations suivantes seront renvoyées:

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 que 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 entre guillemets. On pourrait penser qu'il faut moins de temps à Firefox pour analyser JavaScript si tout est déjà écrit selon ce "standard".

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

Conclusion: je pense que nous devons approfondir nos recherches à ce sujet.

Modifier: Cela pourrait expliquer Peter- Résultats des tests de Paul Koch depuis 2003.

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

Éditer 2014: Les versions modernes de Firefox / Spidermonkey ne & # 8217; ne le faites plus.

Si vous utilisez du code JavaScript en ligne (sans doute une & mauvaise & chose; mais en évitant cette discussion), les célibataires guillemets sont votre seule option pour les littéraux chaîne. .

Par exemple, cela fonctionne très bien:

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

Mais vous ne pouvez pas envelopper le & "hi &"; entre guillemets, quelle que soit la méthode utilisée, à ma connaissance. Même les " qui auraient été mes meilleures suppositions (puisque vous échappez aux guillemets dans une valeur d'attribut de HTML) ne fonctionnent pas pour moi dans Firefox. \" ne fonctionnera pas non plus, car pour l'instant, vous échappez au code HTML, pas à JavaScript.

Ainsi, si le nom du jeu est cohérence et que vous allez créer du code JavaScript intégré dans certaines parties de votre application, je pense que les guillemets simples sont les gagnants. S'il vous plaît, corrigez-moi si je me trompe.

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

Douglas Crockford recommande l’utilisation de guillemets simples pour les chaînes internes et de doubles guillemets pour les caractères externes (par externe, nous entendons ceux à afficher pour les utilisateurs de l’application, tels que les messages ou les alertes).

Je suis personnellement cela.

UPDATE: M. Crockford semble avoir changé d'avis et recommande désormais d’utiliser des guillemets doubles:)

Strictement parlant, il n’ya pas de différence de sens; le choix revient donc à la commodité.

Voici plusieurs facteurs qui pourraient influer sur votre choix:

Style de la 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 construits côté serveur (VB.Net utilise des guillemets doubles pour les chaînes, de sorte que les chaînes de script java sont: facile à distinguer s’ils utilisent des guillemets simples).
Code de la bibliothèque: si vous utilisez une bibliothèque utilisant un style particulier, vous pouvez utiliser le même style vous-même.
Préférence personnelle: vous pouvez choisir l’un ou l’autre style.

Regardons ce qu'une référence fait.

Dans jquery.js, chaque chaîne est double-guidé.

Donc, à partir de maintenant, je vais utiliser des chaînes entre guillemets. (J'utilisais 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, alors 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, alors c'est probablement une bonne idée de suivez le & "style maison" & ";
Si vous êtes le seul à pirater quelques projets annexes, alors examinez quelques leaders importants de la communauté. Par exemple, disons que vous entrez dans Node.js. Jetez un coup d'œil aux modules de base, par exemple underscore.js ou express, et voyez ce que convention qu'ils utilisent, et envisagent de suivre cela.
Si les deux conventions sont utilisées de la même manière, alors respectez votre compte personnel
préférence.
Si vous n'avez aucune préférence personnelle, alors lancez une pièce de monnaie.
Si vous n'avez pas de pièce, alors 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 à ce sujet.

En supposant que, dans votre code HTML, vous utilisiez des guillemets, comme il se doit 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.

Mon résultat est: En JavaScript, peu importe, mais dès que vous intégrez Dans HTML ou similaire, vous commencez à avoir des problèmes. Tu devrais savoir ce qui s’échappe réellement, lit, passe votre chaîne.

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é!

On comprend pourquoi, mais on comprend également pourquoi nous devrions nous en tenir à des guillemets simples ... .. je suppose ..

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

Donc, pour répondre à la question:

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

Maintenez simplement la cohérence dans ce que vous utilisez. Mais n'abandonnez pas 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 de modèle .

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

Je ne sais pas si cela est pertinent dans le monde d'aujourd'hui, mais les guillemets étaient utilisés pour le contenu nécessitant le traitement des caractères de contrôle et les guillemets simples pour les chaînes qui n'en contenaient pas.

Le compilateur exécutera la manipulation de chaîne sur une chaîne entre guillemets tout en laissant une chaîne entre guillemets littéralement intacte. Cela incitait les "bons" développeurs à choisir d'utiliser des guillemets simples pour les chaînes ne contenant pas de caractères de contrôle tels que \n ou \0 (non traités entre guillemets simples) et des guillemets doubles lorsqu'ils avaient besoin d'analyser la chaîne (à léger coût en cycles de traitement du traitement de la chaîne).

Si vous utilisez jshint , une erreur sera générée si vous utilisez une chaîne de guillemets double.

Je l’ai utilisé via l’échafaudage Yeoman d’AngularJS mais il existe peut-être un moyen de configurer cela.

En passant, lorsque vous manipulez du HTML en JavaScript, il est plus facile d'utiliser une citation simple:

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 pas de moyen trivial de répondre à votre question

À propos de performances, les guillemets ne seront jamais votre goulot d'étranglement. Toutefois, les performances sont identiques dans les deux cas.

À propos de la vitesse de codage, si vous utilisez ' pour délimiter une chaîne, vous devrez échapper les " guillemets. Il est plus probable que vous deviez 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">';

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

Une raison (stupide) d’utiliser des guillemets simples est qu’ils ne vous obligent pas à appuyer sur la touche Maj pour les taper, alors qu’un guillemet double le fait. (Je suppose que la chaîne moyenne ne nécessite pas d'échappement, ce qui est une hypothèse raisonnable.) Supposons maintenant que je code chaque jour 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 taper un guillemet simple (parce que je dois appuyer sur la touche majuscule). Puis, chaque jour, je perds 3 secondes. Si je code de cette manière pendant 200 jours par an pendant 40 ans, alors j'ai perdu 6,7 heures de ma vie. Matière à réflexion.

Examiner le pour et le contre

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.

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 incorporé est normalement un anti-motif. Préférez les modèles.

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

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

Encore une fois, vous ne devriez pas & # 8217; pas besoin de construire JSON de cette façon. JSON.stringify () est souvent suffisant. Sinon, utilisez des modèles.

En faveur des guillemets doubles

Les doublons sont plus faciles à repérer si vous n’avez pas de code couleur. Comme dans un journal de console ou une sorte d'installation de view-source.
Similitude avec d'autres langages: en programmation shell (Bash, etc.), des littéraux chaîne entre guillemets 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 un code JSON valide, 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 ce qui vous convient pour le 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!\"'

guillemets simples pour les chaînes internes et doubles pour les chaînes externes. Cela vous permet de distinguer les constantes internes des chaînes à afficher à l'utilisateur (ou à écrire sur le disque, etc.). Évidemment, vous devriez éviter de mettre ce dernier dans votre code, mais cela ne peut & # 8217; pas toujours se faire.

L’augmentation de la popularité des scripts côté serveur est une autre chose que vous pouvez envisager comme raison de passer des guillemets doubles aux guillemets simples. Lorsque vous utilisez PHP, vous pouvez transmettre des variables et analyser des fonctions javascript à l'aide de chaînes et de variables en PHP.

Si vous écrivez une chaîne et utilisez des guillemets doubles pour votre PHP, vous ne devrez échapper à aucun des guillemets simples et PHP récupérera automatiquement la valeur des variables pour vous.

Exemple: je dois exécuter une fonction javascript à l'aide d'une variable de mon serveur.

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

Cela me évite beaucoup de tracas en ce qui concerne le fait de joindre des chaînes, et je peux effectivement appeler un code javascript depuis PHP. Ce n’est qu’un exemple, mais c’est peut-être une des raisons pour lesquelles les programmeurs utilisent par défaut des guillemets simples en javascript.

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

J'utiliserais des guillemets doubles lorsque les guillemets simples ne pourraient pas être utilisés et inversement:

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

Au lieu de:

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

Il n'y a pas de différence entre les guillemets simples et les guillemets doubles dans 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. Toute discussion ultérieure est futile à moins que votre application JavaScript soit longue de centaines de milliers.

C'est comme un point de repère si

a=b;

est plus rapide que

a = b;

(espaces supplémentaires)

aujourd'hui, dans un navigateur et une plate-forme particuliers, etc.

Lorsque j'utilise CoffeeScript, j'utilise des guillemets doubles. Je conviens que vous devriez choisir l'un ou l'autre et vous en tenir à cela. CoffeeScript vous donne une interpolation lorsque vous utilisez les guillemets doubles.

"This is my #{name}"

ES6 utilise des ticks arrière (`) 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 en chaîne de guillemets ou de guillemets doubles en guillemets arrière pour obtenir la fonction d'interpolation. CoffeeScript n’est peut-être pas parfait, mais utiliser le même caractère littéral partout (guillemets) et pouvoir toujours interpoler est une fonctionnalité intéressante.

`This is my ${name}`

Certaines personnes affirment constater des différences de performances: ancien fil de discussion . Mais je n’ai trouvé aucun d’eux à confirmer.

L'essentiel est de regarder quel type de guillemets (doubles ou simples) vous utilisez dans votre chaîne. Il est utile de limiter le nombre d’évasions. Par exemple, lorsque vous travaillez avec du HTML dans vos chaînes, il est plus facile d’utiliser des guillemets simples afin de ne pas avoir à échapper à tous les guillemets doubles autour des attributs.

Si vous passez de l'un à l'autre entre JavaScript et C #, il est préférable de vous entraîner à la convention commune qui consiste à utiliser des guillemets doubles.

J'ai couru la vingtaine de fois. Et il semble que les guillemets doubles sont environ 20% plus rapides.

La partie amusante est que, si vous modifiez les parties 2 et 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));

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 plus vite aussi parce que Le compilateur de fermetures Google convertit les guillemets simples en guillemets doubles.

Il n'y a strictement aucune différence, c'est donc essentiellement une question de goût et de contenu de la chaîne (ou si le code JS est lui-même une chaîne), pour que le nombre d'échappées reste faible.

La légende des différences de vitesse peut provenir du monde PHP, où les deux guillemets 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 autorise les tableaux de ce type:

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

Mais si vous le stigmatisez, ce sera pour des raisons de compatibilité:

JSON=["this","that"]

Je suis sûr que cela prend du temps.

Juste pour ajouter mes 2 centimes: En travaillant à la fois 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 à les échapper également. . Je l'utilisais généralement lors de la saisie de chaînes brutes avec des chemins d'accès, 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 des chaînes brutes de type identificateur, telles que if (typeof s == 'string') ... (dans laquelle les caractères d'échappement ne seraient jamais utilisés), et de guillemets doubles pour les textes , comme & "Hey, quoi de neuf? &"; J'utilise également les guillemets simples dans les commentaires comme convention typographique pour montrer les noms d'identifiant. Ceci est juste une règle de base, et je ne m'interromps que lorsque cela est nécessaire, par exemple 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, les guillemets sont utilisés pour les noms - mais en dehors de cela, personnellement, je préfère les guillemets simples lorsque l'échappement est jamais requis pour le texte entre les guillemets. - comme document.createElement('div').

En fin de compte, et comme certains l’ont mentionné / mentionné, choisissez une convention, respectez-la et n’écartez que lorsque cela est nécessaire.

Vous pouvez utiliser des guillemets simples ou doubles. Cela vous permet par exemple d'imbriquer facilement du javascript dans des attributs HTML, sans avoir besoin d'échapper aux guillemets. Il en va de même lorsque vous créez du javascript avec PHP.

L’idée générale est la suivante: s’il est possible d’utiliser des guillemets que vous n’aurez pas besoin d’échapper. Moins d'échappement = meilleur code.

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow