Como fazer interpolação de string em JavaScript

Neste artigo você vai aprender a como fazer interpolação de string em JavaScript, de uma form simples e prática, com recursos nativos

Fala programador(a), beleza? Bora aprender mais sobre strings e JavaScript!

Antigamente tínhamos apenas o recurso de concateção de strings, que é feito com símbolo +

Porém em diversas linguagens há a interpolação, que é onde as variáveis ficam entre as strings

Como se estivessem escritas ali, sem separações

Na versão ES6 de JS foi inserida uma funcionalidade chamada de template literals ou template strings

Onde conseguimos realizar a interpolação, veja o código na prática:

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 116 aulas
• 4 projetos
• 9h 23min

Conhecer formação

const nome = "Matheus"
const idade = 30;

const frase = `O nome dele é ${nome} e ele tem ${idade} anos`;

console.log(frase); // "O nome dele é Matheus e ele tem 30 anos"

A sintaxe é formada por uma string entre crases (`)

As variáveis precisam ser inseridas com um sifrão ($) e entre chaves ({nome})

Esta é a sintaxe completa para você utilizar a interpolação

Conseguimos aplicar quantas variáveis forem preciso, elas são convertidas para texto

Conclusão

Neste artigo você aprendeu a como realizar uma interpolação de string em JavaScript

Utilizamos o recurso chamado template literals, que veio com a versão ES6 da JavaScript

A sintaxe é um pouco diferente das strings normais de JS, mas com um pouco de treino conseguimos gravá-la

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!

Interpolando expressões dentro do ${ }:

Uma coisa massa que muita gente não sabe é que dentro das chaves não vai só variável

Você pode jogar QUALQUER expressão JavaScript ali dentro, e ela é avaliada na hora

Dá pra fazer conta, chamar função, acessar propriedade de objeto, por aí vai

const preco = 100; const quantidade = 3;

const frase = O total é ${preco * quantidade} reais;

console.log(frase); // "O total é 300 reais"

Repara que a conta acontece dentro da interpolação, sem precisar de variável extra

Isso deixa o código bem mais limpo do que ficar concatenando com +

Strings de múltiplas linhas com template literals:

Outro ganho das crases que resolve uma dor antiga

Antes, pra quebrar linha numa string era aquela zona de \n espalhado no meio do texto

Com template literals você simplesmente quebra a linha de verdade, e ela é respeitada

const texto = Primeira linha Segunda linha Terceira linha;

console.log(texto);

O que tu escreve é o que sai, quebras de linha e espaços incluídos

Muito útil pra montar um bloco de HTML ou uma mensagem grande sem virar bagunça

Interpolação com objetos e ternário:

Como dá pra colocar expressão dentro das chaves, dois casos aparecem toda hora no dia a dia

Acessar propriedade de um objeto direto na string:

const usuario = { nome: "Matheus", cargo: "dev" };

const frase = O ${usuario.nome} trabalha como ${usuario.cargo};

E decidir o texto na hora com um ternário, sem quebrar a frase em várias partes:

const logado = true;

const mensagem = Você está ${logado ? "online" : "offline"};

Os dois convertem pra texto normalmente na saída, é só encaixar dentro do ${ }

Qual a diferença entre interpolação e concatenação?

Boa pergunta, e a resposta é mais de legibilidade do que de mágica

Na concatenação você cola pedaços com o símbolo +, alternando string e variável o tempo todo

const frase = "O nome dele é " + nome + " e ele tem " + idade + " anos";

Na interpolação a variável já mora dentro da string, entre ${ }, como se estivesse escrita ali

const frase = O nome dele é ${nome} e ele tem ${idade} anos;

O resultado final é o mesmo, mas a interpolação é bem mais fácil de ler e de dar manutenção

Quando a frase tem várias variáveis, o + vira uma salada de aspas fácil de errar