Template strings

Esta tradução está incompleta. Ajude a traduzir este artigo em inglês

Template literals são literais string que permitem expressões embutidas. Você pode usar string multi-linhas e interpolação de string com elas. Elas eram chamadas "template strings" nas versões anteriores à especificação ES2015.

Sintaxe

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

`\`` === '`' // --> 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:

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:

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:

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:

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:

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:

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.

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

Especificações

Especificação Status Comentário
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Template Literals' in that specification.
Padrão Definição inicial. Definido em várias seções da especificação: Template Literals, Tagged Templates
ECMAScript (ECMA-262)
The definition of 'Template Literals' in that specification.
Padrão em tempo real Definido em várias seções da especificação: Template Literals, Tagged Templates

Compatibidade com navegadores

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
Template literalsChrome Full support 41Edge Full support 12Firefox Full support 34IE No support NoOpera Full support 28Safari Full support 9WebView Android Full support 41Chrome Android Full support 41Firefox Android Full support 34Opera Android Full support 28Safari iOS Full support 9Samsung Internet Android Full support 4.0nodejs Full support 4.0.0
Escape sequences allowed in tagged template literals
Experimental
Chrome Full support 62Edge Full support 79Firefox Full support 53IE No support NoOpera Full support 49Safari Full support 11WebView Android Full support 62Chrome Android Full support 62Firefox Android Full support 53Opera Android Full support 46Safari iOS Full support 11Samsung Internet Android Full support 8.0nodejs Full support 8.10.0

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

Veja também