Literais de modelo JavaScript (strings de modelo)

Índice

Literais de modelo para strings
Strings multilinha usando literais de modelo
Interpolação de expressão
Modelos etiquetados

Neste tutorial, você aprenderá sobre literais de modelo JavaScript (strings de modelo) com a ajuda de exemplos.

Literais de modelo (strings de modelo) permitem que você use strings ou expressões incorporadas na forma de uma string. Eles são colocados em crases ``. Por exemplo,

 const name = 'Jack'; console.log(`Hello $(name)!`); // Hello Jack!

Observação : o literal de modelo foi introduzido em 2015 (também conhecido como ECMAScript 6 ou ES6 ou ECMAScript 2015). Alguns navegadores podem não suportar o uso de literais de modelo. Visite o suporte do JavaScript Template Literal para saber mais.

Literais de modelo para strings

Nas versões anteriores do JavaScript, você usava aspas simples ''ou aspas duplas ""para strings. Por exemplo,

 const str1 = 'This is a string'; // cannot use the same quotes const str2 = 'A "quote" inside a string'; // valid code const str3 = 'A 'quote' inside a string'; // Error const str4 = "Another 'quote' inside a string"; // valid code const str5 = "Another "quote" inside a string"; // Error

Para usar as mesmas aspas dentro da string, você pode usar o caractere de escape .

 // escape characters using const str3 = 'A \'quote\' inside a string'; // valid code const str5 = "Another "quote " inside a string"; // valid code

Em vez de usar caracteres de escape, você pode usar literais de modelo. Por exemplo,

 const str1 = `This is a string`; const str2 = `This is a string with a 'quote' in it`; const str3 = `This is a string with a "double quote" in it`;

Como você pode ver, os literais de modelo não apenas facilitam a inclusão de citações, mas também tornam nosso código mais limpo.

Strings multilinha usando literais de modelo

Literais de modelo também facilitam a escrita de strings de várias linhas. Por exemplo,

Usando literais de modelo, você pode substituir

 // using the + operator const message1 = 'This is a long message' + 'that spans across multiple lines' + 'in the code.' console.log(message1)

com

 const message1 = `This is a long message that spans across multiple lines in the code.` console.log(message1)

O resultado de ambos os programas será o mesmo.

 Esta é uma mensagem longa que se estende por várias linhas no código.

Interpolação de expressão

Antes do JavaScript ES6, você usaria o +operador para concatenar variáveis e expressões em uma string. Por exemplo,

 const name = 'Jack'; console.log('Hello ' + name); // Hello Jack

Com literais de modelo, é um pouco mais fácil incluir variáveis e expressões dentro de uma string. Para isso, usamos a $(… )sintaxe.

 const name = 'Jack'; console.log(`Hello $(name)`); // template literals used with expressions const result = `The sum of 4 + 5 is $(4 + 5)`; console.log(result); console.log(`$(result < 10 ? 'Too low': 'Very high')`)

Resultado

 Hello Jack A soma de 4 + 5 é 9 Muito alto

O processo de atribuição de variáveis e expressões dentro do literal de modelo é conhecido como interpolação.

Modelos etiquetados

Normalmente, você usaria uma função para passar argumentos. Por exemplo,

 function tagExample(strings) ( return strings; ) // passing argument const result = tagExample('Hello Jack'); console.log(result);

No entanto, você pode criar modelos marcados (que se comportam como uma função) usando literais de modelo. Você usa tags que permitem analisar literais de modelo com uma função.

O modelo marcado é escrito como uma definição de função. No entanto, você não passa parênteses ()ao chamar o literal. Por exemplo,

 function tagExample(strings) ( return strings; ) // creating tagged template const result = tagExample`Hello Jack`; console.log(result);

Resultado

 ("Olá Jack")

Uma matriz de valores de string é passada como o primeiro argumento de uma função de tag. Você também pode passar os valores e expressões como os argumentos restantes. Por exemplo,

 const name = 'Jack'; const greet = true; function tagExample(strings, nameValue) ( let str0 = strings(0); // Hello let str1 = strings(1); // , How are you? if(greet) ( return `$(str0)$(nameValue)$(str1)`; ) ) // creating tagged literal // passing argument name const result = tagExample`Hello $(name), How are you?`; console.log(result);

Resultado