Como inserir uma variável em uma string em JavaScript

Para incluir o valor de uma variável em uma string JavaScript, use um literal de template: envolva o texto com crases e insira a forma exata `${variableName}` no ponto em que o valor deve aparecer. Substitua variableName pelo identificador da sua variável; o JavaScript insere o valor atual dela. Literais de template são a opção mais simples para a maioria das construções de strings. Marcadores de posição no console são úteis para registros, enquanto uma biblioteca de formatação pode ajudar quando seus recursos justificam uma dependência.

Use literais de template para inserir uma variável em uma string em JavaScript

Literais de template usam crases em vez de aspas simples ou duplas. O JavaScript avalia a expressão entre ${ e } e converte o resultado em uma string. Você pode atribuir a string concluída a uma variável, retorná-la de uma função ou passá-la para outra função. Em uma string entre aspas, como "Hello, ${name}", a sintaxe de interpolação permanece como texto literal; aspas simples e duplas não interpolam valores.

Este exemplo monta uma saudação e calcula um total antes de atribuir o texto final a message:

const name = "Ada";
const price = 12;
const message = `Hello, ${name}. Your total is $${price + 3}.`;
console.log(message);

Hello, Ada. Your total is $15.

A expressão ${price + 3} é avaliada primeiro, portanto contribui com 15; o cifrão imediatamente antes dela é texto comum. As expressões podem incluir operações aritméticas, acesso a propriedades ou chamadas de função. Mantenha-as curtas o suficiente para que a frase resultante continue fácil de entender. Um literal de template pode ocupar várias linhas, e não é necessário escapar aspas dentro dele. Para incluir literalmente a sequência ${, escape o cifrão como \${; para incluir uma crase, escape-a com uma barra invertida. Se uma expressão produzir um objeto, o JavaScript usará a conversão desse valor para string, que talvez não seja a representação desejada; escolha uma conversão explícita para exibir os dados do objeto com clareza. A interpolação cria texto simples, não uma saída HTML segura. Ao exibir valores não confiáveis em uma página, use uma API segura do DOM adequada ao contexto.

Use a formatação básica para inserir uma variável em uma string em JavaScript

Para gerar mensagens de diagnóstico, console.log() pode formatar uma mensagem com marcadores de posição e os argumentos seguintes. Neste exemplo, %s formata o nome e %d formata a pontuação; os argumentos aparecem na mesma ordem:

const name = "Ada";
const score = 42;
console.log("%s scored %d points.", name, score);

O suporte a marcadores e os detalhes de conversão dependem da implementação do console. Por isso, esse recurso é uma conveniência para registros, não uma API portátil para construir strings. console.log() grava informações de diagnóstico e não retorna a mensagem formatada para atribuição ou inserção em uma página HTML. Se precisar de um valor do tipo string, use um literal de template ou uma biblioteca de formatação. Mantenha os argumentos na ordem dos marcadores correspondentes; cada console pode exibir valores extras ou marcadores sem correspondência de maneiras diferentes.

Use sprintf() para inserir uma variável em uma string em JavaScript

sprintf-js é uma biblioteca opcional cuja função sprintf() retorna uma string. Em um projeto com o pacote instalado e suporte a CommonJS, você pode carregá-la com const { sprintf } = require("sprintf-js"); e criar um valor com const message = sprintf("%s has %d items", name, count);. Essas linhas ilustram a API; a instalação do pacote e as importações dependem do ambiente do projeto. Em projetos para navegador ou baseados em módulos, siga as instruções de configuração do projeto vinculado.

sprintf() interpreta as diretivas de formatação e os argumentos fornecidos; ela não avalia expressões JavaScript escritas dentro da string de formato. Cada diretiva usa o argumento correspondente. Escolha a biblioteca quando os recursos de formatação ajudarem em tarefas repetidas ou mais elaboradas e compensarem a dependência adicional. A documentação do projeto descreve as diretivas disponíveis e as opções de configuração. Para uma frase curta com uma variável, a sintaxe integrada dos literais de template costuma ser mais simples.

Conclusão

Use literais de template para construir strings comuns, incluir valores de variáveis e incorporar expressões JavaScript. Use marcadores de console.log() para mensagens de diagnóstico, lembrando que o comportamento pode variar conforme a implementação e que a chamada não produz uma string formatada reutilizável. Considere sprintf-js quando seus recursos de formatação forem úteis o bastante para justificar a dependência. Para uma interpolação simples, crases com ${...} costumam ser a forma mais clara de inserir o valor atual de uma variável em uma string JavaScript.