Template Strings
Published: 2021-03-05 14:54:31

Olá dev's, no post anterior eu falei sobre o tipo de dado [String](https://dev.to/inando85/string-poa).

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:

```js
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.

~~~javascript
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.

~~~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.

~~~javascript
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> */
~~~

Espero que tenham curtido e usem bastante template strings.

Segue link para documentação da MDN sobre [template strings](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Template_literals)

________________________________________________________________

Esse foi mais um post da minha saga de estudos em JavaScript Vanilla. Espero que estejam gostando!

Qualquer dúvida ou sugestão, vocês me encontram nas minhas redes sociais:

[LinkedIn](https://linkedin.com/in/inando85)
[GIthub](https://github.com/inando85)
[Twitter](https://twitter.com/inando85)