O que $ {} (cifrão e chaves) significa em uma string em Javascript?

160

Eu não vi nada aqui ou no MDN. Tenho certeza de que estou perdendo alguma coisa. Tem que haver alguma documentação sobre isso em algum lugar?

Funcionalmente, parece que você pode aninhar uma variável dentro de uma sequência sem fazer concatenação usando o +operador. Estou procurando documentação sobre esse recurso.

Exemplo:

var string = 'this is a string';

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

Darren Joy
fonte
Você pode contextualizar o que está perguntando? Esta questão não está clara como está escrita.
Sam Hanley
5
Esta não é uma pergunta ruim. É um novo recurso, e com certeza não consigo encontrar uma duplicata no SO, embora um exemplo do que exatamente foi visto teria sido bom.
@ squint - concordo, mas o código de exemplo e a referência à fonte seriam úteis.
RobG
Exemplo adicionado. A referência estava em um desafio de codificação, mas era um dado, como se fosse algo que você acabou de usar. Não tinha visto nada e também não conseguia encontrar nada. (Ao longo dos últimos anos, eu nunca tive que pedir a um Q aqui SO apenas parece ter quase tudo agora ....)
Darren Joy

Respostas:

192

Você está falando sobre literais de modelo .

Eles permitem cadeias de linhas múltiplas e interpolação de cadeias.

Cadeias de linhas múltiplas:

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

Interpolação de string:

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

Rick Runyon
fonte
67
Uma coisa que me confundiu por muito tempo é que os literais de modelo usam backtick, que fica à esquerda de "1" no teclado, em vez de aspas simples (').
Sydney
19
Legal: Você pode até "injetar" o código:console.log(`Your array:\n ${arr.join('\n ')}`)
T4NK3R
5
É estranho que Template Literalnão seja suportado no IE ou talvez seja natural que o IE não suporte coisas legais. Leia mais
Mohammad Musavi
12

Conforme mencionado em um comentário acima, você pode ter expressões dentro das strings / literais do modelo. Exemplo:

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

Joel H
fonte
É correto dizer que as strings do modelo podem ser usadas para injetar código na string?
carloswm85
Você está injetando expressões e expressões são código. Você não pode injetar nenhum tipo de código, no entanto, apenas expressões JavaScript.
Joel H
Vou tentar ser mais específico. Ao usar literais de string, posso injetar expressões como obj.value INSIDE qualquer string usando a notação $ {}. Certo?
carloswm85 2/04
Sim, e você pode experimentá-lo no console, por exemplohey ${obj.name}
Joel H
0

Você também pode executar conversões implícitas de tipo com literais de modelo. Exemplo:

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

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