Artigos JavaScript JavaScript: Template literals
É comum em aplicações que tenhamos que lidar com grandes volumes de texto, a exemplo das informações que podem estar contidas em uma página web. Geralmente, ao lidarmos esses dados em editores necessitamos quebrar linhas para tornar o código mais legível, o que não é possível quando declaramos strings com aspas simples ou duplas.
const texto = "Ciclo novo, novas caras. O técnico Tite fez jus à expectativa
de novidades na seleção brasileira e divulgou a primeira convocação depois
Note que no código acima as aspas só são fechadas na linha 3, o que faz com que o script seja encerrado com um erro:
Com a sintaxe de Template Literals podemos substituir as aspas pelo caractere ` permitindo quebrar o texto em várias linhas:
const texto = `Ciclo novo, novas caras. O técnico Tite fez jus à expectativa
Template Literals também permite interpolar valores em um texto, sendo um recurso amplamente utilizado por programadores:
const produto = { id : 1, nome : 'Grampo', preco : 34.6 }
const descricao = `${produto.nome} por apenas R$ ${produto.preco}`
console.log(descricao) // Grampo por apenas R$ 34.6
`Texto inicial ${[ valor ]} e texto final`
Até o ES5 quando era necessário quebrar uma string em múltiplas linhas devíamos utilizar o caractere \n:
const texto = "Amor é fogo que arde sem se ver\nÉ ferida que dói e não se sente"
Com Template Literals podemos reescrever o mesmo código da seguinte forma:
const texto = `Amor é fogo que arde sem se ver
É ferida que dói e não se sente`
Podemos usar o recurso de interpolação de strings para formatar um texto utilizando Template Literals:
const data = new Date(1534342979126) // 15/08/2018 as 11:22:59
const mensagem = `O sistema foi iniciado as ${data.getHours()}:${data.getMinutes()}:${data.getSeconds()}`
console.log(mensagem) // O sistema foi iniciado as 11:22:59
É possível interpolar strings e expressões em JavaScript:
const mensagem = "O valor do desconto é: " + (preco - (preco * desconto))
Com Template Literals podemos escrever essa sentença desta forma:
const mensagem = `O valor do desconto é: ${(preco - (preco * desconto))}`
Algumas vezes em aplicações web precisamos manipular características de elementos em uma página atribuindo ou removendo deles classes que alterem sua apresentação, após alguma interação do usuário, como o clique de um botão.
Apesar de trivial essa funcionalidade pode gerar código confusos e propensos a erros se necessitamos chegar alguma condição para a atribuição ou remoção da classe:
var resposivo = true
var classes = 'nav' + (resposivo ? ' collapsed' : '')
Com Template Literals esse mesmo código pode ser simplificado.
const classes = `nav ${resposivo ? 'collapsed' : ''}`
Frequentemente necessitamos criar textos padrão em aplicações para envio de e-mails ou preenchimento de certas partes de uma página web. Com Template Literals podemos fazer isso com facilidade e utilizando constantes para garantir que apenas certas áreas do texto possam ser alteradas:
const contato = {
nome : "Estevão Dias",
login : "edrd"
const urlAtivacaoCadastro = "https://devmedia.com.br/cadastro/ativacao/"
const mensagem = `Parabéns, ${contato.nome}!
Agora você faz parte da maior comunidade de programadores do país \\o
Falta apenas ativar a sua conta, mas isso é bem rapidinho
Dá um pulo aqui $?usuario=${contato.login}&ativaocao=true`
console.log(mensagem)
Um outro recurso útil é possibilidade de criar Tagged Template Literals a partir de Template Literals com o auxílio de funções:
function taggedLiteral(string){
taggedLiteral`Texto ou expressão` // [ "Texto ou expressão" ]
Podemos com isso separar o texto de uma expressão em Template Literals. Esse recurso pode ser útil quando desejamos processar as partes de um texto de independentemente, porém ele não foi recebido desta forma.