Template Strings

Olá dev's, no post anterior eu falei sobre o tipo de dado String.

Hoje, dando continuidade a saga de estudos, irei abordar o tema template strings.

Template Strings

Quando estudamos sobre strings, vimos que qualquer conteúdo colocado dentro de aspas simples '' ou duplas "" é considerado string, inclusive números, estes são convertidos automaticamente por baixo dos panos pelo JavaScript.

Abaixo exemplo de concatenação de strings com código JavaScript sem o uso de template strings:

const postTitle = 'JavaScript is Awesome!'
const postAuthor = 'Fernando Junior'
const postComments = 20

const postMessage = 'O post "' + postTitle + '", do ' + postAuthor + ', tem ' + postComments + ' comentários.'

console.log(postMessage) // O post "JavaScript is Awesome!", do Fernando Junior, tem 20 comentários.

Esta abordagem acima, torna bastante complicada a legibilidade, imagina se fosse um texto maior, com mais variáveis do JavaScript ainda dentro, ficaria bem complicado o entendimento.

Hoje eu irei apresentar uma nova forma de escrevermos strings.

Esta nova forma chegou ao JavaScript junto do EcmaScript 6 (ES6), em 2015, tornando possível concatenar strings e códigos JavaScript de forma muito mais clara, ajudando com isso a legibilidade do código.

Vale ressaltar que se em algum lugar você encontrar a palavra template literals, tenha em mente que é um sinônimo de template strings.

Para usarmos template strings, utilizaremos crase `` ao invés de aspas.

E todo código de JavaScript que for utilizado dentro de template strings, deve ficar contido dentro da anotação de ${}.

Abaixo, utilizarei o mesmo exemplo usado acima para que possamos ver como fica muito mais fácil o entendimento utilizando template strings.

const postTitle = 'JavaScript is Awesome!'
const postAuthor = 'Fernando Junior'
const postComments = 20

const postMessage = `O post "${postTitle}", do ${postAuthor}, tem ${postComments} comentários.`

console.log(postMessage) // O post "JavaScript is Awesome!", do Fernando Junior, tem 20 comentários.

Observe como ficou muito menos verboso e mais fácil de entender.

Vale ressaltar que dentro de ${} não precisa ser necessariamente uma variável, pode ser qualquer código javascript.

console.log(`${5 + 10}`) // 15

Além disso, a chegada da template strings ao JavaScript, nos propiciou criar templates HTML, pois a template strings aceita também quebras de linhas.

const html = `
<h2>${postTitle}</h2>
<p>Autor: ${postAuthor}</p>
<span>Este post tem ${postComments} comentários.</span>
`

console.log(html)

// Output

/* <h2>JavaScript is Awesome!</h2>
<p>Autor: Fernando Junior</p>
<span>Este post tem 20 comentários.</span> */