Template String em Java Script

As Template Strings (ou Template Literals) foram introduzidas no ECMAScript 6 (ES6) e são uma das adições mais úteis e elegantes à linguagem JavaScript. Elas simplificam a maneira como manipulamos strings, permitindo interpolação de variáveis, multi-linhas e muito mais. Neste post, vamos explorar template string em Java Script e como usá-las de forma eficaz em seu código!

O que são Template Strings?

Template Strings são strings delimitadas por crases (`) em vez de aspas simples (') ou duplas ("). Com elas, você pode incluir expressões e variáveis diretamente na string, o que facilita a construção de mensagens dinâmicas.

Interpolação de variáveis

Uma das principais vantagens das Template Strings é a interpolação de variáveis. Você pode inserir variáveis e expressões dentro de uma string usando ${}.

Exemplo:

const nome = "João";
const idade = 30;

const mensagem = `Olá, meu nome é ${nome} e eu tenho ${idade} anos.`;
console.log(mensagem); // Saída: Olá, meu nome é João e eu tenho 30 anos.

Multi-linhas

As Template Strings também permitem criar strings em várias linhas de forma simples, sem a necessidade de caracteres especiais para quebras de linha.

Exemplo:

const mensagemMultilinea = `Olá, meu nome é Maria.
Eu sou desenvolvedora.
Estou aprendendo JavaScript!`;

console.log(mensagemMultilinea);
/*
Saída:
Olá, meu nome é Maria.
Eu sou desenvolvedora.
Estou aprendendo JavaScript!
*/

Expressões e cálculos

Além de interpolar variáveis, você também pode incluir expressões diretamente dentro da Template String.

Exemplo:

const a = 5;
const b = 10;

const resultado = `A soma de ${a} e ${b} é ${a + b}.`;
console.log(resultado); // Saída: A soma de 5 e 10 é 15.

Funções e chamadas

Você pode usar Template Strings em conjunto com funções, tornando seu código ainda mais dinâmico e flexível.

Exemplo:

function saudar(nome) {
    return `Olá, ${nome}! Bem-vindo ao nosso site.`;
}

const mensagemSaudacao = saudar("Carlos");
console.log(mensagemSaudacao); // Saída: Olá, Carlos! Bem-vindo ao nosso site.

Outros exemplos práticos

Quando precisamos concatenar muitas strings, esteticamente o código fica desorganizado.

Com os Templates Strings conseguimos unir várias strings em um único bloco, deixando o código mais organizado e elegante. Exemplos:

const nome = 'Benedito'
const uf = 'SP'
const concatenar = 'Olá ' + nome + ' de ' + uf + ', seja bem-vindo!!!'

Acima foi feito concatenações de variáveis com strings. Visualmente ficou desorganizado. Já nos códigos abaixo foi utilizado o conceito de Template Strings:

const nome = 'Benedito'
const uf = 'SP'

const template = `
   Olá ${nome} de ${uf},
   seja bem-vindo!!!
`

Acima foi utilizado o Template String para concatenar variáveis com strings.

Perceba que as quebras de linhas foram respeitadas e as variáveis foram interpoladas (identificadas no meio das strings) através de ${}. O bloco é limitado pelo símbolo da crase `.

Também é possível utilizar expressões para fazer cálculos. Exemplo:

console.log(`2 + 1 = ${2 + 1}`)

Acima foi feita uma interpretação da string “2 + 1” em ${2 + 1} como sendo dois números e depois somados.

As Template Strings são uma maneira poderosa e elegante de trabalhar com strings em JavaScript.

Elas simplificam a interpolação de variáveis, permitem strings multi-linhas e suportam expressões complexas, tornando seu código mais legível e fácil de entender.

Dúvidas ou sugestões sobre Template String em Java Script? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: template string