JavaScript Inserisci variabile nella stringa

1. Utilizzare i letterali del modello per inserire una variabile nella stringa in JavaScript
2. Usa la formattazione di base per inserire una variabile nella stringa in JavaScript
3. Usa sprintf() per inserire una variabile nella stringa in JavaScript
4. Conclusione

Questo articolo introdurrà come inserire una o più variabili in una stringa in JavaScript.

Utilizzare i letterali del modello per inserire una variabile nella stringa in JavaScript

Il concetto di letterali modello esiste da un po’ di tempo in JavaScript. In precedenza erano conosciute come stringhe modello. I letterali modello sono stati introdotti in ES6. Offre un modo più semplice per incorporare le variabili in una determinata frase rispetto a dover utilizzare ingombranti concatenazioni di stringhe. Invece di usare le virgolette (virgolette doppie o singole), usiamo i letterali del modello definiti con le virgolette (carattere ` nella tastiera). Mettiamo la stringa nei backtick e incorporiamo le nostre variabili nella frase. Di seguito sono riportati gli usi dei letterali modello.

Il solo inserimento di una stringa in una serie di backtick di per sé lo rende un valore di stringa. Ha la stessa funzionalità di contenere il testo della stringa tra virgolette doppie ". Il seguente codice di esempio descrive una semplice stringa utilizzata come modello letterale.

console.log(`Hello World`);

Produzione:

Hello World

Abbiamo una normale stringa pronta. Se dobbiamo visualizzare il valore di una variabile in questa stringa, dobbiamo incorporare le variabili. Durante l’incorporamento, racchiudiamo la variabile tra parentesi graffe con un segno $ che la precede. La sintassi per incorporare il valore della variabile è ${variableName}. Il seguente pezzo di codice ha la variabile eggCount incorporata in una normale stringa, con l’intero contenuto incapsulato tra parentesi graffe.

let eggCount = 20;
console.log(`On easter we decorted ${eggCount}` easter eggs);

Produzione:

On easter we decorted 20 easter eggs

Incorporamento di espressioni che coinvolgono variabili

A differenza della semplice concatenazione di stringhe, con i letterali del modello, possiamo includere espressioni con più di una variabile, in modo simile alla codifica in JavaScript con i letterali del modello. Se abbiamo bisogno di eseguire determinate operazioni come sommare, ottenere sottostringhe, date incluse, ecc., Tutte queste funzionalità e molto altro possono essere incorporate in una stringa con letterali modello. Il set di codice seguente ha una varietà di casi d’uso per farlo.

let a = 5;
b = 10;
console.log(`Sum of ${a} and ${b} is ${a + b}`);

Produzione:

Sum of 5 and 10 is 15

Un altro esempio relativo alla data è il seguente. Qui non usiamo alcuna variabile, ma le espressioni incluse nei letterali del modello funzionano da sole. Sono le stringhe con javascript che continuano a dover usare le virgolette doppie o le virgolette più e più volte come faremmo con le frasi concatenate:

console.log(`The date today is ${new Date().getDate()}-${
    new Date().getMonth() + 1}-${new Date().getFullYear()}`);

Produzione:

The date today is 7-4-2021

Osservazioni

• I letterali modello offrono uno dei modi più semplici per incorporare variabili in una frase.
• Offre anche il supporto per includere espressioni direttamente nella stringa e lasciare che il compilatore risolva i calcoli in fase di esecuzione.
• Ora possiamo facilmente includere virgolette singole e doppie in una stringa senza utilizzare caratteri di escape.
• I letterali modello rendono la codifica semplice, concisa, chiara e leggibile.
• Il valore dei letterali del modello può essere assegnato a una nuova variabile. Può essere considerato come una nuova stringa contenente i valori delle tue variabili.

Usa la formattazione di base per inserire una variabile nella stringa in JavaScript

Un altro modo per inserire ordinatamente i valori delle variabili nella nostra stringa è utilizzare la formattazione di base supportata in JavaScript. Utilizzando JavaScript console.log(), possiamo evitare la concatenazione e aggiungere segnaposto nella stringa mirata. I valori da assegnare vengono passati come argomenti come mostrato di seguito.

let a = 5;
b = 10;
console.log('Sum of %d and %d is %d.', a, b, (a + b));

Produzione:

Sum of 5 and 10 is 15.

Questa risoluzione delle variabili in valori funziona solo con console.log(). Quindi, non possiamo usarlo per l’assegnazione a una variabile diversa e non possiamo usarlo per visualizzare la nuova stringa risolta nell’interfaccia utente HTML.

Osservazioni

• Possiamo usare questo metodo durante il log con la funzione console.log(). Quindi, questo metodo non funzionerà per assegnare valori a una variabile. Pertanto, potrebbe non essere degno di scenari diversi dalla registrazione.
• Durante l’utilizzo della formattazione di base, i segnaposto utilizzati nella stringa devono corrispondere al tipo di dati passati come parametro. Ad esempio, per visualizzare un valore numerico, il segnaposto nella frase dovrebbe essere %d per il tipo di dati stringa è %s.

let op1 = 5, op2 = 10, operation = 'Sum';
console.log('%s of %d and %d is %d.', operation, op1, op2, (op1 + op2));

Produzione:

Sum of 5 and 10 is 15.

Se dimentichiamo di considerare il tipo di parametro passato, c’è una mancata corrispondenza del tipo. JavaScript proverà a digitare la variabile e aggiungerà il valore risultante alla stringa. Il codice seguente spiega questo fenomeno.

let op1 = 5, op2 = 10, operation = 'Sum';
console.log('%s of %d and %d is %d.', op1, op2, (op1 + op2), operation);

Produzione:

5 of 10 and 15 is NaN.

op1 è del tipo di dati Number e stiamo usando %s per iniettarlo nella stringa finale. %s eseguirà il cast automatico del numero in un tipo di dati stringa. Questa conversione procede senza problemi. Ma per la variabile operation, il valore è assegnato a un segnaposto che viene dopo nella sequenza. Questo segnaposto è %d. Quindi, qui un tipo di dati stringa viene convertito in un numero. La conversione non avviene. Quindi il risultato restituito è NaN, che vediamo come la parola finale dell’output.

Possiamo usare espressioni nei parametri, come abbiamo visto nel caso di (op1 + op2). Il javascript lo comprende e lo risolve come somma di conseguenza.

In questo caso, non possiamo usare le virgolette doppie nella stringa finale senza usare i caratteri di escape. Tuttavia, possiamo usare virgolette singole se incapsuliamo l’intera struttura tra virgolette doppie. Vedere il codice seguente.

let op1 = 5, op2 = 10, operation = 'Sum';
console.log('\'%s\' of %d and %d is %d.', operation, op1, op2, (op1 + op2));

Produzione:

'Sum' of 5 and 10 is 15.

Usa sprintf() per inserire una variabile nella stringa in JavaScript

Prima di Template Literals in ES6 di JavaScript, la comunità di sviluppo seguiva la libreria ricca di funzionalità di sprintf.js. La libreria ha un metodo chiamato sprintf(). sprintf.js è una libreria open source per JavaScript. Ha le sue implementazioni per Node.js e browser. Per l’installazione e le configurazioni, puoi visitare la loro pagina git-hub. sprintf() è usato per includere le variabili in una stringa senza usare la concatenazione di stringhe. L’utilizzo è il seguente.

let sprintf = require('sprintf-js').sprintf;

let op1 = 5, op2 = 10, operation = 'Sum';
sprintf('%s of %d and %d is %d.', operation, op1, op2, (op1 + op2));

Produzione:

Sum of 5 and 10 is 15.

Ha varie utili funzioni speciali come segue.

• La funzione sprintf() permette di specificare le variabili in un ordine diverso.
• Come la funzionalità dei letterali dei modelli, sprintf() risolve le espressioni incapsulate all’interno di stringhe.
• Supporta vari formati. Oltre alla stringa e al numero standard, la libreria sprintf-js supporta booleani, formati binari, ecc., Per l’output dei valori delle variabili in una stringa.
• Inoltre, puoi specificare gli argomenti come un array usando il metodo vsprintf() fornito dalla libreria.
• Consente inoltre di passare l’oggetto direttamente nel secondo argomento e risolve automaticamente le variabili.

Ci sono molte altre funzionalità offerte da questa libreria. Maggiori dettagli possono essere trovati nel file Read.me specificato nel loro link GitHub.

Conclusione

Quando si tratta di includere i valori delle variabili nella propria stringa senza ricorrere alle noiose concatenazioni di stringhe utilizzando il + e le virgolette doppie, l’opzione migliore sarà quella di utilizzare Template Literals, la funzione con backtick. Se è necessario inserire valori nella stringa di output solo per scopi di registrazione, la funzione console.log() di JavaScript è utile. Ha le opzioni di formattazione incluse per impostazione predefinita. La libreria sprintf.js è ricca di funzionalità e domina lo spazio in quanto offre molto di più dei letterali modello quando si tratta di incorporare i valori delle variabili. Ma questo ha un piccolo costo per familiarizzare con la biblioteca.