Come inserire una variabile in una stringa in JavaScript

Per inserire il valore di una variabile in una stringa JavaScript, usa un letterale di modello: racchiudi il testo tra backtick e inserisci la forma esatta `${variableName}` nel punto in cui vuoi mostrare il valore. Sostituisci variableName con il nome della tua variabile: JavaScript inserirà il suo valore corrente. I letterali di modello sono la soluzione più semplice per comporre la maggior parte delle stringhe. I segnaposto della console sono pratici per i log, mentre una libreria di formattazione può essere utile quando le sue funzioni giustificano una dipendenza aggiuntiva.

Usare i letterali di modello per inserire una variabile in una stringa in JavaScript

I letterali di modello usano i backtick al posto delle virgolette singole o doppie. JavaScript valuta l’espressione compresa tra ${ e } e ne converte il risultato in una stringa. Puoi assegnare la stringa ottenuta a una variabile, restituirla da una funzione oppure passarla a un’altra funzione. In una stringa tra virgolette, per esempio "Hello, ${name}", la sintassi di interpolazione rimane testo letterale: le virgolette singole e doppie non interpolano i valori.

Questo esempio compone un saluto, calcola il totale e assegna il testo completo a message:

const name = "Ada";
const price = 12;
const message = `Hello, ${name}. Your total is $${price + 3}.`;
console.log(message);

Hello, Ada. Your total is $15.

L’espressione ${price + 3} viene valutata per prima e contribuisce quindi il valore 15; il simbolo del dollaro che la precede è testo normale. Le espressioni possono includere calcoli aritmetici, accessi a proprietà o chiamate di funzione. Mantienile abbastanza brevi da rendere chiara la frase risultante. Un letterale di modello può estendersi su più righe e le virgolette al suo interno non richiedono caratteri di escape. Per includere la sequenza letterale ${, esegui l’escape del simbolo del dollaro scrivendo \${ con una sola barra rovesciata; per includere un backtick, esegui l’escape del backtick con una barra rovesciata. Se un’espressione restituisce un oggetto, JavaScript converte quel valore in stringa, ma il risultato potrebbe non essere la rappresentazione desiderata: per visualizzare i dati dell’oggetto in modo leggibile, scegli una conversione esplicita. L’interpolazione produce testo semplice, non HTML sicuro. Per visualizzare valori non attendibili in una pagina web, usa un’API DOM sicura e adatta al contesto.

Usare la formattazione di base per inserire una variabile in una stringa in JavaScript

Per mostrare informazioni diagnostiche, console.log() può formattare un messaggio con segnaposto seguiti dai relativi argomenti. In questo esempio %s formatta il nome e %d il punteggio; gli argomenti seguono lo stesso ordine dei segnaposto corrispondenti:

const name = "Ada";
const score = 42;
console.log("%s scored %d points.", name, score);

Il supporto dei segnaposto e le regole di conversione dipendono dall’implementazione della console. Si tratta quindi di una comodità per i log, non di un’API portabile per comporre stringhe. console.log() scrive informazioni diagnostiche e non restituisce il messaggio formattato da assegnare a una variabile o inserire in una pagina HTML. Se ti serve una stringa da riutilizzare, usa un letterale di modello o una libreria di formattazione. Disponi gli argomenti nello stesso ordine dei segnaposto corrispondenti: le console possono visualizzare in modo diverso gli argomenti in eccesso o i segnaposto senza argomento corrispondente.

Usare sprintf() per inserire una variabile in una stringa in JavaScript

sprintf-js è una libreria facoltativa la cui funzione sprintf() restituisce una stringa. In un progetto in cui il pacchetto è installato e CommonJS è disponibile, puoi caricare la funzione con const { sprintf } = require("sprintf-js"); e creare un valore con const message = sprintf("%s has %d items", name, count);. Queste righe illustrano l’API; l’installazione del pacchetto e le modalità di importazione dipendono dall’ambiente del progetto. Per i progetti basati su browser o moduli, segui le istruzioni di configurazione del progetto collegato.

sprintf() interpreta le direttive di formato e gli argomenti forniti; non valuta le espressioni JavaScript inserite nella stringa di formato. Ogni direttiva usa l’argomento corrispondente. Scegli questa libreria quando le sue funzionalità sono utili per formattazioni ripetute o più articolate e giustificano la dipendenza aggiuntiva. La documentazione del progetto descrive le direttive disponibili e le opzioni di configurazione. Per una frase breve con una variabile, di solito la sintassi integrata dei letterali di modello è più semplice.

Conclusione

Usa i letterali di modello per comporre stringhe ordinarie, inserire valori di variabili e includere espressioni JavaScript. Usa i segnaposto di console.log() per l’output diagnostico, ricordando che il comportamento può variare in base all’implementazione e che la chiamata non restituisce una stringa formattata riutilizzabile. Valuta sprintf-js quando le sue funzioni di formattazione sono abbastanza utili da giustificare la dipendenza. Per una semplice interpolazione, i backtick con ${...} sono in genere il modo più chiaro per inserire il valore corrente di una variabile in una stringa JavaScript.