creareapp typescript e angularStringhe 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: 6 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 quell...

Per continuare la lettura, registrati gratuitamente alla "WebApp StartUniversity" oppure effettua il login.

Novità Amazon (-15% di sconto)

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:

Corso Angular 100% Operativo

Ti è servito il breve tutorial? Condividilo ADESSO sui social! Grazie :-)

Categoria:

Voto 4.8/5 basato su 80 Recensioni
© 2013-2018 CreareAPP.com - Tutti i diritti riservati. Tutorial e WebCAMP per creare app in Android e iOS
NB: Tutti i marchi citati sono di proprietà dei rispettivi proprietari. Android is a trademark of Google Inc.