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:

(function (exports, require, module, __filename, __dirname) { 
 const texto = "Ciclo novo, novas caras. O técnico Tite fez jus à expectativa
                                                                           
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

 SyntaxError: Invalid or unexpected token

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 
    de novidades na seleção brasileira e divulgou a primeira convocação depois 
    ...'

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

Sintaxe

`Texto inicial ${[ valor ]} e texto final`

Na prática

Exemplo 1

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`

Exemplo 2

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

Exemplo 3

É 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))}`

Exemplo 4

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.

var resposivo = true

const classes = `nav ${resposivo ? 'collapsed' : ''}`

Exemplo 5

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)

Tagged Template Literals

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){
    console.log(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.

const template = (texto, ...expressao) => ({
  texto,
  expressao
})

const { texto, expressoes } = template`O valor do desconto é: ${(preco - (preco * desconto))}`

console.log(texto) // [ "O valor do desconto é:" ]
console.log(expressoes) // [ 4500 ]

Compatibilidade

Engine Versão Minima
Node.JS ( V8) 6.4.0
Safari ( WebKit) 11.1
Chrome ( V8) 68
Microsoft Edge ( ChakraCore) 17
Firefox ( Gecko) 61

Nota: O Opera utiliza atualmente grande parte do código do Chrome como base para o seu próprio desenvolvimento e por isso ele não é mencionado nesta listagem.