Como funciona o Template String? #02

Template String é uma das muitas funcionalidades do JavaScript Moderno. Em outras linguagens um recurso similar a este é chamado de interpolação. Bora entender como funciona o template string com um exemplo prático.

Ops! Quase me esqueci. Esse é o segundo post de uma série que estou fazendo sobre as funcionalidades do JavaScript Moderno. Você pode ver tudo que já escrevi e fiz em vídeo nesse post aqui:

Coisas do JavaScript Moderno

Como funciona o Template String?

Como pré-requisito se você quiser acompanhar a explicação fazendo o código na sua máquina, é necessário que você tenha instalado o Visual Studio Code e o NodeJS, ambos funcionam tanto no Windows, Linux e MacOS e para instalar não tem muito segredo, mas se tiver qualquer dúvida é só entrar no Discord da comunidade CollabCode: discord.gg/YeeEAYj

Agora crie uma pasta chamada template-string na sua área de trabalho e, dentro dela, crie um arquivo chamado index.js. Abra o arquivo e crie duas constantes uma chamada qtd e a outra com o nome de texto, para a qtd atribua o valor 10 e para a texto queremos que ele tenha o valor Carrinho (10), mas ao invés de você ter colocar direto no texto o valor 10, esse será substituído pela constante qtd:

index.js

const qtd = 10;
const texto = "Carrinho (" + qtd + ")";

Ah! Só para vermos o valor da constante texto, vamos adicionar um console.log(texto):

const qtd = 10;
const texto = "Carrinho (" + qtd + ")";
console.log(texto);

Agora vamos testar este nosso código usando o node, com ele executaremos o arquivo index.js. Abra o terminal do Visual Studio Code pressionando as teclas ctrl e crase ao mesmo tempo (ctrl + `), com o terminal aberto execute o comando:

node index.js

Agora é pra você receber a seguinte saída no terminal:

Carrinho (10)

Se você alterar o valor da constante qtd para 12:

const qtd = 12;
const texto = "Carrinho (" + qtd + ")";
console.log(texto);

E em seguida rodar novamente o arquivo index.js no terminal:

node index.js

Receberá a saída no terminal com o valor de qtd atualizado para 12:

Carrinho (12)

Agora se voltar a olhar como está o nosso código do index.js, podemos observar que é meio chato ler essa expressão const texto = "Carrinho ("+ qtd + ")", seria genial se pudéssemos alterar essa expressão sem o sinal de mais (+), fazendo isso nosso código ficará assim:

const qtd = 12;
const texto = "Carrinho (qtd)";
console.log(texto);

Bonito não? Bora rodar esse código no terminal usando o node:

node index.js

Infelizmente a saída não é tão feliz:

Carrinho (qtd)

Em vez de termos como resultado o valor atribuído a nossa constante ficamos apenas com um texto com o mesmo nome da nossa constante. Da pra resolver isso usando Template String, olha só como fica nosso código usando Template String:

const qtd = 12;
const texto = `Carrinho (${qtd})`;
console.log(texto);

Analisando o nosso código, nós trocamos as aspas duplas por crase, a nossa constante está envolvida por bigodes (chaves) eantes do primeiro bigode tem um cifrão. Se você rodar esse código novamente no terminal:

node index.js

Terá a seguinte saída:

Carrinho (12)

Agora sim temos a saída esperada. Portanto, para usar o Template String é necessário usar crase no lugar das aspas duplas ou simples e quando quisermos que um código JavaScript seja executado no meio do Template String é necessário envolver o código com a seguinte estrutura: ${código JavaScript fica dentro das chaves} .

Um exemplo da vida real

Agora que vimos o básico de como funciona o Template String, veremos um exemplo mais perto da vida real. Vamos criar um elemento HTML (tag) com JavaScript usando o Template String, fazemos isso usando o React no dia a dia mas no lugar do Template String usamos o JSX, essa é uma parte legal desse exemplo que vamos ver aqui porque te dará um conhecimento bacana para um futuro uso do React ou outros frameworks/libs como Angular, Vue, Ember e por aí vai que a lista é grande :-)

Para começar vamos precisar criar um novo arquivo o index.html dentro da pasta template-string que criamos lá no começo do post, ainda vamos usar o arquivo index.js, só que vamos alterar ele um pouco e nessas alterações aprenderemos mais um pouco de JavaScript e Template String também de uma forma feliz e leve.

Código base do index.html:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Template String</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

Top top top! Agora que temos o código base do nosso arquivo index.html podemos abrir o nosso arquivo index.js e modificar o conteúdo da constante texto, por enquanto temos uma Template String sendo atribuída para nossa constante, envolva esse texto por uma tag <p>, ficará da seguinte forma:

const qtd = 12;
const texto = `<p>Carrinho (${qtd})</p>`;
console.log(texto);

Show! Para verificar se o conteúdo da constante texto foi alterada com sucesso, vamos precisar alterar o nosso arquivo index.html e nele adicionar a tag <script> antes da tag de fechamento da tag </body>:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Template String</title>
</head>
<body>
  <div id="root"></div>
  <script src="index.js"></script>
</body>
</html>

Por favor, abra o arquivo index.html no seu navegador (browser) favorito que sem dúvidas alguma é o Firefox da nossa amada Mozilla, aperte as teclas Ctrl, Shit e a letra K ao mesmo tempo (Ctrl + Shift + K) que será aberto o console do Firefox e você verá o conteúdo da nossa constante texto que será exatamente esse:

<p>Carrinho (12)</p>

Agora para inserir a tag <p>, que acabamos de criar, dentro da <div id="root"> precisamos primeiro pegar essa <div id="root"> no nosso JavaScript e atribuir a uma constante chamada $root. Para pegar esse elemento que já está no nosso HTML, usamos o comando querySelector que está disponível no document e no método só precisamos passar #root como primeiro parâmetro:

const $root = document.querySelector("#root");
const qtd = 12;
const texto = `<p>Carrinho (${qtd})</p>`;
console.log(texto);

Você pode estar achando entranho a constante $root começar com com um cifrão ($). Isso é uma boa prática de código, esse é um padrão de código que adoto. Toda variável que começa com cifrão guarda a referência de elemento do HTML, como no caso acima que está guardando a referência da <div id=" root"> .

Antes de seguir só vamos fazer uma pequena alteração no nome da variável texto para $carrinho. Esta alteração é necessária uma vez que estamos mudamos o conteúdo dela e não faz mais sentido deixar o nome como está agora, além de deixar muito mais fácil a leitura do código. É muito importante sempre tomar cuidado com os nomes que você escolhe para suas variáveis:

const $root = document.querySelector("#root");
const qtd = 12;
const $carrinho = `<p>Carrinho (${qtd})</p>`;
console.log($carrinho);

Está tudo pronto para colocarmos o nosso <p> dentro da nossa <div id="roo t">. Vamos usar o comando insertAdjacentHTML que está disponível em todas as constantes que guardam uma referência de um elemento do HTML, esse comando vamos usar na $root, o primeiro parâmetro desse método informamos em qual lugar será inserido o elemento que passamos como segundo parâmetro. Nesse caso vamos passar como primeiro parâmetro o valor beforeend para que o nosso $carrinho fique como o último elemento dentro da $root:

const $root = document.querySelector("#root");
const qtd = 12;
const $carrinho = `<p>Carrinho (${qtd})</p>`;
$root.insertAdjacentHTML("beforeend", $carrinho);
console.log($carrinho);

Para saber mais sobre o método insertAdjacentHTML recomendo que você visite a MDN (Mozilla Developer Network): https://developer.mozilla.org/pt-BR/docs/Web/API/Element/insertAdjacentHTML

Se abrir novamente o arquivo index.html no Firefox verá que o conteúdo da nossa constante $carrinho está dentro da nossa <div id="root">.

Muito obrigado por ler esse post, fico muito feliz que você tenha chegado até o final, se tiver qualquer sugestão ou dúvida fique à vontade para falar nos comentários. Ah! Também fica o convite para você participar da comunidade da CollabCode no nosso discord, só clicar no link a seguir: https://discord.gg/YeeEAYj. Você também pode me achar no Twitter, Facebook e Linkedin por MarcoBrunoBR.

Até o próximo post 😉