Stringhe e Template in TypeScript

Scopriamo i vantaggi offerti con la nuova notazione per l'inserimento di stringhe costituite da più righe, all'interno di variabili.

Ultimo aggiornamento: 7 giorni fa

Uno dei grossi problemi per chi progetta l'interfaccia utente di app ibride o web app, è rappresentata dal mescolare elementi del dom, quindi tag html, con elementi variabili legati a valori elaborati con JavaScript.

Un tipico esempio potrebbe essere quello qui sotto, in cui valorizzo una variabile JavaScript con del codice html rappresentativo della vista che l'utente dovrà visualizzare:

let articolo = "<div><h1>Titolo dell'articolo</h1>" +
"<p>Corpo dell'articolo: riga 1</p>" +
"<p>Corpo dell'articolo: riga 2</p>" +
"<a href=''>Continua</a></div>";

La nuova versione ECMAScript 6 di JavaScript, ha introdotto la possibilità di gestire queste sequenze di stringhe, che richiedono più righe, in modo molto più efficiente, sfruttando il carattere "accento grave" indicato dal simbolo grafico `, che in inglese viene chiamato "backticks".

let articolo = `
<div>
  <h1>Titolo dell'articolo</h1>
  <p>Corpo dell'articolo: riga 1</p>
  <p>Corpo dell'articolo: riga 2</p>
  <a href=''>Continua</a>
</div>  
`;

Questo carattere non è presente nella tastiera italiana, quindi è necessario usare la combinazioni di tasti ALT più contemporaneamente, il numero del tastierino 96, per inserirlo (ALT+96). Il vantaggio è evidente in quanto si ha una maggior leggibilità, maggior facilità di inserimento in quanto non si ha più interferenza con doppie virgolette del codice HTML e minor probabilità d' inserire errori.

Questa tecnica viene usata in Angular per creare quelli che vengono chiamati i template, ossia sezioni html della pagina di un'applicazione, in cui si dovranno iniettare dei valori dinamici, provenienti dal corpo della classe del componente associato. Qui sotto è possibile vedere un tipico esempio, in cui sfrutto la notazione delle doppie parentesi graffe, per inserire del codice HTML statico e un pezzo dinamico con un segnaposto, che verrà "occupato...

Ohps... scusami la fastidiosa interruzione, ma per questioni gestionali, tutti i tutorial completi gli ho spostati a questo link: WEBSU. Risulterà più semplice anche per te seguirli e chiedermi dei consigli. Ti aspetto, dai... bastano 5 secondi. Non buttare tutto lo sforzo fatto per arrivare qui.

Hai tempo per leggere? Angular

Non farti scappare il mio libro appena aggiornato: "Angular 100% Operativo". Un corso completo su Angular per imparare rapidamente le tecniche per creare WebAPP e non solo. Prenotalo cliccando l'immagine qui sotto

Categoria: Angular