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}`);

Expandir snippet

— Darren Joy
fonte

Você pode contextualizar o que está perguntando? Esta questão não está clara como está escrita.

— Sam Hanley

3

Literais de modelo do ECMAScript 2015

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

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

Expandir snippet

Interpolação de string:

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

Expandir snippet

— 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

Expandir snippet

— 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