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.

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.

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.

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.

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.

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:

• airbnb
• Facebook
• Google
• grognement
• gorgée
• nœud
• npm (bien que non défini dans le guide de l'auteur )
• wikimedia
• wordpress
• yandex

Pas de préférence:

• three.js

Double citation:

• manuscrit
• crockford
• d3 (mais 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), 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.

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 "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.

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 :)

À 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.

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

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

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

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 ...

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).

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

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.

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.

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>';

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.

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."

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.

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 + "\""

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.

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}`

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.

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

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.

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.

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

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.

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.