---
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 person = { name: 'Tyler', age: 28 };
console.log(
  'Oi, meu nome é ' +
    person.name +
    ' e eu sou ' +
    pessoa.age +
    ' 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
const person = { name: 'Tyler', age: 28 };
console.log(`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.\n' + 'Esta é 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!**