Template Strings, O Que É E Como Usar?

Template Strings são literais strings que permitem a concatenação de strings e expressões de um modo muito mais fácil e agradável de interpretar o código. Em minha opinião, é uma das features implementadas no ECMAScript 2015 que facilitou meu desenvolvimento de códigos!

Como utilizar template strings

A utilização de Template Strings é muito fácil, basta envolver o que você deseja entre acentos graves (também conhecido como crase).
No exemplo abaixo, mostramos como é a utilização normal e como ficaria usando a template string.

var nome = "Essa é uma declaração de variável de forma clássica";

var nome = `Essa é a declaração usando template strings`;

Legal! Mas aparentemente nada mudou, continua a mesma coisa! Então qual seria a vantagem de trocar um pelo outro?

Realmente, olhando em um exemplo tão básico assim, não faz diferença nenhuma! Mas e se complicarmos só um pouquinho?

Vamos imaginar um cenário em que você deseja retornar um elemento HTML criado através do Javascript, vamos lá!

var elemento =
  "<section><h1>Pequeno teste</h1><p>Esse é um pequeno teste para o site backefront.com.br!</p></section>";

Meio confuso isso né? Vamos quebrar o elemento por linhas para poder facilitar a leitura!

var elemento = "<section>";
elemento += "<h1>Pequeno teste</h1>";
elemento += "<p>Esse é um pequeno teste para o site backefront.com.br!</p>";
elemento += "</section>";

Agora melhorou, mas ainda sim é chato ficar digitando tudo isso! Com o template strings, isso fica muito mais fácil!

var elemento = `
  <section>
    <h1>
	Pequeno teste
    </h1>
    <p>
	Esse é um pequeno teste para o site backefront.com.br!
    </p>
  </section>
`;

Muito melhor não? E o melhor de tudo, isso funciona sem problemas! Perceba que envolvemos o conteúdo entre os acentos, da mesma forma que fazemos com aspas e pronto!

Template Strings encapsulando funções

Para encapsular variáveis dentro de uma string, no molde antigo você precisaria fazer da seguinte forma:

var valor = 10;

var encapsulado = "Esse blog é " + valor; //Resultado: Esse blog é 10

Agora com essa nova feature:

var valor = 10;

var encapsulado = `Esse blog é ${valor}`; //Resultado: Esse blog é 10

O mesmo se aplica para quando quer passar uma função no meio da string!

function valor() {
  return 10;
}

var encapsulado = `Esse blog é ${valor()}`; //Resultado: Esse blog é 10

Considerações finais

Template Strings é uma característica do ES6 que veio para facilitar nossas vidas, é extremamente poderoso e muito útil no nosso dia-a-dia! Sua aceitação entre os navegadores é praticamente total, como demonstrado na imagem abaixo, através de um site de consulta do que podemos usar, o caniuse


Espero que utilizem essa fantástica propriedade!

Referências

MDN - Template Strings
ECMAScript 2015 (6th Edition, ECMA-262)