Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. ES6
Code

Tutorial avanzato su ECMAScript 6: stringhe template

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called ECMAScript 6 Power Tutorial.
ECMAScript 6 Power Tutorial: Class and Inheritance
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Italian (Italiano) translation by Cristiano Verondini (you can also view the original English article)

Benvenuto alla seconda parte di questa serie su ECMAScript 6. ECMAScript 6 è uno dei miei preferiti fra i nuovi standard implementati da Microsoft Edge, il nuovo motore di rendering che abbiamo creato alla Microsoft. E uno dei benefici di questo nuovo motore di rendering è proprio l'esteso supporto ad ECMAScript 6. Per questo motivo ho scritto questa serie di articoli: per poterti guidare attraverso alcune delle cose più interessanti che è possibile fare con ECMAScript 6 nel caso in cui si debbano scrivere applicazioni complesse per il web.

Nella prima puntata ho parlato di Classi ed Ereditarietà. In questo articolo mi concentrerò invece sulle stringhe template basandomi soprattutto sulla mia personale esperienza nella creazione di stringhe che devono incorporare, al loro interno, dei valori che provengano da variabili o funzioni.

La risoluzione del problema dell'andata a capo

Mentre lavoravo su Babylon.js ho avuto a che fare con codice per la definizione di shaders (porzioni di codice usate soprattutto nella computer graphics 3D per definire l'aspetto delle superfici, ndt) che, ai fini di questa trattazione, può essere visto come una grossa porzione di testo (che incidentalmente assomiglia a codice scritto in C).

Puoi trovare un esempio di tale codice in questo repository su GitHub.

Il problema che si incontra quando in JavaScript ci si trova ad avere a che fare con testi molto lunghi sono le andate a capo. Quante volte infatti abbiamo scritto codice di questo tipo?

Nel momento in cui si deve lavorare col codice di shaders che può essere anche lungo più di 200 righe, il problema appare evidente.

Per fortuna ECMAScript 6 supporta, fra le altre, una nuova caratteristica chiamata 'stringhe template' (stringhe con dei particolari marcatori al loro interno che indicano i punti in cui inserire valori di variabili o risultati di funzioni, ndt). Una stringa di questo tipo, oltre ad esporre altre funzionalità, supporta anche la creazione di stringhe multilinea.

Siccome tutti i caratteri inseriti all'interno di una stringa template sono significativi, non è possibile inserire spazi davanti alle righe al fine di indentare meglio il codice.

Con questo nuovo standard JavaScript supporta quindi tre modi diversi per definire stringhe:

  • racchiudendole fra “” (doppie virgolette)
  • racchiudendole fra ‘’ (singole virgolette)
  • racchiudendole fra `` (il carattere back-tick o accento grave)

A questo punto viene spontaneo chiedersi dove interviene la parte relativa a 'template'

Il supporto per stringhe su più righe non è l'unica caratteristica delle stringhe template. Infatti è possibile far sì che vengano sostituiti all'interno della stringa dei placeholder (segnaposto) con dei valori di variabili come è possibile, ad esempio, fare in C/C++ con la funzione printf o in C# con il metodo string.Format.

Questo codice produce il seguente risultato:

Piuttosto comodo, vero?

Ricordiamo come avremmo dovuto fare utilizzando ECMAScript 5:

Altre funzionalità attraverso l'uso dei tags

L'ultima parte delle specifiche sulle string template consente di inserire il nome di una funzione prima della definizione della stringa stessa per creare una stringa template tagged:

La funzione definita in questo esempio ha accesso sia alle parti costanti della stringa sia ai valori delle variabili contenute al suo interno.

Nell'esempio precedente, stringhe e valori sono i seguenti:

  • strings[0] = “You have “
  • values[0] = 3
  • strings[1] = “items in your basket for a total of $”
  • values[1] = 100.5
  • strings[2] = “”

Come si può facilmente vedere ogni valore contenuto nell'array 'values' in posizione n ha rispettivamente prima e dopo i valori contenuti nell'array 'strings' in posizione n ed n + 1.

Questa funzionalità consente di determinare il modo il cui la stringa viene costruita. Nell'esempio precedente abbiamo solamente utilizzato alcune funzionalità di base delle stringhe template ma è possibile andare oltre ed aggiungere funzioni di elaborazione anche complesse.

Ad esempio il seguente frammento di codice implementa un meccanismo per cercare di evitare l'iniezione di tag HTML nel DOM:

Le stringhe template con placeholder possono essere usate per un vasto insieme di applicazioni come sicurezza, traduzione, creazione di un proprio specifico domain language, ecc.

Stringhe in formato Grezzo (raw)

Le funzioni di riempimento per i placeholder hanno una particolare possibilità quando accedono a stringhe costanti: possono usare strings.raw per accedere ai valori non ancora elaborati . Ad esempio in questo caso la coppia di caratteri \n non viene vista come un unico carattere (andata a capo) ma due: \ e n.

La motivazione principale è quella di consentire l'accesso alla stringa esattamente così come è stata scritta:

Questo codice genera il seguente risultato:

È possibile usare anche una nuova funzione: String.raw(). Questa funzione è una funzione predefinita (built-in) che si comporta esattamente come l'esempio precedente:

Conclusioni

Microsoft Edge e le ultime versioni di Chrome (41+), Opera(28+) e Firefox (35+) supportano le stringhe template. È possibile comunque verificare il supporto dello standard ECMAScript 6 per ogni browser qui. Per questo motivo nel caso in cui si sviluppino applicazioni dedicate ai moderni browser non c'è alcun motivo per non usare le string template.

Per una panoramica delle nuove tecnologie e dei nuovi standard che saranno implementati in Microsoft Edge — come ad esempio WebAudio — è possibile vedere l'elenco completo in dev.modern.ie/platform/status.

Ulteriore pratica con JavaScript

Potrebbe essere una sorpresa, ma Microsoft ha un'intera collezione di strumenti per l'apprendimento gratuiti su argomenti riguardanti JavaScript e si propone di crearne molti altri con Microsoft Edge. Questi sono quelli che ho scritto:

Altri titoli prodotti dal nostro gruppo:

Ed alcuni strumenti liberamente disponibili: Visual Studio CommunityAzure Trial, e strumenti per il test cross-browser su Mac, Linux, o Windows.

Questo articolo fa parte della serie 'web tech dev' (tecnologie per lo sviluppo web) di Microsoft. Siamo entusiasti di poter condividere Microsoft Edge e il nuovo motore di rendering EdgeHTML con tutta la comunità. È possibile trovare macchine virtuali disponibili gratuitamente o effettuare test remoti su Mac, iOS, Android o Windows su http://dev.modern.ie/.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.