Template literals in JavaScript

In questo articolo vedremo la sintassi del templale literals, in particolare come inserire del testo e distribuirlo su una o più righe, inserire delle variabili o costanti e anche delle funzioni, di seguito vedremo alcuni esempi.

Per scrivere il carattere backtick dalla tastiera usare la combinazione Alt+96.

Inserire del testo su una o più righe

Il codice seguente stampa nella console del browser una stringa su una sola riga

const text = `Lorem reprehenderit in consequat ullamco ut anim ea fugiat anim cupidatat voluptate.`;
console.log(text);
// Output 
// Lorem reprehenderit in consequat ullamco ut anim ea fugiat anim cupidatat voluptate.

se invece vogliamo distribuire il testo su più righe

const text = `Excepteur enim reprehenderit proident 
adipisicing minim irure dolore proident 
excepteur minim et exercitation ex mollit.`;
console.log(text);
// Output 
//  Excepteur enim reprehenderit proident 
//  adipisicing minim irure dolore proident 
//  excepteur minim et exercitation ex mollit.

per quest'ultimo esempio se volessimo usare le virgolette singole o doppie per avere lo stesso risultato cioè distribuire il testo su più righe allora dovremmo scrivere

const text = "Excepteur enim reprehenderit proident\n"+
"adipisicing minim irure dolore proident\n"+
"excepteur minim et exercitation ex mollit.\n";
console.log(text);
// Output 
//  Excepteur enim reprehenderit proident 
//  adipisicing minim irure dolore proident 
//  excepteur minim et exercitation ex mollit.

quindi possiamo notare come in questo caso la sintassi del templale literals sia molto più sintetica.

Inserire variabili o costanti

I template literals possono anche contenere altre parti chiamate segnaposto (placeholder), delimitate da un simbolo di dollaro e parentesi graffe ${placeholder}, ecco un esempio

const firstname = "Michele";
const lastname = "De Falco";
const output = `My name is ${firstname} ${lastname}`;
console.log(output);
// Output
// My name is Michele De Falco

tramite la sintassi ${firstname} e ${lastname} usiamo le variabili firstname, lastname nell'output, è anche possibile effettuare delle operazioni matematiche, ecco un esempio

const a = 10;
const b = 5;
const output1 = `The sum of ${a} plus ${b} is ${a+b}`;
console.log(output1);
// Output
// The sum of 10 plus 5 is 15
const output2 = `The product of ${a} by ${b} is ${a*b}`;
console.log(output2);
// Output
// The product of 10 by 5 is 50

sempre per quanto riguarda le variabili è anche possibile usare delle espressioni condizionali, ecco un esempio

const a = 17;
const output1 = `${ (a < 18) ? "you are a minor" : "you are of age" }`;
console.log(output1);
//Output
//you are a minor
const b = 49;
const output2 = `${ (b < 18) ? "you are a minor" : "you are of age" }`;
console.log(output2);
//Output
//you are of age

se un determinato valore è minore di 18 allora l'output sarà "you are a minor" altrimenti "you are of age".

Inserire delle funzioni

Vediamo come usare le funzioni nel template literals, ecco un esempio

function arithmetic_average (...n){
  let count = n.length;
  let sum = 0;
  for (let i = 0; i < count; i++) {
    sum += n[i];
  }
  let media = sum / count;
  return media;
};

const a = 12;
const b = 4;

const output = `The mean of ${a} and ${b} is ${arithmetic_average(12,4)}.`;
console.log(output);
// Output
// The mean of 12 and 4 is 8.

la funzione arithmetic_average calcola la media di un numero indefinito di numeri, tramite la sintassi ${arithmetic_average(12,4)} calcoliamo la media dei numeri 12 e 4, esiste anche un'altra sintassi per usare le funzioni ecco un esempio

function Now (string, date){
    return `${string}${date}`;
}

const date = new Date();
const output = Now`Today's date is ${date}`;
console.log(output);
// Output
// Today's date is ,Tue May 02 2023 11:33:41 GMT+0200 (Ora legale dell’Europa centrale)

con la sintassi Now`Today's date is ${date}` andiamo a manipolare l'output.