Share
Benvenuti alla seconda parte della mia serie su ECMAScript 6! Uno dei miei nuovi standard Web preferiti di Microsoft Edge, il nuovo motore di rendering del browser che stiamo creando in Microsoft, è l'ampio supporto che offre per ECMAScript 6. Quindi ho scritto questa serie per illustrarti alcune delle cose interessanti che puoi fare con ECMAScript 6 durante la scrittura di applicazioni di grandi dimensioni per il web.
Nella prima puntata, ho trattato Class and Inheritance. In questo articolo, mi concentrerò sulle stringhe di template basate sulla mia esperienza personale nella creazione di espressioni incorporate.
Quando lavoro su Babylon.js, devo fare i conti con il codice degli shader che può essere visto, per motivi di comprensione, come un grosso mucchio di testo (che assomiglia a C).
Puoi trovare un esempio in questo repository GitHub.
Il problema quando si ha a che fare con un testo lungo in JavaScript è il ritorno della riga. Quante volte hai scritto questo genere di cose?
var myTooLongString = "Molto tempo fa, in una galassia lontana," + "molto lontano ..." + "È un periodo di guerra civile". + "Le astronavi ribelli, colpendo" + "da una base nascosta, hanno vinto" + "la loro prima vittoria contro" + "il malvagio Impero Galattico.";
Quando devi lavorare con shader lunghi più di 200 righe, questo diventa rapidamente un vero dolore.
Fortunatamente, ECMAScript 6 viene fornito con la nuova funzione di stringhe del modello. Tra le altre meraviglie, una stringa di template supporta direttamente le stringhe multilinea:
var myTooLongString = 'Molto tempo fa, in una galassia molto lontana ... È un periodo di guerra civile. Le astronavi ribelli, colpendo da una base nascosta, hanno vinto la loro prima vittoria contro il malvagio Impero Galattico ";
Poiché tutti i caratteri sono significativi all'interno di una stringa di modello, non posso aggiungere spazi bianchi iniziali.
Ora come sviluppatori JavaScript abbiamo tre modi per definire le stringhe:
Il supporto multilinea non è l'unica caratteristica delle stringhe di modelli. In effetti, puoi anche usare le stringhe di template per sostituire i segnaposto con valori di variabili, come potresti aver fatto printf in C / C ++ o string.Format in C #:
Accentsconagua
var items = []; items.push ( "banana"); items.push ( "tomato"); items.push ("sciabola leggera"); var totale = 100,5; result.innerHTML = 'Hai $ items.length articoli nel tuo carrello per un totale di $$ total';Questo codice produce il seguente output:
Hai 3 articoli nel carrello per un totale di $ 100,5
Abbastanza utile, giusto?
Ricorda il modo ECMAScript 5:
result.innerHTML = "Hai" + items.length + "articolo / i nel tuo carrello per un totale di $" + totale;
La fase finale della specifica delle stringhe del template riguarda l'aggiunta di una funzione personalizzata prima della stringa stessa per creare un tagged stringa di modello:
var myUselessFunction = function (stringhe, ... valori) var output = ""; per (indice var = 0; indice < values.length; index++) output += strings[index] + values[index]; output += strings[index] return output; result.innerHTML = myUselessFunction 'You have $items.length item(s) in your basket for a total of $$total';
La funzione qui viene utilizzata per ottenere l'accesso sia alla parte della stringa costante che ai valori delle variabili valutate.
Nell'esempio precedente, stringhe e valori sono i seguenti:
Come puoi vedere, ogni valore [n] è circondato da stringhe di costanti (stringhe [n] e stringhe [n + 1]).
Ciò consente di controllare come viene costruita la stringa di output finale. Nel mio precedente esempio, ho solo riprodotto il comportamento di base delle stringhe di template, ma possiamo andare oltre e aggiungere un'elaborazione interessante sulla stringa.
Ad esempio, ecco una parte di codice per bloccare le stringhe che tentano di inserire elementi DOM personalizzati:
var items = []; items.push ( "banana"); items.push ( "tomato"); items.push ("sciabola leggera"); var total = "Cercando di dirottare il tuo sito
"; var myTagFunction = function (stringhe, ... valori) var output =" "; for (indice var = 0; indice < values.length; index++) var valueString = values[index].toString(); if (valueString.indexOf("<") !== -1) // Far more complex tests can be implemented here :) return "String analyzed and refused!"; output += strings[index] + values[index]; output += strings[index] return output; result.innerHTML = myTagFunction 'You have $items.length item(s) in your basket for a total of $$total';Le stringhe di modelli con tag possono essere utilizzate per un sacco di cose come sicurezza, localizzazione, creazione di una lingua specifica per il dominio, ecc.
Le funzioni tag hanno un'opzione speciale quando si accede alle costanti delle stringhe: possono essere utilizzate strings.raw per ottenere i valori di stringa senza escape. Ad esempio, in questo caso \ n non sarà visto come un solo personaggio ma in realtà due: \ e n.
L'obiettivo principale è consentire l'accesso alla stringa così come è stata inserita:
var myRawFunction = function (stringhe, ... valori) var output = ""; per (indice var = 0; indice < values.length; index++) output += strings.raw[index] + values[index]; output += strings.raw[index] console.log(strings.length, values.length); return output; result.innerHTML = myRawFunction 'You have $items.length item(s) in your basket\n.For a total of $$total';
Questo codice genera il seguente output:
Hai 3 articoli nel carrello. \ N.Per un totale di $ 100,5
Puoi anche usare una nuova funzione di String: String.raw (). Questa funzione è una funzione incorporata che fa esattamente ciò che fa il mio esempio precedente:
result.innerHTML = String.raw 'Hai $ items.length articoli nel tuo carrello \ n.Per un totale di $$ total';
Microsoft Edge e le ultime versioni di stringhe di modelli di supporto Chrome (41+), Opera (28+) e Firefox (35+) e puoi monitorare il livello del supporto ECMAScript 6 in generale qui. Quindi, se stai prendendo di mira il Web moderno, non c'è motivo per non abbracciare stringhe di modelli.
Per una visione completa dei nuovi standard e funzionalità Web in Microsoft Edge-like WebAudio, è possibile visualizzare l'elenco completo su dev.modern.ie/platform/status.
Potrebbe sorprendervi un po ', ma Microsoft ha un sacco di apprendimento gratuito su molti argomenti JavaScript open source, e siamo in missione per creare molto di più con Microsoft Edge. Controlla il mio:
Oppure le serie di apprendimento del nostro team:
E alcuni strumenti gratuiti: Visual Studio Community, Azure Trial e strumenti di test cross-browser per Mac, Linux o Windows.
Questo articolo fa parte della serie di web dev tech di Microsoft. Siamo entusiasti di condividere Microsoft Edge e il nuovo Motore di rendering EdgeHTML con te. Ottieni macchine virtuali gratuite o test in remoto sul tuo dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/.
