Un nuovo elemento aggiunto in ES6 è il letterale template. È un nuovo tipo per la creazione di stringhe in JavaScript che aggiunge diverse importanti nuove funzionalità, come la possibilità di creare stringhe su più righe e includere un'espressione in una stringa. Come sviluppatore, tutte queste funzionalità possono migliorare le tue capacità di manipolare le stringhe e permetterti di creare stringhe dinamiche.
Questo post illustrerà i valori letterali del modello e come usarli in JavaScript.
Cosa sono i valori letterali dei modelli JavaScript (stringhe di modelli)?
“ Letterali modello ” sono comunemente conosciuti come “ Stringhe di modelli ”. Sono circondati dal backtick ( “ ) carattere, rispetto alle virgolette nelle stringhe. I suoi segnaposto sono indicati dal simbolo del dollaro “ $ ”, e parentesi graffe {} Piace ' ${espressione} ” è accettabile nei valori letterali del modello. Se vuoi usare un'espressione, puoi inserirla nel ' ${espressione} ” casella all'interno dei backtick.
Un valore letterale modello è una versione migliorata di una stringa JavaScript standard. Le sostituzioni fanno una distinzione significativa tra un letterale modello e una stringa ordinaria. Puoi integrare variabili ed espressioni in una stringa usando i sostituti. Queste variabili ed espressioni avranno i loro valori sostituiti automaticamente dal motore JavaScript.
Sintassi
Utilizzare la sintassi seguente per dichiarare una singola stringa utilizzando i valori letterali del modello:
` testo stringa `
Per più righe, segui la sintassi indicata:
` riga di testo stringa 1
riga di testo stringa
Se vuoi aggiungere un'espressione all'interno dei backtick, viene utilizzata la seguente sintassi:
Dai un'occhiata ai seguenti esempi per sviluppare una migliore comprensione del concetto dichiarato.
Esempio 1: dichiarare una stringa a riga singola utilizzando i valori letterali del modello JavaScript
Di solito, per creare una stringa, è necessario utilizzare virgolette singole o doppie, ma nei valori letterali del modello è possibile creare una stringa come segue:
console.log ( ` LinuxSuggerimento ` ) ;
L'output mostra che funziona allo stesso modo della semplice creazione di sting con l'aiuto di virgolette singole o doppie:
Esempio 2: dichiarare una stringa multilinea utilizzando i valori letterali del modello JavaScript
Normalmente, per stampare più righe, utilizziamo l'operatore di concatenazione (+) e per aggiungere una nuova riga, è possibile utilizzare (\n), che spesso può rendere il codice complesso:
console.log ( 'Benvenuto in LinuxHint. \n ' + 'Il miglior sito web per le capacità di apprendimento.' ) ;
Mentre per usare i valori letterali del modello, puoi iniziare una nuova riga premendo invio dalla tastiera nel blocco backticks:
Il miglior sito web per capacità di apprendimento. ` ) ;
Produzione
Esempio 3: Stringa con sostituzioni di espressioni
Qui, prima creeremo due variabili “ X ' e ' Y ”, con i valori “ venti ' e ' quindici ”, rispettivamente:
var x = venti ;variabile y = quindici ;
Quindi, crea una variabile ' somma ” per aggiungere il “ X ' e ' Y ”:
Se vuoi sommare due numeri e visualizzare la somma di questi numeri sulla console, normalmente è necessario concatenare le stringhe e le variabili in un normale formato di stringa che spesso crea un pasticcio per usare ripetutamente le virgolette singole o doppie con le stringhe e unirle tra loro e con le variabili usando ( + ):
Mentre, usando i valori letterali del modello, devi solo specificare le stringhe con le variabili come espressione all'interno del ' ${} ” nel blocco backtick:
Produzione
Abbiamo raccolto tutte le informazioni essenziali relative ai valori letterali del modello.
Conclusione
“ Letterali modello ', conosciuto anche come ' Stringhe di modelli ”, è una versione migliorata di una stringa JavaScript standard circondata dal backtick ( “ ) carattere, rispetto alle virgolette nelle stringhe. Consente la creazione di stringhe a riga singola e multilinea senza l'uso dell'operatore di concatenazione e include un'espressione in una stringa. Questo post ha discusso i valori letterali del modello in JavaScript con esempi spiegati.