Please note, this is a STATIC archive of website developer.mozilla.org from November 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Template strings

This is a new technology, part of the ECMAScript 2015 (ES6) standard.
This technology's specification has been finalized, but check the compatibility table for usage and implementation status in various browsers.

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

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 crases (` `) em vez de aspas simples ou duplas. Template strings podem possuir marcadores. Estes são indicados pelo sinal de dólar seguido de chaves (${expression}). As expressões nos marcadores, bem como o texto em volta delas são passados à 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.

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 utilzar a seguinte síntaxe:

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

Agora, com template strings, você pode utilizar as substituções sintaticas 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 mofiicar 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 crua (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.

ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Tagged Templates' in that specification.
Standard Definição inicial.

Compatibidade com navegadores

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 41 34 (34) Não suportado Não suportado Não suportado
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support Não suportado 41.0 34.0 (34) Não suportado Não suportado Não suportado

Veja também

Etiquetas do documento e colaboradores

 Colaboradores desta página: sergio-garcia, trestini, lucasmedeiros
 Última atualização por: sergio-garcia,