Share
ES6 è il futuro di JavaScript ed è già qui. È una specifica completa e offre molte funzionalità che una lingua richiede per rimanere competitiva con le esigenze del Web di oggi. Non tutto in ES6 è per te, e in questa piccola serie di post mostrerò caratteristiche che sono molto utili e già utilizzabili.
Se osservi il codice JavaScript che ho scritto, scoprirai che uso sempre le virgolette singole per definire le stringhe anziché le virgolette doppie. JavaScript va bene con entrambi: i seguenti due esempi fanno esattamente la stessa cosa:
var animal = "cow"; var animal = 'mucca';
Il motivo per cui preferisco le virgolette singole è che, prima di tutto, rende più semplice assemblare stringhe HTML con attributi correttamente citati in questo modo:
// con virgolette singole, non è necessario // sfuggire alle virgolette attorno al valore della classe var ma = ''; // questo è un errore di sintassi: var ma = ""; // funziona: var ma ="";
L'unica volta che devi scappare ora è quando usi una citazione singola nel tuo HTML, che dovrebbe essere un'occasione molto rara. L'unica cosa che posso pensare è inline JavaScript o CSS, il che significa che è molto probabile che tu faccia qualcosa di losco o disperato al tuo markup. Anche nei tuoi testi, probabilmente stai meglio non usare una singola citazione ma la tipograficamente più piacevole ".
A parte: ovviamente, l'HTML è abbastanza indulgente per omettere le virgolette o per usare virgolette singole attorno ad un attributo, ma preferisco creare un markup leggibile per gli umani piuttosto che basarsi sul perdono di un parser. Abbiamo reso il parser HTML5 indulgente perché la gente ha scritto marcature terribili in passato, non come una scusa per continuare a farlo.
Ho sofferto abbastanza nei giorni DHTML di document.write, creando un documento all'interno di un set di frame in una nuova finestra popup e altri abomini, per non voler usare mai più il carattere di escape. A volte, avevamo bisogno di triple, e questo era ancora prima che avessimo codifica a colori nei nostri editor. Era un casino.
Un altro motivo per cui preferisco le virgolette singole è che ho scritto un sacco di PHP nel mio tempo per siti Web di grandi dimensioni in cui le prestazioni erano molto importanti. In PHP, c'è una differenza tra virgolette singole e doppie. Le stringhe tra virgolette singole non hanno alcuna sostituzione in esse, mentre quelle a doppia quotatura lo fanno. Ciò significava ai tempi di PHP 3 e 4 che usare le virgolette singole era molto più veloce, poiché il parser non doveva passare attraverso la stringa per sostituire i valori. Ecco un esempio di cosa significa:
L'animale è $ animale e il suo suono è $ eco sonoro "L'animale è $ animale e il suo suono è $ suono"; // => L'animale è mucca e il suo suono è moo?>
JavaScript non ha avuto questa sostituzione, motivo per cui abbiamo dovuto concatenare stringhe per ottenere lo stesso risultato. Questo è abbastanza ingombrante, in quanto è necessario saltare dentro e fuori dalle quotazioni tutto il tempo.
Accentsconagua
var animal = 'mucca'; var sound = 'moo'; alert ('L'animale è' + animale + 'e il suo suono è' + suono); // => "L'animale è mucca e il suo suono è moo"Questo diventa davvero complicato con stringhe più lunghe e complesse e specialmente quando assembliamo molto HTML. E molto probabilmente, prima o poi, finirai con il tuo strumento di linting che si lamenta degli spazi bianchi finali dopo un + alla fine di una riga. Questo è basato sul problema che JavaScript non ha stringhe multi-linea:
// questo non funziona var list = '
Per aggirare il disordine che riguarda la gestione delle stringhe e la concatenazione in JavaScript, abbiamo fatto ciò che facciamo sempre, abbiamo scritto una libreria. Esistono molte librerie di template HTML, con Mustache.js che probabilmente è stato quello seminale. Tutti seguono la propria sintassi non standardizzata e funzionano in questo stato d'animo. È un po 'come dire che scrivi i tuoi contenuti in Markdown e poi ti rendi conto che ci sono molte idee diverse su cosa significa "Markdown".
Con l'avvento di ES6 e la sua standardizzazione, possiamo rallegrarci perché JavaScript ora ha un nuovo capretto sul blocco quando si tratta di gestire le stringhe: Template Strings. Il supporto delle stringhe di template nei browser attuali è incoraggiante: Chrome 44+, Firefox 38+, Microsoft Edge e WebKit sono tutti a bordo. Safari, purtroppo, non lo è, ma ci arriverà.
Il genio delle stringhe di template è che usa un nuovo delimitatore di stringhe, che non è in uso né in HTML né nei normali testi: il backtick (').
Usando questo abbiamo ora la sostituzione delle stringhe in JavaScript:
var animal = 'mucca'; var sound = 'moo'; alert ('L'animale è $ animale e il suo suono è $ suono'); // => "L'animale è mucca e il suo suono è moo" Il $ costrutto può assumere qualsiasi espressione JavaScript che restituisca un valore. È possibile, ad esempio, eseguire calcoli o accedere alle proprietà di un oggetto:
var out = 'dieci volte due totalmente è $ 10 * 2'; // => "dieci volte due totalmente è 20" var animal = nome: 'cow', ilk: 'bovine', davanti: 'moo', indietro: 'milk', alert ('The $ animal.name è del lak $ animal.ilk, un'estremità è per $ animal.front, l'altra per $ animal.back '); // => / * La vacca è di razza bovina, un'estremità è per il muggito, l'altra per il latte * / L'ultimo esempio mostra anche che le stringhe multi-linea non sono più un problema.
Un'altra cosa che puoi fare con le stringhe di template è anteponendole con un tag, che è il nome di una funzione che viene chiamata e ottiene la stringa come parametro. Ad esempio, è possibile codificare la stringa risultante per gli URL senza dover ricorrere al nome orribile encodeURIComponent tutto il tempo.
function urlify (str) return encodeURIComponent (str); urlifica 'http://beedogs.com'; // => "http% 3A% 2F% 2Fbeedogs.com" urlifica 'woah $ £ $% £ ^ $ "'; // =>" woah% 24% C2% A3% 24% 25% C2% A3% 5E % 24% 22 "// nidifica anche: var str = 'foo $ urlify' && ' bar'; // =>" pippo% 26% 26 bar "
Funziona, ma fa affidamento sulla coercizione implicita da matrice a stringa. Il parametro inviato alla funzione non è una stringa, ma una matrice di stringhe e valori. Se usato nel modo in cui mostro qui, viene convertito in una stringa per comodità, ma il modo corretto è quello di accedere direttamente ai membri dell'array.
All'interno della funzione tag puoi non solo ottenere la stringa completa ma anche le sue parti.
tag funzione (stringhe, valori) console.log (stringhe); console.log (valori); console.log (stringhe [1]); tag 'tu $ 3 + 4 it'; / * => Matrice ["tu", "it"] 7 it * /
C'è anche una serie di stringhe raw fornite all'utente, il che significa che ottieni tutti i caratteri nella stringa, inclusi i caratteri di controllo. Ad esempio, aggiungi una interruzione di riga con \ n. Otterrai il doppio spazio nella stringa, ma il \ n personaggi nelle stringhe raw:
tag funzione (stringhe, valori) console.log (stringhe); console.log (valori); console.log (stringhe [1]); console.log (string.raw [1]); tag 'tu $ 3 + 4 \ nit'; / * => Matrice ["tu", "it"] 7 it \ nit * /
Le stringhe di template sono una di quelle piccole vince in ES6 che possono essere usate in questo momento. Se devi supportare i browser più vecchi, puoi naturalmente trasferire il tuo ES6 in ES5; puoi eseguire un test di funzionalità per il supporto delle stringhe di modelli utilizzando una libreria come featuretests.io o con il seguente codice:
var templatestrings = false; prova nuova funzione ("'2 + 2'"); templatestrings = true; catch (err) templatestrings = false; if (templatestrings) // ... Ecco alcuni altri articoli sulle stringhe di template:
Questo articolo fa parte della serie di sviluppo web di Microsoft tech evangelist sull'apprendimento pratico di JavaScript, i progetti open source e le migliori pratiche di interoperabilità, tra cui il browser Microsoft Edge e il nuovo motore di rendering EdgeHTML.
Ti invitiamo a testare su browser e dispositivi tra cui Microsoft Edge, il browser predefinito per Windows 10, con strumenti gratuiti su dev.modern.IE:
Apprendimento tecnologico approfondito su Microsoft Edge e la piattaforma Web dei nostri ingegneri ed evangelisti:
Più strumenti e risorse multipiattaforma gratuiti per la piattaforma Web:
