Caffeine Algorithm - Logo
Publicado em

Template Strings em JavaScript

Partilhar:

Introdução

Template strings, introduzidas no ES6, representam uma maneira poderosa e eficiente de trabalhar com strings em JavaScript. Este artigo explora o uso de template strings, demonstrando como elas melhoram a legibilidade e a flexibilidade na manipulação de strings.

O que são Template Strings?

Template strings (ou template literals) são uma forma de declarar strings que permite a interpolação de expressões e a criação de strings multilinha. São delimitadas por crases (`), ao invés de aspas simples ou duplas.

Vantagens das Template Strings

  1. Interpolação de Expressões: Facilita a inserção de variáveis e expressões dentro de strings.
  2. Strings Multilinha: Permite criar strings que abrangem várias linhas sem a necessidade de caracteres de escape.
  3. Legibilidade: Torna o código mais limpo e fácil de entender, especialmente em strings complexas.

Sintaxe Básica

A sintaxe das template strings é simples e intuitiva.

let nome = "João";
let saudacao = `Olá, ${nome}!`;
console.log(saudacao); // Olá, João!

Interpolação de Expressões

Além de variáveis, você pode inserir qualquer expressão JavaScript dentro das chavetas.

let preco = 50;
let total = `O total é ${preco * 1.23} euros (IVA incluído).`;
console.log(total);

Template Strings Multilinha

As template strings simplificam a criação de strings que abrangem várias linhas.

let poema = `Roses are red,
Violets are blue,
Sugar is sweet,
And so are you.`;
console.log(poema);

Uso Avançado

Template strings podem ser usadas em situações mais complexas, como em templates HTML ou na criação de funções.

Exemplo com HTML

let titulo = "Minha Página";
let conteudo = "Bem-vindo à minha página!";

let html = `
<div>
  <h1>${titulo}</h1>
  <p>${conteudo}</p>
</div>`;

document.body.innerHTML = html;

Tagged Template Strings

Tagged templates permitem o parseamento de template strings através de uma função, oferecendo controle adicional sobre a manipulação das strings.

Exemplo de Tagged Template

function etiqueta(strings, ...valores) {
  return strings.reduce((resultado, string, i) => {
    return resultado + string + (valores[i] || '');
  }, '');
}

let utilizador = "Ana";
let email = "[email protected]";

let resultado = etiqueta`O utilizador ${utilizador} tem o e-mail ${email}.`;
console.log(resultado);

Conclusão

As template strings são uma adição incrivelmente útil ao JavaScript, tornando a manipulação de strings mais flexível e legível. Seja para simples concatenações ou para cenários mais complexos, as template strings simplificam significativamente o código, tornando-o mais limpo e fácil de manter.

Happy coding!