Como usar template strings em JavaScript: guia completo
As template strings em JavaScript, também conhecidas como template literals, são uma forma flexível e poderosa de criar strings.
Glossário
O que são template strings em JavaScript?
Template strings em JavaScript
Template strings em JavaScript, também conhecidas como template literals, são uma forma de criar strings de forma mais flexível e poderosa. Anteriormente, para construir uma string com variáveis, era preciso concatenar diferentes partes utilizando o operador de adição (+). No entanto, com as template strings, é possível incluir expressões e variáveis dentro da própria string de uma forma mais legível e eficiente.
Uma template string é definida utilizando crases (“) em vez de aspas simples ou duplas. Inside da template string, é possível utilizar placeholders, marcados com o símbolo de cifrão e chaves (${expressão}). Esses placeholders são substituídos pelo valor da expressão correspondente.
Essa funcionalidade é especialmente útil em situações onde é necessário construir strings concatenando diversos valores de forma mais clara e concisa. Além disso, template strings também permitem a quebra de linha e a formatação de texto diretamente na string, tornando o código mais fácil de ler e manter.



Como usar template strings em JavaScript
Para usar template strings em JavaScript, basta definir a string utilizando crases e inserir os placeholders com as expressões que você deseja substituir. Vejamos um exemplo abaixo:
const nome = "João";
const idade = 25;
const mensagem = `Olá, meu nome é ${nome} e tenho ${idade} anos.`;
console.log(mensagem);
Neste exemplo, a template string utiliza dois placeholders: um para nome e outro para idade. Ao executar o código, os placeholders são substituídos pelos valores correspondentes, resultando na mensagem “Olá, meu nome é João e tenho 25 anos.”
É importante destacar que as expressões dentro dos placeholders podem ser qualquer código JavaScript válido, incluindo chamadas de função, operações matemáticas, entre outros. Isso oferece muita flexibilidade para construir strings dinâmicas de acordo com as necessidades do seu programa.
Vantagens de usar template strings em JavaScript
As template strings trazem várias vantagens em comparação com as formas de concatenação tradicionais. Algumas das principais vantagens são:
- Clareza e legibilidade: Com a utilização de placeholders, é mais fácil entender e visualizar as partes da string que serão substituídas por valores dinâmicos. Isso torna o código mais claro e legível, especialmente em casos complexos com muitas variáveis envolvidas.
- Menos repetição de código: Com as template strings, não é necessário ficar repetindo o operador de concatenação (+) diversas vezes para unir diferentes partes de uma string. Isso reduz a quantidade de código redundante e facilita a manutenção do código.
- Melhor formatação de texto: Ao utilizar as template strings, é possível fazer a quebra de linha e a formatação do texto diretamente na string, sem a necessidade de concatenar várias strings diferentes. Isso torna o código mais organizado e legível.
Exemplos de uso de template strings em JavaScript
Existem diversas situações em que as template strings podem ser muito úteis. Vejamos alguns exemplos abaixo:
- Construção de URLs dinâmicas:
- Mensagens de erro personalizadas:
const servidor = "https://exemplo.com";
const recurso = "api";
const id = 123;
const url = `${servidor}/${recurso}/${id}`;
console.log(url);
Neste exemplo, a template string é utilizada para construir uma URL dinâmica com base em variáveis. O resultado será “https://exemplo.com/api/123”, permitindo a construção de URLs flexíveis e legíveis.



const codigoErro = 404;
const mensagem = `Ocorreu um erro: ${codigoErro}. Página não encontrada.`;
console.log(mensagem);
Neste caso, a template string é utilizada para gerar mensagens de erro personalizadas, incluindo o código de erro correspondente. Isso facilita a identificação e o tratamento de erros em um programa.
Em resumo, as template strings são uma ferramenta poderosa do JavaScript para construir strings de forma mais flexível e legível. Ao utilizar placeholders e expressões dentro das strings, é possível criar mensagens dinâmicas e manter o código mais organizado. Aproveite as vantagens das template strings em seus projetos JavaScript e melhore a legibilidade e manutenção do seu código.
A Awari é a melhor plataforma para aprender sobre programação no Brasil.
Aqui você encontra cursos com aulas ao vivo, mentorias individuais com os melhores profissionais do mercado e suporte de carreira personalizado para dar seu próximo passo profissional e aprender habilidades como Data Science, Data Analytics, Machine Learning e mais.
Já pensou em aprender de maneira individualizada com profissionais que atuam em empresas como Nubank, Amazon e Google? Clique aqui para se inscrever na Awari e começar a construir agora mesmo o próximo capítulo da sua carreira em dados.


