Template String

Como prometido, chegou a hora de falar de Template String. Para mim foi uma grande evolução do ES6, pois agora podemos abolir a concatenação como nós conhecemos até antes do ES6.

Sei que parece algo muito simples, só colocar um marcado dentro da string e fazer aquele marcador receber uma variável. Mas não é só isso, por que na verdade o problema é a string em si… Felizmente para nós desenvolvedores, grande parte das linguagens de programação de alto nível já possuem a estrutura de String, que nada mais é do que uma abstração de alto nível de uma cadeia de caracteres. A estrutura de String nos oferece muitas regalias, mas como vida de programador não é nada fácil, lidar com strings ainda tem vários probleminhas.

Para aliviar estas dores de cabeça, o ES6 trouxe o conceito de Template Strings. Há dois tipos:

  • Template strings simples;
  • Template strings marcados (tags).

Esses Templates são estruturas que nos permite formar expressões com strings usando funcionalidades como interpolação e multilinhas. Ambos os tipos são features emprestadas da linguagem de programação E, criada em 1997 por Mark S. Miller e Dan Bornstein na Eletric Communites. Nesta linguagem, os Templates Strings são chamados de quasi literals.

TEMPPLATE STRING SIMPLES

Para utilizar, basta utilizarmos as crases (`) ao invés das aspas (simples ou duplas). Com ela, podemos inserir diretamente o valor de variáveis dentro de uma string e manter a sua formação sem fazer uso de escapes, como neste exemplo:

Captura de Tela 2018-02-18 às 10.52.39 AM

Com o uso dessa estrutura podemos inclusive realizar ações entre as interpolações. Como por exemplo somar dois números. Como no exemplo:

Captura de Tela 2018-02-18 às 10.56.25 AM

No exemplo acima, podemos notar que existe uma grande diferença entre ${n1} e o ${n1 + n2}, por ser uma interpolação de strings, os valores são apresentados de forma absoluta, mas quando estão dentro da mesma estrutura ocorre a soma. Qualquer expressão colocada entre as {} será resolvida antes de ser apresentada na tela.

TEMPLATE STRING MARCADAS

Ao marcar uma Template String, conseguimos modificar seus valores com uma função. Como neste exemplo, onde modificamos a mensagem e boas vindas de acordo com o horário de acesso:

Captura de Tela 2018-02-18 às 11.07.35 AM

As funções de Template String Marcados recebem pelo menos 2 parâmetros. O primeiro é um array com todas as strings enquanto os demais parâmetros representam os valores das expressões que foram inseridas.

Se você foi perspicaz e notou que dentro da função existe um negócio diferente (…value), saiba que isso é outra novidade do ES6. E nosso próximo artigo será justamente sobre isso, operador REST e SPREAD.

Vamos praticar um pouco essa questão do Template String? Já tem exercícios em nosso github.

Até breve galera!!!!

Anúncios

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão /  Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão /  Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão /  Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão /  Alterar )

Connecting to %s