Concatenando strings no Javascript

Template Literals ou Template Strings são uma forma de concatenar (unir) strings no Javascript, de forma a se utilizar de uma síntaxe mais limpa e direta ao ponto.

Antes fazíamos assim:

const nome = 'gughog'
const classe = 'Dark Mage'
const level = 30

const descricao = nome + ', o grande ' + classe + ' de nível ' + level + '.'

console.log(descricao) // gughog, o grande Dark Mage de nível 30.

Com o template string podemos refatorar descricao para algo assim:

const descricao = `${nome}, o grande ${classe} de nível ${level}.`

Perceba que agora temos uma sintaxe muito mais simples e limpa, lembrando de fato de um template que é preenchido com variáveis.

Para usar, basta apenas envolver toda nossa string entre backticks (ou crases), e então envolver qualquer expressão dentro de chaves precedidas de um símbolo de dólar: ${}. A síntaxe fica assim:

Minha string ${minhaExpressao} outro pedaço da string.

Veja mais alguns exemplos de uso dos template strings:

// Template strings mantém as quebras de linhas que você definir:
const stringMultiLinha = `
  1. Linha um
  2. Linha dois
  3. Linha três
`

// Realizando operações:
const operacoes = ` 9 X 9 = ${9*9}.`

// Usando em loops:
for (let i = 0; i <= 10; i++) {
  console.log(`Logando o número: ${i}`)
}

// Usando para recuperar valores de retorno de funções:
function somar (a, b) {
  return a + b
}

console.log(`Somando valores: ${ somar(30, 70) }.`)

Template strings são de extrema importancia a qualquer desenvolvedor Javascript que pretente criar aplicações modernas, visto que a manipulação de strings sempre é necessária, espero que você tenha aprendido um pouco mais sobre essa incrível ferramenta. Até o próximo post!