In questo tutorial imparerai a conoscere i letterali modello JavaScript (stringhe di modello) con l'aiuto di esempi.
I letterali modello (stringhe modello) consentono di utilizzare stringhe o espressioni incorporate sotto forma di stringa. Sono racchiusi in backtick ``. Per esempio,
const name = 'Jack'; console.log(`Hello $(name)!`); // Hello Jack!
Nota : il letterale modello è stato introdotto nel 2015 (noto anche come ECMAScript 6 o ES6 o ECMAScript 2015). Alcuni browser potrebbero non supportare l'uso di letterali modello. Visita il supporto JavaScript Template Literal per saperne di più.
Valori letterali modello per stringhe
Nelle versioni precedenti di JavaScript, si utilizzava una virgoletta singola ''o una virgoletta doppia ""per le stringhe. Per esempio,
const str1 = 'This is a string'; // cannot use the same quotes const str2 = 'A "quote" inside a string'; // valid code const str3 = 'A 'quote' inside a string'; // Error const str4 = "Another 'quote' inside a string"; // valid code const str5 = "Another "quote" inside a string"; // Error
Per utilizzare le stesse virgolette all'interno della stringa, puoi utilizzare il carattere di escape .
// escape characters using const str3 = 'A \'quote\' inside a string'; // valid code const str5 = "Another "quote " inside a string"; // valid code
Invece di usare caratteri di escape, puoi usare letterali modello. Per esempio,
const str1 = `This is a string`; const str2 = `This is a string with a 'quote' in it`; const str3 = `This is a string with a "double quote" in it`;
Come puoi vedere, i letterali del modello non solo rendono facile includere citazioni, ma rendono anche il nostro codice più pulito.
Stringhe multilinea che utilizzano letterali modello
I valori letterali dei modelli semplificano anche la scrittura di stringhe multilinea. Per esempio,
Utilizzando i letterali modello, puoi sostituire
// using the + operator const message1 = 'This is a long message' + 'that spans across multiple lines' + 'in the code.' console.log(message1)
con
const message1 = `This is a long message that spans across multiple lines in the code.` console.log(message1)
L'output di entrambi questi programmi sarà lo stesso.
Questo è un lungo messaggio che si estende su più righe nel codice.
Interpolazione di espressioni
Prima di JavaScript ES6, utilizzavi l' +operatore per concatenare variabili ed espressioni in una stringa. Per esempio,
const name = 'Jack'; console.log('Hello ' + name); // Hello Jack
Con i letterali modello, è un po 'più facile includere variabili ed espressioni all'interno di una stringa. Per questo, usiamo la $(… )sintassi.
const name = 'Jack'; console.log(`Hello $(name)`); // template literals used with expressions const result = `The sum of 4 + 5 is $(4 + 5)`; console.log(result); console.log(`$(result < 10 ? 'Too low': 'Very high')`)
Produzione
Ciao Jack La somma di 4 + 5 è 9 Molto alta
Il processo di assegnazione di variabili ed espressioni all'interno del letterale del modello è noto come interpolazione.
Modelli con tag
Normalmente, useresti una funzione per passare argomenti. Per esempio,
function tagExample(strings) ( return strings; ) // passing argument const result = tagExample('Hello Jack'); console.log(result);
Tuttavia, puoi creare modelli con tag (che si comportano come una funzione) utilizzando i letterali modello. Si utilizzano tag che consentono di analizzare i letterali del modello con una funzione.
Il modello con tag è scritto come una definizione di funzione. Tuttavia, non si passano le parentesi ()quando si chiama il letterale. Per esempio,
function tagExample(strings) ( return strings; ) // creating tagged template const result = tagExample`Hello Jack`; console.log(result);
Produzione
("Ciao Jack")
Un array di valori stringa viene passato come primo argomento di una funzione tag. Puoi anche passare i valori e le espressioni come argomenti rimanenti. Per esempio,
const name = 'Jack'; const greet = true; function tagExample(strings, nameValue) ( let str0 = strings(0); // Hello let str1 = strings(1); // , How are you? if(greet) ( return `$(str0)$(nameValue)$(str1)`; ) ) // creating tagged literal // passing argument name const result = tagExample`Hello $(name), How are you?`; console.log(result);
Produzione
Ciao Jack, come stai?
In questo modo, puoi anche passare più argomenti nel temaplate etichettato.
