Literais de modelo JavaScript em profundidade

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);// stringLinguagem 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
//stringLinguagem 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 postobjeto:

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 postobjeto. Observe que usamos a técnica de desestruturação de objetos para atribuir as propriedades do postobjeto 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, DoeLinguagem 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.89Linguagem 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 Hiliteral do modelo. Pode tagser qualquer função com a seguinte assinatura:

function tag(literals, ...substitutions) {
    // return a string
}Linguagem de código:  JavaScript  ( javascript )

Nesta função:

• O literalsparâmetro é uma matriz que contém as strings literais.
• O substitutionsparâ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 literalsarray e dois outros argumentos armazenados no substitutionsarray.

O primeiro argumento é a literalsmatriz 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 quantityvariável. Torna-se o primeiro elemento da substitutionsmatriz. 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.