Templates de String do JavaScript

Sinônimos:

  • Literais de Template
  • Strings de Template
  • Templates de String
  • Sintaxe de Back-Ticks

Sintaxe de Back-Ticks

Literais de templateUse back-ticks (`) em vez de aspas ("`) para definir strings:

Exemplo

let text = `Hello World!`;

Experimente você mesmo

Aspas dentro de strings

Ao usarLiterais de template，pode usar tanto aspas simples quanto aspas duplas dentro de uma string:

Exemplo

let text = `He's often called "Johnny"`;

Experimente você mesmo

Strings em várias linhas

Literais de templatePermite strings em várias linhas:

Exemplo

let text =
The quick
brown fox
salta sobre
the lazy dog`;

Experimente você mesmo

Interpolação

Literais de templateFornece um método simples para inserir variáveis e expressões em strings.

Este método é chamado de interpolação de strings (string interpolation).

Sintaxe

${...}

Substituição de variável

Literais de templatePermite variáveis dentro de strings:

Exemplo

let firstName = "Bill";
let lastName = "Gates";
let text = `Welcome ${firstName}, ${lastName}!`;

Experimente você mesmo

A substituição automática de variáveis por valores reais é chamada deInterpolação de strings.

Substituição de expressão

Literais de templatePermite expressões dentro de strings:

Exemplo

let price = 10;
let VAT = 0.25;
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;

Experimente você mesmo

A substituição automática de expressões por valores reais é chamada de interpolação de strings.

Template HTML

Exemplo

let header = "Templates Literals";
let tags = ["template literals", "javascript", "es6"];
let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
  html += `<li>${x}</li>`;
}
html += `</ul>`;

Experimente você mesmo

Suporte do navegador

Internet Explorer não suportaLiterais de template.

A primeira versão do navegador que completamente suporta literais de template é:

Chrome IE Firefox Safari Opera
Chrome 41 Edge 13 Firefox 34 Safari 10 Opera 29
Março de 2015 Novembro de 2015 Dezembro de 2014 Setembro de 2016 Abril de 2015

Referência completa de strings

Para referência completa, acesse nossa referência completa Manual de Referência de String em JavaScript.

Este manual contém descrições e exemplos de todas as propriedades e métodos de string.