Template String

É uma nova maneira de escrever strings deixando o código mais limpo e fácil de entender. Ela permite colocar expressões dentro da string, diferente do processo que utilizamos quando utilizamos a concatenação.

Essa nova forma foi introduzida no javascript a partir do ES6.

Const quant = 05 

Const phrase = ‘Estou lendo ‘ + quant + ‘ livros, um deles é “Dom Casmurro” de Machado de Assis.’ 

Console.log(phrase)

Estou lendo 5 livros, um deles é “Dom Casmurro” de Machado de Assis.

O exemplo acima descreve o modo de se escrever string nas regras do ES5. Além de ser mais difícil de entender é mais complicado de implementar.

Outro problema no uso desse modo de escrever string, é quando queremos destacar alguma parte do texto com aspas. Pegando o exemplo acima e reescrevermos da seguinte forma:

phrase = ‘Estou lendo ‘ + quant + ‘ livros, um deles é ‘Dom Casmurro’ de Machado de Assis.’ 

Console.log(phrase) 

Uncaught SyntaxError: Unexpected identifier

É exibido uma mensagem de erro. Isto ocorre porque o javascript considerou que ao colocar a palavra ‘Dom Casmurro’ o sistema entendeu que foi fechada aspas no início da palavra Dom e aberta outra no final de Casmurro, e como não foi colocado o sinal de concatenação (+), foi apresentado o erro.

Para se evitar este tipo de erro, é recomendado o uso de aspas da seguinte forma.

Quando for destacar parte da string com aspas duplas, utilizar aspas simples na abertura e fechamento.

Quando for destacar parte da string com aspas simples, utilizar aspas duplas na abertura e fechamento.

Há uma possibilidade no uso com apenas um só tipo de aspas. É por meio da . É o chamado fugir as aspas, colocamos uma barra antes das aspas de início e outra antes da barra de fechamento. Assim, podemos utilizar tanto aspas simples com duplas, em todo o processo.

const phraseExemple2 = ‘Estou lendo ‘ + quant + ‘ livros, um deles é \’Dom Casmurro\’ de Machado de Assis.’  

console.log(phraseExemple2) 

Estou lendo 5 livros, um deles é ‘Dom Casmurro’ de Machado de Assis. 

const phraseExemple3 = “Estou lendo “ + quant + “ livros, um deles é \”Dom Casmurro\” de Machado de Assis.”  

console.log(phraseExemple3) 

Estou lendo 5 livros, um deles é ‘Dom Casmurro’ de Machado de Assis. 

Atualmente, quando queremos injetar expressões numa string, utilizamos o template String.  

Const phraseExemple4 = `Estou lendo ${quant} livros, um deles é “Dom Casmurro” de Machado de Assis.` 

console.log(phraseExemple4) 

Estou lendo 5 livros, um deles é ‘Dom Casmurro’ de Machado de Assis.

Para implementar este modo é necessário envolver a string com o acentos graves (` ´), para colocar expressões coloca-se por meio do cifrão seguindo das chaves ${expressão}.

Uma outra forma de usar template string é na criação de templates HTML. Utilizamos quando queremos colocar diretamente no HTML um conteúdo dinâmico html.

const adress = 'Avenida Paulista n°33'  

const name = 'mario filho'  

const phone = '2333-3333'  

const html = ` 

<h2>Cliente</h2> 

<p>nome:${name}</p> 

<p>telefone:${phone}</p> 

` 

console.log(html) 

<h2>Cliente</h2> 

<p>nome:mario filho</p> 

<p>telefone:2333-3333</p>

roger-melo-treinamentos / curso-de-js-roger-melo

Resumo da Aula Template strings - Aula 02-06 da etapa 01 #3655

Template String