Template strings

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since setembro de 2015.

Template Strings são strings 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`

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:

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.

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

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 4 de ago. de 2023 by MDN contributors.

View this page on GitHub • Report a problem with this content

Template strings

In this article

Sintaxe

Descrição

Strings multi-linhas

Interpolação de Expressões

Tagged template strings

Strings Raw

Especificações

Compatibilidade com navegadores

Veja também

Help improve MDN