Template Strings em JavaScript

Quando trabalhamos com strings em JavaScript, uma das primeiras coisas que aprendemos é a concatenação. Concatenar envolve unir o conteúdo de duas expressões (strings). No JavaScript, o operador para concatenar é o sinal de mais (+). Por muitos anos essa era a única maneira que tínhamos para realizar uma concatenação.

Contudo, com o lançamento da versão do ECMAScript 6, ou ES2015, recebemos uma nova ajuda para realizar não apenas a concatenação de strings, mas também a interpolação de variáveis: ganhamos as Template Strings. Com elas ficou bem mais simples até mesmo exibir o valor de variáveis em nossos textos.

Para criar uma template string devemos usar a crase (`). Você pode acioná-la com Shift + ´ no Windows ou Option + ´ no Mac. Para acessar variáveis, basta usar o cifrão ($) junto com chaves e o nome da variável entre eles.

Vamos ver dois exemplos de como as template strings são práticas.

Exemplo 01 - Exibir os valores de um objeto simples no console

Veja este código:

Com ele nós criamos um objeto chamado user e estamos exibindo seus valores por meio do console.log(). Vamos ver o resultado:

Perceba que o valores das variáveis são corretamente identificados e exibidos. Mas, percebeu como nós precisamos digitar várias vezes o sinal de mais (+) e também abrir e fechar aspas repetidamente? Isso pode nos confundir quando trabalhamos com muitas informações. Veja como esse mesmo código ficaria com Template Strings:

O resultado será o mesmo, mas veja que diferença para ler o código, muito mais simples e fácil de entender.

Exemplo 02 - Montar o conteúdo HTML de uma tabela dinamicamente

Vamos agora criar o conteúdo de uma tabela que irá exibir o valor das variáveis de nosso objeto usando a concatenação “clássica”. Veja como ficará o código:

Perceba que as variáveis são as mesmas do último exemplo. O resultado será:

Legal, a tabela foi criada corretamente. Entretanto, novamente percebemos a questão de muitos sinais de mais na string, além de precisar abrir e fechar as aspas em toda quebra de linha. Veja agora com Template Strings:

Incrível, não é mesmo? O nosso código está bem mais limpo. Se está mais fácil de ler, com certeza foi mais fácil de desenvolver também.

Esses dois exemplos mostraram como as Template Strings realmente são sensacionais. Por isso, se puder, use-as em seus projetos, você não vai se arrepender.

O JavaScript tem evoluído muito nos últimos tempos e é bom poder acompanhar suas novidades que elevam o nível dessa linguagem cada vez mais.

Não esqueça de se inscrever em nosso canal no Youtube para receber conteúdos legais de desenvolvimento web em vídeo também, até o próximo artigo.

Gostou desse artigo?

Gostaria de aprender mais sobre JavaScript? Então se inscreva em nosso Curso Completo de JavaScript. Aprenda com dois especialistas sobre os diversos recursos desta linguagem, com projetos reais e o método Hcode de ensino ;)