Introdução aos literais de modelo.

A manipulação de strings é uma tarefa muito comum na programação, especialmente na construção de aplicações web interativas. Se você já passou algum tempo trabalhando com JavaScript, provavelmente já teve que colocar algumas variáveis ​​em strings.
Nas versões mais antigas do JavaScript, isso significava usar o operador para unir strings por meio de um processo chamado concatenação de strings. No entanto, com a introdução de literais de modelo na atualização do JavaScript ES6(2015). Agora temos uma maneira mais limpa de inserir variáveis ​​em strings, chamada interpolação de strings.

O que são literais de modelo?

Os literais de modelo nos permitem manipular strings com mais facilidade. Eles são colocados entre crases (`) em vez de (') ou ("), e suportam interpolação de string usando a sintaxe (${}) para colocar variáveis ​​ou chamadas de função diretamente em uma string.

Aqui está um exemplo de como os literais de modelo simplificam a interpolação de strings.

const name = "John"
const age = 24

// Old method using concatenation
const greeting = "Hello, "   name   "! You are "   age   " years old."

// New method using template literals
const greetingWithTemplateLiteral = `Hello, ${name}! You are ${age} years old.`

console.log(greetingWithTemplateLiteral) // Outputs: Hello, John! You are 24 years old.

Benefícios do uso de literais de modelo

1. Legibilidade aprimorada

Ao usar a concatenação de strings, era fácil se perder em vários sinais, especialmente ao trabalhar com strings mais longas. Os literais de modelo evitam isso, permitindo que você escreva strings de uma maneira mais fácil de seguir.

const product = "laptop"
const price = 1400

console.log(`The price of the ${product} is $${price}`)
// Outputs: The price of the laptop is $1400

2. Sequências de múltiplas linhas

Antes dos literais de modelo, você tinha que usar caracteres de escape como \n para criar strings multilinhas. Agora você pode escrevê-los dentro de crases(`).

// Old method
const multiLineString1 = "This is the first line"   "\n"   "This is the second line"   "\n"   "This is the third line"

// New method
const multiLineString2 = `This is the first line
This is the second line
This is the third line`

console.log(multiLineString1)
console.log(multiLineString2)
/* Both output:
This is the first line
This is the second line
This is the third line
*/

3. Avaliação de expressão

Você também pode realizar cálculos, chamar funções ou manipular dados dentro de strings.

const a = 1
const b = 10

console.log(`The sum of a and b is ${a   b}`) 
// Outputs: The sum of a and b is 11

const upperCaseName = (name) => name.toUpperCase()
console.log(`Your name in uppercase is ${upperCaseName("John")}`)
// Outputs: Your name in uppercase is JOHN

Casos de uso comuns em JavaScript

1. Geração HTML

Em vez de construir strings HTML com concatenação, você pode colocar variáveis ​​diretamente na string com interpolação.

const name = "John"
const htmlContent = `
  
Hello, ${name}!
  
Welcome to the site.
`

2. Registro de mensagens

Você também pode inserir variáveis ​​diretamente nas mensagens de log sem a necessidade de concatenação.

const user = "John"
const action = "logged in"

console.log(`User ${user} just ${action}`)
// Outputs: User John just logged in

3. Criando URLs

Os literais de modelo também facilitam a construção de URLs.

const userId = 123
const apiUrl = `https://api.example.com/user/${userId}/details`

console.log(apiUrl)
// Outputs: https://api.example.com/user/123/details

4. Lógica Condicional

Outro ótimo caso de uso é Lógica condicional. Com literais de modelo, você pode fornecer condições simples às strings usando o operador ternário (? :), que é uma abreviação para uma condição if-else.
Operadores lógicos como && (e) ou || (ou) também pode ser usado para adicionar partes condicionais a uma string. Isso elimina a necessidade de instruções extras if-else ou de concatenação.

const isMember = true
console.log(`User is ${isMember ? 'a member' : 'not a member'}`) 
// Outputs: User is a member

Você também pode adicionar expressões mais complexas dentro de literais de modelo.

/* In this example, the condition age >= 18 is evaluated
the result is either “an adult” or “a minor” based on the value of age*/
const age = 24

const message = `You are ${age >= 18 ? 'an adult' : 'a minor'}`

console.log(message) 
// Outputs: You are an adult

/*In this, if isLoggedIn is true and username exists
username is displayed or else, it defaults to “Guest” */
const isLoggedIn = true
const username = "John"

const greeting = `Welcome ${isLoggedIn && username ? username : 'Guest'}`

console.log(greeting)
// Outputs: Welcome John

Conclusão

Literais de modelo em JavaScript oferecem uma maneira mais limpa e eficiente de lidar com a interpolação de strings. Entre construir conteúdo da web, registrar mensagens ou criar código mais legível, esse método oferece a flexibilidade que você precisa.

Da próxima vez que você estiver fazendo malabarismos com variáveis ​​e strings, tente usar literais de modelo. Você verá rapidamente por que esse é meu método preferido para trabalhar com JavaScript.

Recursos

1. Documentos da Web MDN - Literais de modelo
2. GitHub - Laboratório de Strings de Revisão da Fase 1
3. Escolas W3 - Strings de modelo JavaScript