ANÚNCIO

~/questoes/programacao

Como você usa template literals em JavaScript para criar strings dinâmicas?

Responda, confira o feedback e use o resultado para orientar sua revisão.
Aula de referência Curso JavaScript Completo com Mini-Projetos
Para fixar

Template Literals: Criando Strings Dinâmicas com Elegância

Conceito central

Template literals são uma forma moderna de criar strings em JavaScript usando crase (`) ao invés de aspas. Elas permitem inserir variáveis diretamente na string usando ${variável} e suportam quebras de linha naturalmente, tornando o código mais legível e prático.

Por que essa resposta faz sentido

A alternativa B está correta porque template literals realmente usam crase (`) para envolver o texto e ${} para interpolar variáveis. Essa sintaxe permite criar strings multilinhas sem precisar concatenar com + ou usar escape de quebras de linha, deixando o código mais limpo e fácil de ler.

Armadilhas comuns

  • Usar aspas (simples ou duplas) ao invés de crase, o que impede a interpolação com ${}
  • Colocar a variável sem os chaves, como `Olá $nome` ao invés de `Olá ${nome}`
  • Tentar usar template literals com aspas simples ou duplas, esquecendo que precisa ser crase

Entenda as alternativas

A

Colchetes [] e parênteses () não são usados para template literals em JavaScript. Essa sintaxe não existe na linguagem e causaria um erro.

B

Esta é a forma correta. Crase (`) envolvem a string e ${variável} insere o valor da variável dentro do texto. Exemplo: `Olá, ${nome}!` resulta em 'Olá, João!' se nome = 'João'.

C

Aspas simples ou duplas com $ para concatenação não funcionam assim em JavaScript. Você precisaria usar + para concatenar, o que é a forma antiga e mais verbosa de combinar strings.

D

String() converte um valor para texto, mas não é a forma recomendada para criar strings dinâmicas. Além disso, você ainda precisaria concatenar com +, tornando o código mais complexo que template literals.

Dica prática: Pratique criando uma string com dados de um objeto. Por exemplo: const usuario = {nome: 'Ana', idade: 25}; console.log(`${usuario.nome} tem ${usuario.idade} anos`); Veja como fica muito mais legível que concatenação com +.

Revise pensando: Se você tem uma variável produto = 'Notebook' e preco = 1500, como você mostraria 'Notebook custa 1500' usando template literal?