Template strings
================

*Template* Strings são *string*s que permitem expressões embutidas. Você pode *utilizar string* multi-linhas e interpolação de *string* com elas.

Basicamente é uma nova forma de criar strings e tornar o seu código um pouco mais legível.

Sintaxe
-------


```js
`corpo de texto`

`texto linha 1
 texto linha 2`

`texto string ${expression} texto string`

tag `texto string ${expression} texto string`
```

Descrição
---------

*Template strings* são envolvidas por (acentos graves) (` `) em vez de aspas simples ou duplas. *Template strings* podem possuir *placeholders*. Estes são indicados por um cifrão seguido de chaves (`${expression}`). As expressões nos *placeholders*, bem como o texto em volta delas são passados a uma função. A função padrão apenas concatena as partes em uma *string* única. Se existir uma expressão precedendo a *template string* (função `tag` exemplo), a *template string* é definida como "*tagged template string*". No caso, a expressão *tag* (geralmente uma função) é chamada pela *template string* processada, que você pode manipular antes de produzir o resultado.


```js
`\`` === "`"; // --> true
```

### Strings multi-linhas

Qualquer caracter de nova linha inserido no código é parte da *template string*. Utilizando *strings* normais, você teria de usar a síntaxe a seguir para obter strings multi-linhas:


```js
console.log("texto string linha 1\n" + "texto string linha 2");
// "texto string linha 1
// texto string linha 2"
```


Para obter o mesmo efeito com strings multi-linhas, você agora pode escrever:


```js
console.log(`texto string linha 1
texto string linha 2`);
// "texto string linha 1
// texto string linha 2"
```

### Interpolação de Expressões

Para encapsular expressões dentro de strings, você precisava utilizar a seguinte sintaxe:


```js
var a = 5;
var b = 10;
console.log("Quinze é " + (a + b) + " e\nnão " + (2 \* a + b) + ".");
// "Quinze é 15 e
// não 20."
```


Agora, com template strings, você pode utilizar as substituições sintáticas tornando o código mais legível:


```js
var a = 5;
var b = 10;
console.log(`Quinze é ${a + b} e
não ${2 \* a + b}.`);
// "Quinze é 15 e
// não 20."
```

### Tagged template strings

Uma forma mais avançada dos *template string* são os *template strings* com marcações ou tags, ou *tagged template strings*. Com eles, você tem a possibilidade de modificar a saída dos *template strings* usando uma função. O primeiro argumento contém um array de literais ("Hello" e "World" neste exemplo). Do segundo em diante e cada argumento subsequente contém valores previamente processados (algumas vezes chamados *cooked*) pelas expressões de substituição ("15" e "50" no caso do exemplo). No final, a função retorna a string ja manipulada:


```js
var a = 5;
var b = 10;

function tag(strings, ...values) {
  console.log(strings[0]); // "Hello "
  console.log(strings[1]); // " world "
  console.log(values[0]); // 15
  console.log(values[1]); // 50

  return "Bazinga!";
}

tag`Hello ${a + b} world ${a \* b}`;
// "Bazinga!"
```

### Strings *Raw*

A propriedade especial `raw`, disponível no primeiro argumento da função da *tagged template string* acima, permite o acesso as strings de maneira pura (*raw*) exatamente como elas foram especificadas:


```js
function tag(strings, ...values) {
  return strings.raw[0];
}

tag`string text line 1 \n string text line 2`;
// "string text line 1 \\n string text line 2"
```


Adicionalmente, o método `String.raw()` permite a criação de strings cruas, exatamente como as *template functions* e as concatenações deveram criar.


```js
String.raw`Hi\n${2 + 3}!`; // "Hi\\n5!"
```

Especificações
--------------

| Specification |
| --- |
| ECMAScript Language Specification # sec-template-literals |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `String`
* `String.raw()`
* Gramática léxica
* Template-like strings in ES3 compatible syntax
* "ES6 in Depth: Template strings" on hacks.mozilla.org
* https://styled-components.com/