Cosa significa $ {} (simbolo del dollaro e parentesi graffe) in una stringa in Javascript?

160

Non ho visto nulla qui o su MDN. Sono sicuro che mi sto perdendo qualcosa. Ci deve essere della documentazione su questo da qualche parte?

Funzionalmente, sembra che ti permetta di nidificare una variabile all'interno di una stringa senza fare concatenazione usando l' +operatore. Sto cercando documentazione su questa funzione.

Esempio:

var string = 'this is a string';

console.log(`Insert a string here: ${string}`);

Espandi frammento

— Darren Joy
fonte

Puoi dare un contesto a ciò che stai chiedendo? Questa domanda non è chiara come scritta.

— Sam Hanley

3

5

Questa non è una cattiva domanda. È una nuova funzionalità e di sicuro non riesco a trovare un duplicato su SO, anche se un esempio di ciò che è stato visto sarebbe stato buono.

@ squint — sono d'accordo, ma il codice di esempio e il riferimento alla fonte sarebbero stati utili.

— RobG

Esempio aggiunto. Il riferimento era in una sfida di codifica ma era un dato di fatto, come se fosse qualcosa che hai appena usato. Non ci avevo visto niente e non riuscivo a trovare nulla. (Negli ultimi anni non ho mai dovuto chiedere una Q qui. SO sembra avere quasi tutto ora ...)

— Darren Joy

192

Stai parlando di modelli letterali .

Consentono sia stringhe multilinea che interpolazione di stringhe.

Stringhe multilinea:

console.log(`foo
bar`);
// foo
// bar

Espandi frammento

Interpolazione di stringhe:

var foo = 'bar';
console.log(`Let's meet at the ${foo}`);
// Let's meet at the bar

Espandi frammento

— Rick Runyon
fonte

67

Una cosa che mi ha confuso per molto tempo è che i template letterali usano il backtick, che si trova a sinistra di "1" sulla tastiera, anziché le virgolette singole (').

— Sydney,

19

Fantastico: puoi persino "iniettare" il codice:console.log(`Your array:\n ${arr.join('\n ')}`)

— T4NK3R,

5

È strano che Template Literalnon sia supportato in IE o forse è naturale che IE non supporti cose interessanti. Per saperne di più

— Mohammad Musavi,

12

Come menzionato in un commento sopra, puoi avere espressioni all'interno delle stringhe / valori letterali del modello. Esempio:

const one = 1;
const two = 2;
const result = `One add two is ${one + two}`;
console.log(result); // output: One add two is 3

Espandi frammento

— Joel H
fonte

È corretto affermare che le stringhe di modello possono essere utilizzate per iniettare codice nella stringa?

— carloswm85,

Stai iniettando espressioni ed espressioni sono codice. Non è possibile iniettare alcun tipo di codice, tuttavia, solo espressioni JavaScript.

— Joel H

Proverò ad essere più specifico. Quando uso i letterali di stringa posso iniettare espressioni come obj.value INSIDE qualsiasi stringa usando la notazione $ {}. Destra?

— carloswm85,

Sì, e puoi provarlo tu stesso nella console, ad eshey ${obj.name}

— Joel H,

0

Puoi anche eseguire conversioni di tipo implicito con valori letterali di modello. Esempio:

let fruits = ["mango","orange","pineapple","papaya"];

console.log(`My favourite fruits are ${fruits}`);
// My favourite fruits are mango,orange,pineapple,papaya

— Shalom David
fonte