Olá! Continuando nossa série, hoje vou abordar o uso das Template Strings, essa feature deu um superpoder para nossas strings! Vamos conferir?
Representação
Sua sintaxe é baseada no uso da crase:
Multi-linhas
O uso das template strings facilita nossa vida nos poupando de incluir “\n” para quebras de linhas, ele de forma nativa já aceita esta forma:
Trabalhando com dados
Até aqui ok, agora vamos abordar algumas formas mais interessantes de trabalhar com template strings. Vamos começar com dados, a sintaxe que utilizávamos era a concatenação com “+”, agora podemos substituí-lo pela sintaxe “${}” , vou novamente colocar o nosso primeiro exemplo:
Neste exemplo, chamamos a constante world dentro da template string hello , não precisando concatenar. Podemos ir além:
Neste exemplo conseguimos executar a função yourName dentro da template string sem problema algum, retornando assim o nome passado como argumento.
Tagged template strings
Este uso mais avançado das template strings, nos possibilita separar strings e valores com o uso dos spread operators, veja:
Neste exemplo foram criadas três constantes, a primeira, born, indica uma data de nascimento, a year, que indica o ano corrente e a taggedTemplateStrings que é uma função que trabalharemos a string. Quando chamamos a função taggedTemplateStrings passamos uma string como argumento que será “espalhada” entre string e valores, assim, podemos utiliza-las de modo “Array-like”, chamando cada trecho pelo seu index.
Conclusão
Podemos fazer muita coisa com a Template Strings, em ReactJS está me ajudando muito quando trabalho com as props, considero sua sintaxe amigável e mais clara que a anterior, acho um recurso interessante para compartilhar com o time e discutirem sua adoção.
