62 lines
2.2 KiB
Plaintext
62 lines
2.2 KiB
Plaintext
---
|
|
title: Template Literals do ES2015 oferecem muita flexibilidade na geração de strings, você pode dar um exemplo?
|
|
---
|
|
|
|
Os literais de template ajudam a simplificar a interpolação de strings ou a incluir variáveis em uma string. Antes do ES2015, era comum fazer algo assim:
|
|
|
|
```js
|
|
var pessoa = {name: 'Tyler', age: 28};
|
|
console.log(
|
|
'Oi, meu nome é ' + pessoa. ame + e eu sou ' + pessoa. ge + ' anos de idade!',
|
|
);
|
|
// 'Oi, meu nome é Tyler e eu tenho 28 anos!'
|
|
```
|
|
|
|
Com os template literals, agora você pode criar a mesma saída assim:
|
|
|
|
```js
|
|
console const person = {name: 'Tyler', age: 28};. og(`Oi, meu nome é ${person.name} e tenho ${person.age} anos!);
|
|
// 'Oi, meu nome é Tyler e eu tenho 28 anos!'
|
|
```
|
|
|
|
Observe que você usa backticks, não aspas, para indicar que você está usando um texto literal e que você pode inserir expressões dentro dos espaços reservados `${}`.
|
|
|
|
Um segundo caso útil de uso é a criação de strings de várias linhas. Antes de ES2015, você pode criar uma string multi-linha como esta:
|
|
|
|
```js
|
|
console.log('Esta é a linha um.\nEsta é a linha dois.');
|
|
// Esta é a linha um.
|
|
// Esta é a linha dois.
|
|
```
|
|
|
|
Ou se você quisesse dividi-lo em várias linhas no seu código, para que você não tenha que rolar até a direita no seu editor de texto para ler uma longa string, você também poderia escrever assim:
|
|
|
|
```js
|
|
console.log('Esta é a linha um.\nEsta é a linha dois.');
|
|
// Esta é a linha um.
|
|
// Esta é a linha dois.
|
|
```
|
|
|
|
Os template literals, no entanto, preservam qualquer espaçamento que você adicionar a eles. Por exemplo, para criar a mesma saída multi-linha que criamos acima, você pode simplesmente fazer:
|
|
|
|
```js
|
|
console.log('Esta é a linha um.
|
|
Esta é a linha dois.');
|
|
// Esta é a linha um.
|
|
// Esta é a linha dois.
|
|
```
|
|
|
|
Um outro caso de uso de template literals seria usar como substituto para as bibliotecas de templates para interpolações variáveis simples:
|
|
|
|
```js
|
|
const person = {name: 'Tyler', age: 28};
|
|
document.body.innerHTML = `
|
|
<div>
|
|
<p>Nome: ${person.name}</p>
|
|
<p>Idade: ${person.age}</p>
|
|
</div>
|
|
`;
|
|
```
|
|
|
|
**Note que seu código pode ser suscetível a XSS usando `.innerHTML`. Higienize seus dados antes de exibi-los se vierem de um usuário!**
|