Fundamentos da interpolação de strings
Insira expressões dentro de literais de modelo.
Fundamentos da interpolação de strings é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.
O que são literais de modelo
Literais de modelo são uma forma de criar cadeias de caracteres usando o caractere de acento grave em vez de aspas. Eles permitem incorporar expressões diretamente em uma cadeia de caracteres sem concatenação manual.
Um marcador de posição é escrito com um cifrão seguido de chaves que envolvem uma expressão. JavaScript avalia a expressão e insere seu valor na cadeia de caracteres.
const name = "Alice"
const greeting = "Hello, " + name + "!"
console.log(greeting)Sintaxe da interpolação
Dentro de um literal de modelo, você coloca uma expressão entre um cifrão seguido de uma chave de abertura e uma chave de fechamento. A expressão é avaliada e convertida em uma cadeia de caracteres.
O exemplo abaixo usa concatenação simples para produzir o mesmo resultado que você obteria com interpolação, deixando a ideia clara sem mostrar a sintaxe literal.
const product = "Book"
const price = 12
const line = product + " costs " + price + " dollars"
console.log(line)Por que a interpolação ajuda
A concatenação com o operador de adição fica difícil de ler quando você combina muitas variáveis e texto literal. A interpolação mantém o texto ao redor intacto e substitui apenas as partes dinâmicas.
- Menos operadores de adição
- Nenhum erro acidental de espaçamento
- Intenção mais clara
const user = "Bob"
const count = 3
console.log(user + " has " + count + " messages")Incorporando qualquer expressão
Um marcador de posição pode conter qualquer expressão válida, não apenas uma variável. Operações aritméticas, chamadas de funções e acesso a propriedades funcionam igualmente.
const a = 5
const b = 7
console.log("Sum is " + (a + b))
console.log("Max is " + Math.max(a, b))Chamando funções dentro
Você pode chamar uma função e deixar que o valor retornado por ela seja inserido na cadeia de caracteres. O exemplo mostra a forma equivalente usando concatenação.
function upper(s) { return s.toUpperCase() }
const word = "hello"
console.log("Loud: " + upper(word))Acesso a propriedades
As propriedades de objetos podem ser lidas diretamente dentro de um marcador de posição. Aqui, lemos campos de um objeto de usuário.
const user = { name: "Eve", age: 30 }
console.log("Name: " + user.name + ", Age: " + user.age)Números se tornam cadeias de caracteres
Quando um número aparece em um contexto de cadeia de caracteres, ele é convertido automaticamente para sua forma textual. A mesma coerção ocorre com a interpolação.
const total = 19.99
console.log("Total: $" + total)Operadores condicionais nos marcadores de posição
A lógica condicional com o operador ternário cabe em um marcador de posição, permitindo escolher entre dois valores diretamente.
const score = 72
const grade = score >= 60 ? "Pass" : "Fail"
console.log("Result: " + grade)Expressões aninhadas
Os marcadores de posição podem conter cadeias de métodos e chamadas aninhadas. O resultado da avaliação da expressão é o que será inserido.
const items = ["a", "b", "c"]
console.log("Joined: " + items.join("-"))
console.log("Count: " + items.length)Combinando muitos valores
Os literais de modelo são especialmente úteis quando uma frase combina várias variáveis. Compare a versão interpolada e legível, descrita em prosa, com este equivalente concatenado.
const city = "Paris"
const temp = 21
const sky = "sunny"
console.log("In " + city + " it is " + temp + "C and " + sky)Escapando o cifrão
Se quiser que uma sequência literal de cifrão e chaves apareça como texto, em vez de funcionar como um marcador de posição, escape o cifrão com uma barra invertida dentro de um literal de modelo. Em cadeias de caracteres comuns, nenhum escape é necessário.
const text = "Use $\{x\} for a placeholder"
console.log(text)Verificação rápida
Teste sua compreensão da interpolação.
Recapitulação
Recapitulação: Literais de modelo usam acentos graves e marcadores de posição para incorporar expressões em cadeias de caracteres.
- Um marcador de posição avalia qualquer expressão
- Os valores são convertidos em cadeias de caracteres
- A interpolação é mais clara que uma concatenação extensa
- Escape o cifrão para mostrá-lo literalmente
const n = "World"
console.log("Hello, " + n + "!")Perguntas Frequentes
A aula “Fundamentos da interpolação de strings” é grátis?
Sim — o texto completo de “Fundamentos da interpolação de strings” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.
O que vou aprender em “Fundamentos da interpolação de strings”?
Insira expressões dentro de literais de modelo. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar JavaScript Academy?
Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Fundamentos da interpolação de strings”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de JavaScript Academy?
Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Fundamentos da interpolação de strings
- Strings multilinha
- Funções de template com tag
- Casos de uso práticos de templates com tag