ES6 - Template Strings
Tulio Faria30 de maio de 2017
Como já citei em outros posts, (como em: ES6 Spread Operator, Async/await, Destructuring Assignment) o ES6 apresenta algumas novidades, uma delas é o Template Strings, uma forma de declarar uma string em JavaScript.
const str1 = `teste` console.log(str1)
Ela será o mesmo que se fizermos uma String convencional, porém podemos fazer algumas coisas extras. Exemplo: Se eu quisesse uma String multilinha, teria que fazer o seguinte:
const str1 = `teste` const strMultiLinha = 'linha1 \n linha2' console.log(strMultiLinha)
Ou seja, teria que utilizar o contra barra (ou scape) em todas as linhas, o que é um tanto chato.
O que pode ser feito?
Com o Template String é possível fazer simplesmente isso:
const strMultiLinha = `linha1 linha meio linha2` console.log(strMultiLinha)
Não é mais necessário utilizar o \n, isso deixa o código mais limpo. Outra coisa do Template String é que podemos criar uma string interpolada, ou seja, misturar uma expressão com a string que vai ser avaliada e depois colocar ela entre pólos, ao invés de concatenar. Fazemos isso apenas abrindo um
\$ {expressão}, por exemplo:const str = `Ola \$ {1 + 1} !` console.log(str)
Obviamente também podemos colocar variáveis dentro:
const a = 10 const str = `Ola \$ {a + 1} !` console.log(str)
Existe ainda uma outra funcionalidade interessante: utilizar algumas tags com o Template String. Exemplo: Vamos criar uma tag e ela vai receber strings e values.
function tag(strings, ...values) { console.log(strings, values) return 'opa' } const str = tag`Olá \$ {10} mundo!`
Perceba que a strings vai ter olá e mundo e o value terá o 10. Ele está entre as strings, por isso o nome interpolação. Com isso podemos criar uma tag em HTML sem grandes problemas. Uma última coisa que conseguimos fazer é checar o valor raw das variáveis apenas adicionando:
console.log(strings.raw[0])
Estamos pegando o raw da posição zero neste exemplo. Quando colocamos o raw, ele mostra exatamente como foi definido, então se você colocar um \n, será mostrado realmente o raw disso, o \n.
Confira o vídeo:
Curta o DevPleno no Facebook, inscreva-se no canal e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!
Autor
Tulio Faria30 de maio de 2017