Literais de modelo JavaScript

Índice

    Mostrar índice

Sinônimos:

  • Literais de modelo

  • Sequências de modelo

  • Modelos de string

  • Sintaxe de Back-Tics

Sintaxe de Back-Tics

Literais de modelo usam crases (``) em vez de aspas ("") para definir uma string:

Exemplo

let text = `Hello World!`;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Template Literals</h2>

<p>Template literals use back-ticks (``) to define a string:</p>

<p id="demo"></p>

<p>Template literals are not supported in Internet Explorer.</p>

<script>
let text = `Hello world!`;
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Citações dentro de strings

Com modelos literais, você pode usar aspas simples e duplas dentro de uma string:

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Template Literals</h2>

<p>With back-ticks, you can use both single and double quotes inside a string:</p>

<p id="demo"></p>

<p>Template literals are not supported in Internet Explorer.</p>

<script>
let text = `He's often called "Johnny"`;
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Strings multilinhas

Literais de modelo permitem strings multilinhas:

Exemplo

let text =
`The quick
brown fox
jumps over
the lazy dog`;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Template Literals</h2>

<p>Template literals allows multiline strings:</p>

<p id="demo"></p>

<p>Template literals are not supported in Internet Explorer.</p>

<script>
let text =

`The quick
brown fox
jumps over
the lazy dog`;

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Interpolação

Literais de modelo fornecem uma maneira fácil de interpolar variáveis e expressões em strings.

O método é chamado de interpolação de strings.

A sintaxe é:

${...}

Substituições de variáveis

Literais de modelo permitem variáveis em strings:

Exemplo

let firstName = "John";
let lastName = "Doe";

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Template Literals</h2>

<p>Template literals allows variables in strings:</p>

<p id="demo"></p>

<p>Template literals are not supported in Internet Explorer.</p>

<script>
let firstName = "John";
let lastName = "Doe";

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

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

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

Substituição de expressão

Literais de modelo permitem expressões em strings:

Exemplo

let price = 10;
let VAT = 0.25;

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Template Literals</h2>

<p>Template literals allows variables in strings:</p>

<p id="demo"></p>

<p>Template literals are not supported in Internet Explorer.</p>

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

document.getElementById("demo").innerHTML = total;
</script>

</body>
</html>

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

Modelos 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 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Template Literals</h2>

<p>Template literals allows variables in strings:</p>

<p id="demo"></p>

<p>Template literals are not supported in Internet Explorer.</p>

<script>
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>`;
document.getElementById("demo").innerHTML = html;
</script>

</body>
</html>

Suporte ao navegador

Template Literals é um recurso ES6 (JavaScript 2015).

É compatível com todos os navegadores modernos:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

Literais de modelo não são suportados no Internet Explorer.

Referência completa de string

Para uma referência completa de String, acesse:

Referência completa de string JavaScript.

A referência contém descrições e exemplos de todas as propriedades e métodos de string.