¿Cuándo utilizar comillas simples o dobles en JavaScript?

StackOverflow https://stackoverflow.com/questions/242813

  •  04-07-2019
  •  | 
  •  

Pregunta

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

Veo cada vez más bibliotecas de JavaScript que utilizan comillas simples al manejar cadenas.¿Cuáles son las razones para utilizar uno sobre el otro?Pensé que son prácticamente intercambiables.

¿Fue útil?

Solución

La razón más probable para el uso de single vs double en diferentes bibliotecas es la preferencia del programador y / o la consistencia API.

Además de ser coherente, use el que mejor se adapte a la cadena:

Usando el otro tipo de cita como literal: 

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

& # 8230; pero esto puede complicarse & # 8230; 

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

Otra opción, nueva en ES6, son Literales de plantilla que usan el carácter back-tick: 

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

Los literales de plantilla ofrecen una sintaxis limpia para: interpolación variable, cadenas de varias líneas y más.

Otros consejos

Si se trata de JSON, debe tenerse en cuenta que, estrictamente hablando, las cadenas JSON deben estar entre comillas dobles. Claro, muchas bibliotecas también admiten comillas simples, pero tuve grandes problemas en uno de mis proyectos antes de darme cuenta de que las comillas simples de una cadena de hecho no están de acuerdo con los estándares JSON.

No hay una solución mejor ; sin embargo, me gustaría argumentar que las comillas dobles pueden ser más deseables a veces:

  • Los recién llegados ya estarán familiarizados con las comillas dobles de su idioma . En inglés, debemos usar comillas dobles " para identificar un pasaje del texto citado. Si tuviéramos que usar una cita simple ', el lector podría malinterpretarla como una contracción. El otro significado de un pasaje de texto rodeado por el "I'm going to the mall" indica el significado 'coloquial'. Tiene sentido mantenerse coherente con los lenguajes preexistentes, y esto puede facilitar el aprendizaje y la interpretación del código.
  • Las comillas dobles eliminan la necesidad de escapar de los apóstrofes (como en las contracciones). Considere la cadena: 'I\'m going to the mall', frente a la versión de otro modo escapado: <=>.

  • Las comillas dobles significan una cadena en muchos otros idiomas . Cuando aprende un nuevo lenguaje como Java o C, siempre se utilizan comillas dobles. En Ruby, PHP y Perl, las cadenas entre comillas simples no implican escapes de barra invertida, mientras que las comillas dobles las admiten.

  • La notación JSON se escribe entre comillas dobles.

Sin embargo, como han dicho otros, es más importante permanecer consistente.

La diferencia solo se demuestra en lo siguiente: 

'A string that\'s single quoted'

"A string that's double quoted"

Entonces, solo se trata de cuánto presupuesto quieres escapar. Obviamente, lo mismo se aplica a las comillas dobles en cadenas de comillas dobles.

Comillas simples

Desearía que las comillas dobles fueran el estándar, porque tiene un poco más de sentido , pero sigo usando comillas simples porque dominan la escena.

Comillas simples:

Sin preferencia:

Comillas dobles:

Me gustaría decir que la diferencia es puramente estilística, pero realmente tengo mis dudas. Considere el siguiente ejemplo: 

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

En Safari, Chrome, Opera e Internet Explorer (probado en IE7 e IE8), esto devolverá lo siguiente: 

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

Sin embargo, Firefox producirá un resultado ligeramente diferente: 

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

Las comillas simples han sido reemplazadas por comillas dobles. (Observe también cómo se reemplazó el espacio de sangría por cuatro espacios). Esto da la impresión de que al menos un navegador analiza JavaScript internamente como si todo se hubiera escrito entre comillas dobles. Uno podría pensar, Firefox tarda menos tiempo en analizar JavaScript si todo ya está escrito de acuerdo con este 'estándar'.

Lo cual, por cierto, me hace un panda muy triste, ya que creo que las comillas simples se ven mucho mejor en el código. Además, en otros lenguajes de programación, generalmente son más rápidos de usar que las comillas dobles, por lo que solo tendría sentido si lo mismo se aplica a JavaScript.

Conclusión: creo que necesitamos investigar más sobre esto.

Editar: Esto podría explicar Peter- Resultados de la prueba de Paul Koch de 2003.

  

Parece que las comillas simples son a veces más rápidas en el Explorador de Windows (aproximadamente 1/3 de mis pruebas mostraron un tiempo de respuesta más rápido), pero si Mozilla muestra alguna diferencia, maneja las comillas dobles Un poco más rápido. No encontré ninguna diferencia en absoluto en Opera.

Editar 2014: Las versiones modernas de Firefox / Spidermonkey no & # 8217; no lo hagas más.

Si está haciendo JavaScript en línea (posiblemente una cosa & "; mala &"; pero evitando esa discusión) comillas simples son su única opción para los literales de cadena, creo .

por ejemplo, esto funciona bien: 

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

Pero no puede ajustar el " hola " entre comillas dobles, a través de cualquier método de escape que conozco. Incluso &quot; , que habría sido mi mejor suposición (ya que estás escapando de las comillas en un valor de atributo de HTML) no funciona para mí en Firefox. \" tampoco funcionará porque en este punto estás escapando por HTML, no por JavaScript.

Entonces, si el nombre del juego es coherente, y vas a hacer algo de JavaScript en línea en partes de tu aplicación, creo que las comillas simples son las ganadoras. Sin embargo, alguien corríjame si me equivoco.

Técnicamente no hay diferencia, solo es cuestión de estilo y convención.

Douglas Crockford recomienda el uso de comillas simples para cadenas internas y comillas dobles para externas (por externo queremos decir aquellas que se mostrarán al usuario de la aplicación, como mensajes o alertas).

Yo personalmente sigo eso.

ACTUALIZACIÓN: Parece que el Sr. Crockford cambió de opinión y ahora recomienda usar comillas dobles en todo :)

Hablando estrictamente, no hay diferencia en el significado; así que la elección se reduce a la conveniencia.

Aquí hay varios factores que podrían influir en su elección:

  • Estilo de la casa: algunos grupos de desarrolladores ya utilizan una convención u otra.
  • Requisitos del lado del cliente: ¿Utilizará comillas dentro de las cadenas? (Ver la respuesta de Ady).
  • Lenguaje del lado del servidor: las personas de VB.Net pueden optar por usar comillas simples para java-script para que los scripts puedan construirse del lado del servidor (VB.Net usa comillas dobles para cadenas, por lo que las cadenas de java-script son fácil de distinguir si usan comillas simples).
  • Código de biblioteca: si está usando una biblioteca que usa un estilo particular, puede considerar usar el mismo estilo usted mismo.
  • Preferencia personal: es posible que uno u otro estilo se vea mejor.

Veamos qué hace una referencia.

Dentro de jquery.js, cada cadena está entre comillas dobles.

Entonces, comenzando ahora, usaré cadenas entre comillas dobles. (¡Estaba usando single!)

Es principalmente una cuestión de estilo y preferencia. Hay algunas exploraciones técnicas bastante interesantes y útiles en las otras respuestas, por lo que quizás lo único que podría agregar es ofrecer un pequeño consejo mundano.

  • Si está codificando en una empresa o equipo, entonces probablemente sea una buena idea siga el " estilo de casa " ;.

  • Si estás solo hackeando algunos proyectos paralelos, entonces mira a algunos líderes prominentes en la comunidad. Por ejemplo, digamos que te estás metiendo en Node.js. Eche un vistazo a los módulos principales, por ejemplo, underscore.js o express y vea qué convenciones que usan, y considera seguir eso.

  • Si ambas convenciones se usan por igual, entonces diferirá a su
    personal preferencia.

  • Si no tiene preferencias personales, entonces lanza una moneda.

  • Si no tienes una moneda, entonces la cerveza está sobre mí;)

Espero no agregar algo obvio, pero he estado luchando con Django y Ajax y JSON sobre esto.

Suponiendo que en su código HTML utiliza comillas dobles, como normalmente debería ser, sugiero utilizar comillas simples para el resto en JavaScript.

Así que estoy de acuerdo con @ady pero con un poco de cuidado.

Mi conclusión es: En JavaScript probablemente no importa, pero tan pronto como inserte dentro de HTML o similares, comienza a tener problemas. Usted debe saber lo que realmente se está escapando, leyendo, pasando tu cadena.

Mi caso simple fue: 

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

Puede detectar el \ 'en el tercer campo de showThis.

¡La comilla doble no funcionó!

Está claro por qué, pero también está claro por qué debemos pegarnos entre comillas simples ... .. supongo ..

Este caso es una incrustación HTML muy simple, se generó el error mediante una simple copia / pegado de un código JavaScript 'entre comillas dobles'.

Entonces, para responder la pregunta:

Intenta usar comillas simples mientras estás dentro de HTML. Podría ahorrar un par de problemas de depuración ...

Solo mantén la consistencia en lo que usas. Pero no decepciones tu nivel de comodidad. 

"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

Actualización de ES6

Uso de la sintaxis literal de la plantilla . 

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

No estoy seguro de si esto es relevante en el mundo actual, pero las comillas dobles solían usarse para el contenido que necesitaba procesar caracteres de control y comillas simples para las cadenas que no.

El compilador ejecutará la manipulación de cadenas en una cadena entre comillas dobles y dejará una cadena entre comillas simples literalmente intacta.Esto solía llevar a que los "buenos" desarrolladores eligieran usar comillas simples para cadenas que no contenían caracteres de control como \n o \0 (no procesado entre comillas simples) y comillas dobles cuando necesitaban analizar la cadena (con un ligero costo en ciclos de CPU para procesar la cadena).

Si está utilizando jshint , generará un error si utiliza una cadena de comillas dobles.

Lo utilicé a través de la andamiaje de Yeoman de AngularJS, pero tal vez de alguna manera hay una forma de configurar esto.

Por cierto, cuando manejas HTML en JavaScript, es más fácil usar comillas simples: 

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

Y al menos JSON está usando comillas dobles para representar cadenas.

No hay una forma trivial de responder a su pregunta

Hablando de rendimiento, las citas nunca serán su cuello de botella, sin embargo, el rendimiento es el mismo en ambos casos.

Hablando de la velocidad de codificación, si usa ' para delimitar una cadena, necesitará escapar de " comillas. Es más probable que necesite usar <=> dentro de la cadena, por ejemplo: 

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

Entonces, prefiero usar <=> para delimitar la cadena, así que tengo que escapar menos caracteres.

Una razón (tonta) para usar comillas simples sería que no requieren que pulses la tecla Mayús para escribirlas, mientras que una comilla doble sí. (Supongo que la cadena promedio no requiere escapar, lo cual es una suposición razonable). Ahora, supongamos que cada día codifico 200 líneas de código. Quizás en esas 200 líneas tengo 30 citas. Tal vez escribir una comilla doble toma 0.1 segundos más de tiempo que escribir una comilla simple (porque tengo que presionar la tecla Mayús). Luego, en cualquier día, pierdo 3 segundos. Si codifico de esta manera durante 200 días al año durante 40 años, entonces he perdido 6.7 horas de mi vida. Alimento para el pensamiento.

  

Examinando los pros y los contras

A favor de comillas simples

  • Menos desorden visual.
  • Generando HTML: los atributos HTML generalmente están delimitados por comillas dobles. 

elem.innerHTML = '<a href="' + url + '">Hello</a>';
Sin embargo, las comillas simples son tan legales en HTML. 

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

Además, el HTML en línea es normalmente un antipatrón. Prefiero plantillas.

  • Generando JSON: solo se permiten comillas dobles en JSON. 

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

Nuevamente, no debería & # 8217; no tiene que construir JSON de esta manera. JSON.stringify () suele ser suficiente. Si no, use plantillas.

A favor de las comillas dobles

  • Los dobles son más fáciles de detectar si no tienes una codificación de colores. Como en un registro de consola o algún tipo de configuración de fuente de vista.
  • Similitud con otros lenguajes: en la programación de shell (Bash, etc.), existen literales de cadena entre comillas simples, pero los escapes no se interpretan dentro de ellos. C y Java usan comillas dobles para cadenas y comillas simples para caracteres.
  • Si desea que el código sea JSON válido, debe usar comillas dobles.

a favor de ambos

No hay diferencia entre los dos en JavaScript. Por lo tanto, puede usar lo que sea conveniente en este momento. Por ejemplo, los siguientes literales de cadena producen la misma cadena: 

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

Comillas simples para cadenas internas y dobles para externas. Eso le permite distinguir las constantes internas de las cadenas que se mostrarán al usuario (o se escribirán en el disco, etc.). Obviamente, debe evitar poner el último en su código, pero eso no puede & # 8217; no siempre se puede hacer.

Una cosa más que quizás desee considerar como una razón para el cambio de comillas dobles a comillas simples es el aumento de la popularidad de los scripts del lado del servidor. Al usar PHP, puede pasar variables y analizar funciones de JavaScript usando cadenas y variables en PHP.

Si escribe una cadena y usa comillas dobles para su PHP, no tendrá que escapar de ninguna de las comillas simples y PHP recuperará automáticamente el valor de las variables por usted.

Ejemplo: necesito ejecutar una función javascript usando una variable de mi servidor. 

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

Esto me ahorra mucha molestia al tener que lidiar con las cadenas de unión, y puedo llamar efectivamente a un javascript desde PHP. Este es solo un ejemplo, pero esta puede ser una de varias razones por las cuales los programadores están predeterminados a comillas simples en javascript.

Cita de documentos PHP : " La característica más importante de las cadenas entre comillas dobles es el hecho de que los nombres de las variables se expandirán. Ver análisis de cadenas para más detalles. "

Usaría comillas dobles cuando no se pueden usar comillas simples y viceversa: 

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

En lugar de: 

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

No hay diferencia entre comillas simples y dobles en JavaScript.

La especificación es importante:

Quizás haya diferencias de rendimiento, pero son absolutamente mínimas y pueden cambiar todos los días según la implementación de los navegadores. La discusión adicional es inútil a menos que su aplicación JavaScript tenga cientos de miles de largo.

Es como un punto de referencia si 

a=b;

es más rápido que 

a = b;

(espacios adicionales)

hoy, en un navegador y plataforma en particular, etc.

Cuando uso CoffeeScript, uso comillas dobles. Estoy de acuerdo en que debes elegir cualquiera de los dos y seguirlo. CoffeeScript le ofrece interpolación cuando usa comillas dobles. 

"This is my #{name}"

ES6 está utilizando ticks de retroceso (`) para cadenas de plantillas. Lo que probablemente tiene una buena razón, pero al codificar puede ser engorroso cambiar el carácter de los literales de cadena de comillas o comillas dobles a ticks de retroceso para obtener la función de interpolación. Puede que CoffeeScript no sea perfecto, pero usar el mismo carácter de cadena literal en todas partes (comillas dobles) y poder interpolar siempre es una buena característica. 

`This is my ${name}`

Hay personas que afirman ver diferencias de rendimiento: hilo de lista de correo antiguo . Pero no pude encontrar ninguno de ellos para confirmar.

Lo principal es ver qué tipo de comillas (doble o simple) estás usando dentro de tu cadena. Ayuda a mantener baja la cantidad de escapes. Por ejemplo, cuando está trabajando con html dentro de sus cadenas, es más fácil usar comillas simples para que no tenga que escapar de todas las comillas dobles alrededor de los atributos.

Si saltas hacia adelante y hacia atrás entre JavaScript y C #, es mejor entrenar tus dedos para la convención común que es comillas dobles.

He estado ejecutando lo siguiente unas 20 veces. Y parece que las comillas dobles son aproximadamente un 20% más rápidas.

La parte divertida es que, si cambia la parte 2 y la parte 1, las comillas simples son aproximadamente un 20% más rápidas. 

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

Después de leer todas las respuestas que dicen que tal vez sea más rápido o tenga ventajas, diría que la comilla doble es mejor o quizás también más rápida porque Compilador de cierre de Google convierte comillas simples en comillas dobles.

No hay estrictamente ninguna diferencia, por lo que es principalmente una cuestión de gusto y de lo que está en la cadena (o si el código JS en sí está en una cadena), para mantener baja la cantidad de escapes.

La leyenda de la diferencia de velocidad podría provenir del mundo PHP, donde las dos citas tienen un comportamiento diferente.

Si su fuente JS es: 

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

La fuente HTML será: 

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

o para HTML5 

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

JS permite arreglos así: 

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

Pero si lo cadenas, será por razones compatibles: 

JSON=["this","that"]

Estoy seguro de que esto lleva algún tiempo.

Solo para agregar mis 2 centavos: Al trabajar con JS y PHP hace unos años, me he acostumbrado a usar comillas simples para poder escribir el carácter de escape ('\') sin tener que escapar también. . Usualmente lo usaba cuando escribía cadenas crudas con rutas de archivos, etc. ( http: //en.wikipedia. org / wiki / String_literal # Raw_strings )

De todos modos, mi convención terminó convirtiéndose en el uso de comillas simples en cadenas sin formato de tipo identificador, como if (typeof s == 'string') ... (en el que los caracteres de escape nunca se usarían nunca), y comillas dobles para textos , como " Hey, ¿qué pasa? " ;. También uso comillas simples en los comentarios como una convención tipográfica para mostrar los nombres de los identificadores. Esto es solo una regla general, y me separo solo cuando es necesario, como cuando escribo cadenas HTML '<a href="#"> like so <a>' (aunque también podría revertir las comillas aquí). También soy consciente de que, en el caso de JSON, se usan comillas dobles para los nombres, pero fuera de eso, personalmente, prefiero las comillas simples cuando se requiere nunca para el texto entre las comillas. - como document.createElement('div').

En pocas palabras, y como algunos han mencionado / aludido, elija una convención, cumpla con ella y solo se desvíe cuando sea necesario.

Puede usar comillas simples o comillas dobles. Esto le permite, por ejemplo, anidar fácilmente JavaScript dentro de los atributos HTML, sin la necesidad de escapar de las comillas. Lo mismo ocurre cuando creas JavaScript con PHP.

La idea general es: si es posible, utilice citas que no necesite escapar. Menos escape = mejor código.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top