Resumo : neste tutorial, você aprenderá sobre o template literal JavaScript, que permite trabalhar com um template de string mais facilmente.
Antes do ES6, você usava aspas simples ( '
) ou aspas duplas ( "
) para quebrar uma string literal. E as strings têm funcionalidade muito limitada.
Para permitir que você resolva problemas mais complexos, os literais de modelo ES6 fornecem a sintaxe que permite trabalhar com strings de forma mais segura e limpa.
No ES6, você cria um modelo literal envolvendo seu texto entre crases ( `
) da seguinte maneira:
let simple = `This is a template literal`;
Linguagem de código: JavaScript ( javascript )
e você obtém os seguintes recursos:
- Uma string multilinha: uma string que pode abranger várias linhas.
- Formatação de string: a capacidade de substituir parte da string pelos valores de variáveis ou expressões. Esse recurso também é chamado de interpolação de string.
- Escape de HTML: a capacidade de transformar uma string para que seja segura para inclusão em HTML.
A sintaxe básica dos literais de modelo JavaScript
Conforme mencionado anteriormente, em vez de usar aspas simples ou duplas, um modelo literal usa crases, conforme mostrado no exemplo a seguir:
let str = `Template literal in ES6`;
console.log(str);// Template literal in ES6
console.log(str.length); // 23
console.log(typeof str);// string
Linguagem de código: JavaScript ( javascript )
Usando os crases, você pode usar livremente aspas simples ou duplas no literal do modelo sem escapar.
let anotherStr = `Here's a template literal`;
Linguagem de código: JavaScript ( javascript )
Se uma string contém um backtick, você deve escapar dela usando uma barra invertida ( \
):
let strWithBacktick = `Template literals use backticks \` insead of quotes`;
Linguagem de código: JavaScript ( javascript )
Strings multilinhas
Antes do ES6, você usava a seguinte técnica para criar uma string multilinha incluindo manualmente o caractere de nova linha ( \n
) na string da seguinte forma:
let msg = 'Multiline \n\
string';
console.log(msg);
//Multiline
//string
Linguagem de código: JavaScript ( javascript )
Observe que a barra invertida ( \
) colocada após o caractere de nova linha ( \n
) indica a continuação da string em vez de uma nova linha.
Essa técnica, entretanto, não é consistente entre os mecanismos JavaScript. Portanto, era bastante comum criar uma string multilinha que dependesse de uma matriz e concatenação de strings da seguinte maneira:
let msg = ['This text',
'can',
'span multiple lines'].join('\n');
Linguagem de código: JavaScript ( javascript )
Os literais de modelo permitem que você defina strings multilinhas com mais facilidade porque você precisa adicionar uma nova linha na string onde quiser:
let p =
`This text
can
span multiple lines`;
Linguagem de código: JavaScript ( javascript )
Observe que o espaço em branco faz parte da string. Portanto, você precisa garantir que o texto esteja alinhado com o recuo adequado. Suponha que você tenha um post
objeto:
let post = {
title: 'JavaScript Template Literals',
excerpt: 'Introduction to JavaScript template literals in ES6',
body: 'Content of the post will be here...',
tags: ['es6', 'template literals', 'javascript']
};
Linguagem de código: JavaScript ( javascript )
O código a seguir retorna o código HTML do post
objeto. Observe que usamos a técnica de desestruturação de objetos para atribuir as propriedades do post
objeto a variáveis individuais: title
, excerpt
, body
, e tags
.
let {title, excerpt, body, tags} = post;
let postHtml = `<article>
<header>
<h1>${title}</h1>
</header>
<section>
<div>${excerpt}</div>
<div>${body}</div>
</section>
<footer>
<ul>
${tags.map(tag => `<li>${tag}</li>`).join('\n ')}
</ul>
</footer>`;
Linguagem de código: HTML, XML ( xml )
A seguir está a saída da variável postHtml
. Observe como usamos o espaçamento para recuar as <li>
tags corretamente.
<article>
<header>
<h1>JavaScript Template Literals</h1>
</header>
<section>
<div>Introduction to JavaScript template literals in ES6</div>
<div>Content of the post will be here...</div>
</section>
<footer>
<ul>
<li>es6</li>
<li>template literals</li>
<li>javascript</li>
</ul>
</footer>
Linguagem de código: HTML, XML ( xml )
Substituições de variáveis e expressões
Neste ponto, um modelo literal é como uma versão melhor de uma string JavaScript normal. A grande diferença entre um modelo literal e uma string regular são as substituições.
As substituições permitem incorporar variáveis e expressões em uma string. O mecanismo JavaScript substituirá automaticamente essas variáveis e expressões por seus valores. Esse recurso é conhecido como interpolação de string.
Para instruir o JavaScript a substituir uma variável e uma expressão, coloque a variável e a expressão em um bloco especial da seguinte forma:
${variable_name}
Veja o exemplo a seguir:
let firstName = 'John',
lastName = 'Doe';
let greeting = `Hi ${firstName}, ${lastName}`;
console.log(greeting); // Hi John, Doe
Linguagem de código: JavaScript ( javascript )
A substituição ${firstName}
e ${lastName}
acesso às variáveis firstName
e lastName
inserção de seus valores na greeting
string.
A greeting
variável então contém o resultado das substituições. O exemplo a seguir substitui uma expressão:
let price = 8.99,
tax = 0.1;
let netPrice = `Net Price:$${(price * (1 + tax)).toFixed(2)}`;
console.log(netPrice); // netPrice:$9.89
Linguagem de código: JavaScript ( javascript )
Modelos marcados
Uma tag de modelo carrega a transformação no literal do modelo e retorna a string de resultado.
Você coloca a tag no início do modelo antes do caractere de crase (`) da seguinte maneira:
let greeting = tag`Hi`;
Linguagem de código: JavaScript ( javascript )
Neste exemplo, tag
é a tag do modelo que se aplica ao Hi
literal do modelo. Pode tag
ser qualquer função com a seguinte assinatura:
function tag(literals, ...substitutions) {
// return a string
}
Linguagem de código: JavaScript ( javascript )
Nesta função:
- O
literals
parâmetro é uma matriz que contém as strings literais. - O
substitutions
parâmetro contém os argumentos subsequentes interpretados para cada substituição.
Veja o exemplo a seguir:
function format(literals, ...substitutions) {
let result = '';
for (let i = 0; i < substitutions.length; i++) {
result += literals[i];
result += substitutions[i];
}
// add the last literal
result += literals[literals.length - 1];
return result;
}
let quantity = 9,
priceEach = 8.99,
result = format`${quantity} items cost $${(quantity * priceEach).toFixed(2)}.`;
console.log(result); // 9 items cost $80.91.
Linguagem de código: JavaScript ( javascript )
Neste exemplo, a format()
função aceita três argumentos: o literals
array e dois outros argumentos armazenados no substitutions
array.
O primeiro argumento é a literals
matriz que contém três elementos:
- Uma string vazia antes da primeira substituição ( ” ). Observe que o primeiro argumento do array literals é uma string vazia.
- Uma sequência
'items cost'
localizada entre a primeira e a segunda substituições. - Uma string que segue a segunda substituição (
'.'
)
O segundo argumento é 9
, que é o valor interpretado da quantity
variável. Torna-se o primeiro elemento da substitutions
matriz. O terceiro argumento é 80.91
, que é o valor interpretado da expressão (quantity * priceEach).toFixed(2)
. Torna-se o segundo elemento da matriz de substituição.
Resumo
- Use o backtick para criar uma string literal para interpolação de string.