variable - undefined html javascript




Quando utilizzare le virgolette doppie o singole in JavaScript? (20)

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

Vedo sempre più librerie JavaScript là fuori usando le virgolette singole quando si gestiscono le stringhe. Quali sono i motivi per usare l'uno sull'altro? Ho pensato che fossero praticamente intercambiabili.


Esaminando i pro e i contro

A favore delle citazioni singole

  • Meno confusione visiva
  • Generazione di HTML: gli attributi HTML sono solitamente delimitati da virgolette.

elem.innerHTML = '<a href="' + url + '">Hello</a>';
Tuttavia, le virgolette singole sono altrettanto legali in HTML.

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

Inoltre, l'HTML in linea è normalmente un anti-pattern. Preferisci modelli.

  • Generazione di JSON: sono consentite solo virgolette doppie in JSON.

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

Di nuovo, non dovresti costruire COSI in questo modo. JSON.stringify () è spesso sufficiente. In caso contrario, utilizzare i modelli.

A favore delle doppie virgolette

  • Le doppie sono più facili da individuare se non si dispone di codice colore. Come nel log di una console o in qualche tipo di configurazione di visualizzazione.
  • Somiglianza con altre lingue: nella programmazione di shell (Bash, ecc.) Esistono letterali di stringa con quotatura singola, ma gli escape non vengono interpretati al loro interno. C e Java usano le virgolette doppie per le stringhe e le virgolette singole per i caratteri.
  • Se vuoi che il codice sia JSON valido, devi usare le virgolette doppie.

A favore di entrambi

Non c'è differenza tra i due in JavaScript. Pertanto, è possibile utilizzare qualsiasi cosa sia conveniente al momento. Ad esempio, i seguenti valori letterali stringa producono tutti la stessa stringa:

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

Virgolette singole per stringhe interne e doppie per esterni. Ciò consente di distinguere le costanti interne dalle stringhe che devono essere visualizzate all'utente (o scritte su disco, ecc.). Ovviamente, dovresti evitare di inserire quest'ultimo nel tuo codice, ma questo non può sempre essere fatto.



A rigor di termini, non c'è differenza di significato; quindi la scelta si riduce alla convenienza.

Qui ci sono diversi fattori che potrebbero influenzare la tua scelta:

  • House style: alcuni gruppi di sviluppatori usano già una convenzione o l'altra.
  • Requisiti lato client: userete le virgolette all'interno delle stringhe? (Vedi la risposta di Ady).
  • Linguaggio lato server: le persone VB.Net possono scegliere di utilizzare le virgolette singole per java-script in modo che gli script possano essere compilati lato server (VB.Net utilizza le doppie virgolette per le stringhe, quindi le stringhe java-script sono facili da distinguere se usano virgolette singole).
  • Codice libreria: se stai utilizzando una libreria che utilizza uno stile particolare, potresti prendere in considerazione l'utilizzo dello stesso stile.
  • Preferenza personale: potresti vedere l'uno o l'altro stile migliore.

Diamo un'occhiata a ciò che fa un riferimento.

All'interno di jquery.js, ogni stringa è doppia citazione.

Quindi, a partire da ora, userò le stringhe con doppie virgolette. (Stavo usando il singolo!)


La ragione più probabile per l'utilizzo del singolo o del doppio in diverse librerie è la preferenza del programmatore e / o la coerenza dell'API.

Oltre a essere coerenti, usa quello che meglio si adatta alla stringa :.

Usare l'altro tipo di citazione come letterale:

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

... ma questo può complicarsi ...

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

Un'altra opzione, nuova in ES6, sono letterali Template che usano il carattere back-tick :

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

I valori letterali di modello offrono una sintassi pulita per: interpolazione variabile, stringhe su più righe e altro.


Mi piacerebbe dire che la differenza è puramente stilistica, ma ho davvero dei dubbi. Considera il seguente esempio:

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

In Safari, Chrome, Opera e Internet Explorer (testato in IE7 e IE8), ciò restituirà quanto segue:

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

Tuttavia, Firefox produrrà un risultato leggermente diverso:

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

Le virgolette singole sono state sostituite da virgolette. (Si noti anche come lo spazio di indentazione è stato sostituito da quattro spazi.) Questo dà l'impressione che almeno un browser analizzi JavaScript internamente come se tutto fosse stato scritto usando virgolette doppie. Si potrebbe pensare, ci vuole Firefox meno tempo per analizzare JavaScript se tutto è già scritto secondo questo 'standard'.

Il che, a proposito, mi rende un panda molto triste, dal momento che penso che le virgolette singole siano molto più belle nel codice. Inoltre, in altri linguaggi di programmazione, di solito sono più veloci da utilizzare rispetto alle doppie virgolette, quindi avrebbe senso solo se lo stesso si applica a JavaScript.

Conclusione: penso che dobbiamo fare più ricerche al riguardo.

Modifica: Questo potrebbe spiegare i risultati dei test di Peter-Paul Koch nel 2003.

Sembra che le virgolette singole siano a volte più veloci in Explorer Windows (circa 1/3 dei miei test hanno mostrato tempi di risposta più rapidi), ma se Mozilla mostra una differenza, gestisce le virgolette leggermente più velocemente. Non ho trovato alcuna differenza in Opera.

Modifica 2014: le versioni moderne di Firefox / Spidermonkey non lo fanno più.


Parlando di prestazioni, le virgolette non saranno mai il collo di bottiglia, tuttavia, le prestazioni sono le stesse in entrambi i casi.

Parlando di velocità di codifica, se si usa ' per delimitare una stringa, è necessario sfuggire alle virgolette. È più probabile che sia necessario utilizzare " all'interno della stringa, ad esempio:

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

Quindi, preferisco usare ' per delimitare la stringa, quindi devo sfuggire meno caratteri.


Se hai a che fare con JSON, va notato che in senso stretto, le stringhe JSON devono essere doppie. Certo, molte librerie supportano anche le virgolette singole, ma ho avuto grandi problemi in uno dei miei progetti prima di rendermi conto che il solo quotare una stringa non è in realtà secondo gli standard JSON.


Se stai usando jshint , genererà un errore se usi una stringa doppia citazione.

L'ho usato attraverso lo scaffale di Yeoman di AngularJS ma forse c'è un modo per configurarlo.

A proposito, quando gestisci l'HTML in JavaScript, è più semplice utilizzare una virgoletta singola:

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

E almeno JSON sta usando virgolette doppie per stringhe reprensive.

Non c'è un modo banale per rispondere alla tua domanda


Spero di non aggiungere qualcosa di ovvio, ma ho dovuto fare i conti con Django Ajax e JSON su questo.

Supponendo che nel codice HTML vengano utilizzate virgolette doppie, come dovrebbe essere normalmente, consiglio vivamente di utilizzare virgolette singole per il resto in JavaScript.

Quindi sono d'accordo con @ady ma con una certa attenzione.

La mia linea di fondo è: in JavaScript probabilmente non importa, ma non appena lo si incorpora in HTML o simili si inizia a avere problemi. Dovresti sapere cosa sta effettivamente sfuggendo, leggendo, passando la tua corda.

Il mio caso semplice era:

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

Puoi individuare il \ 'nel terzo campo di showThis.

La doppia citazione non ha funzionato!

È chiaro perché, ma è anche chiaro il motivo per cui dovremmo attenerci alle virgolette singole ... .. immagino ..

Questo caso è un incorporamento HTML molto semplice, l'errore è stato generato da una semplice copia / incolla da un codice JavaScript 'double quoted'.

Quindi, per rispondere alla domanda:

Prova a utilizzare le virgolette singole all'interno di HTML. Potrebbe salvare un paio di problemi di debug ...


Un motivo (stupido) per usare le virgolette singole è che non richiedono che tu prenda il tasto Maiuscole per scriverle, mentre una virgola doppia fa. (Suppongo che la stringa media non richieda l'escaping, che è una supposizione ragionevole). Ora, supponiamo che ogni giorno io codice 200 linee di codice. Forse in quelle 200 righe ho 30 citazioni. Forse digitare una virgola doppia richiede 0,1 secondi in più rispetto alla digitazione di una virgoletta singola (perché devo premere il tasto Maiusc). Poi in un dato giorno, io spreco 3 secondi. Se codice in questo modo per 200 giorni all'anno per 40 anni, allora ho sprecato 6,7 ore della mia vita. Cibo per la mente.


Un'altra cosa che potresti voler considerare come una ragione per passare dalle virgolette alle virgolette singole è l'aumento di popolarità degli script lato server. Quando usi PHP puoi passare variabili e analizzare funzioni javascript usando stringhe e variabili in PHP.

Se scrivi una stringa e utilizzi le virgolette doppie per il tuo PHP, non dovrai sfuggire a nessuna delle virgolette singole e PHP recupererà automaticamente il valore delle variabili per te.

Esempio: ho bisogno di eseguire una funzione javascript usando una variabile dal mio server.

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

Questo mi risparmia un sacco di problemi nel dover unire stringhe e posso effettivamente chiamare un javascript da PHP. Questo è solo un esempio, ma questo potrebbe essere uno dei diversi motivi per cui i programmatori sono inadempiente alle virgolette singole in javascript.

Citazione dai documenti PHP : "La caratteristica più importante delle stringhe con doppia citazione è il fatto che i nomi delle variabili verranno espansi. Consulta l'analisi delle stringhe per i dettagli."


Non c'è una soluzione migliore ; tuttavia, vorrei sostenere che le virgolette doppie possono essere più desiderabili a volte:

  • I nuovi arrivati ​​conosceranno già le doppie virgolette dalla loro lingua . In inglese, dobbiamo usare le doppie virgolette " per identificare un passaggio del testo citato. Se dovessimo usare una virgoletta singola ' , il lettore potrebbe interpretarlo erroneamente come una contrazione. "L'altro significato di un passaggio di testo circondato da ' indica il significato "colloquiale": ha senso rimanere coerenti con le lingue preesistenti, e questo probabilmente faciliterà l'apprendimento e l'interpretazione del codice.
  • Le doppie virgolette eliminano la necessità di sfuggire agli apostrofi (come nelle contrazioni). Considera la stringa: "I'm going to the mall" , rispetto alla versione altrimenti sfuggita: 'I\'m going to the mall' .
  • Le doppie virgolette indicano una stringa in molte altre lingue . Quando si impara un nuovo linguaggio come Java o C, vengono sempre utilizzate doppie virgolette. In Ruby, PHP e Perl, le stringhe tra virgolette singole non implicano escape con backslash mentre le doppie virgolette supportano tali stringhe.

  • La notazione JSON è scritta con virgolette.

Tuttavia, come altri hanno affermato, è molto importante rimanere coerenti.


Non c'è assolutamente alcuna differenza, quindi è principalmente una questione di gusti e di cosa c'è nella stringa (o se il codice JS stesso è in una stringa), per mantenere basso il numero di escape.

La leggenda della differenza di velocità potrebbe provenire dal mondo PHP, dove le due virgolette hanno un comportamento diverso.


Se la tua sorgente JS è:

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

La sorgente HTML sarà:

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

o per HTML5

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

JS consente array come quello:

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

Ma se lo stringa, sarà per ragione compatta:

JSON=["this","that"]

Sono sicuro che ci vorrà del tempo.


Se stai saltando indietro tra JavaScript e C #, è meglio allenare le dita per la convenzione comune che è doppia virgolette.


È possibile utilizzare le virgolette singole o doppie. Ciò consente ad esempio di annidare facilmente javascript all'interno degli attributi HTML, senza la necessità di sfuggire alle virgolette. Lo stesso è quando crei javascript con PHP.

L'idea generale è: se è possibile utilizzare tali citazioni che non è necessario fuggire. Meno fuga = codice migliore.


Ci sono persone che sostengono di vedere le differenze di rendimento: il vecchio thread di mailing list . Ma non ho potuto trovare nessuno di loro per essere confermato.

La cosa principale è guardare che tipo di virgolette (doppie o singole) si stanno usando all'interno della stringa. Aiuta a mantenere basso il numero di fughe. Ad esempio, quando si lavora con html all'interno delle stringhe, è più semplice utilizzare le virgolette singole in modo da non dover sfuggire a tutte le doppie virgolette attorno agli attributi.


Ho eseguito quanto segue circa 20 volte. E sembra che le doppie virgolette siano circa il 20% più veloci.

La parte divertente è che se cambi parte 2 e parte 1 in giro, le virgolette singole sono circa il 20% più veloci.

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

Quando uso CoffeeScript uso le virgolette doppie. Sono d'accordo che dovresti sceglierne uno e attenersi ad esso. CoffeeScript ti dà interpolazione quando usi le virgolette doppie.

"This is my #{name}"

ES6 utilizza i tick indietro (`) per le stringhe di template. Il che probabilmente ha una buona ragione, ma quando si codifica può essere complicato cambiare il carattere letterale delle stringhe tra virgolette o virgolette per tornare alla spunta per ottenere la caratteristica di interpolazione. CoffeeScript potrebbe non essere perfetto, ma usare lo stesso carattere letterale delle stringhe ovunque (virgolette doppie) ed essere sempre in grado di interpolare è una bella funzionalità.

`This is my ${name}`




conventions