템플릿 문자열

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

Hoje, dando continueidade a saga de estudos, irei abordar o tema 템플릿 문자열.

템플릿 문자열

간단한 문자열, vimos que qualquer conteúdo colocado dentro de aspas simples '' ou duplas "" é 고려 문자열, inclusive numeros, estes são convertidos automaticamente por baixo.dos panos pelo JavaScript

Abaixo exemplo de concatenação de strings com codigo JavaScript sem o uso de 템플릿 문자열:

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

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 템플릿 문자열, utilizaremos crase `` ao invés de aspas.

E todo codigo 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.

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

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

Além disso, a chegada da template strings ao JavaScript, nos propiciou criar templates HTML, pois a 템플릿 문자열 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> */

Espero que tenham curtido e usem bastante 템플릿 문자열.

Segue link para documentação da MDN sobre template strings


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:

GIthub