As Strings no JavaScript possuem várias limitações, diferente de outras linguagens como Python, que naturalmente permitem artifícios como o uso de múltiplas linhas. Mas isso mudou com a chegada do ECMAScript 6, que introduziu as template Strings.

Template Strings em JavaScript são Strings que permitem expressões embutidas, interpolação e uso de múltiplas linhas para uma mesma String. Além disso, há possibilidade de formatação de Strings e o uso de tags no HTML para Strings.

Sintaxe

Antes de mais nada, é importante saber que as template Strings são marcadas pelos acentos graves (` `), o acento de crase; também conhecidos como back ticks. Possuem a seguinte sintaxe:

`${String}`

Utilidades

Substituição de Strings

Digamos que você queira criar uma função para dizer “Oi!” para determinadas pessoas. Um jeito simples de fazer isso é usando Strings:

function saudacao(){
    console.log("Oi Camila!")
}
saudacao()

Nesse caso, se quiséssemos cumprimentar várias pessoas, teríamos que ter várias functions saudação. Ou seja, é bem mais complicado. O valor nunca seria diferente, pois para cada chamada seria impresso o valor modificado.

Uma possível solução seria criar outras functions: saudacao2, saudacao3, etc, mas isso deixaria o código extenso e de difícil compreensão. Desse modo, se usarmos template Strings o problema pode ser resolvido da seguinte forma:

function saudacao(nome){
    console.log(`Oi ${nome}!`)
}
saudacao("Camila")
saudacao("José")
saudacao("Matheus")
saudacao("Ana")

Strings em Múltiplas Linhas

É possível usar Strings em múltiplas linhas, dessa forma:

console.log('Exemplo de String\n' +
'Em múltiplas linhas')

Mas existe um jeito ainda mais simples de se obter o mesmo efeito, usando template Strings:

console.log(`Exemplo de Template String
em múltiplas linhas`)

Note que com a template String não é necessário o uso do \n, nem concatenar com a String seguinte. A String em múltiplas linhas são duas Strings concatenadas, enquanto que a template String resolve o problema em uma só estrutura.

Interpolação de Expressões

Esse outro cenário também pode ser resolvido com Strings com a seguinte sintaxe:

let a = 2
let b = 3
console.log('Cinco é ' + (a + b) + ' e\nnão ' + (3 * a + b) + '.')

Usando Template Strings a solução fica bem mais simples:

let a = 2
let b = 3
console.log(`Cinco é  ${a + b} 
e não  ${3 * a + b}.`)

Tagged Template Strings

As tagged template Strings em JavaScript são uma forma mais avançada de template Strings. Elas permitem a marcação das mesmas com uma função, e que essa função modifica a saída final das strings.

A sua sintaxe é muito parecida com a de uma função normal, porém a chamada dela é diferente:

function taggedTemplateString(strings) {
    console.log(strings)
}

taggedTemplateString`Uma marcação bem diferente!` //imprime ['Uma marcação bem diferente!']

Pode-se ainda encadear à essa chamada uma outra tagged template, dessa maneira:

function taggedTemplateString(strings, valores) {
    console.log(strings, valores)
}
let outraString = 'E não é que funciona mesmo?'
taggedTemplateString`Uma marcação bem diferente! ${outraString}`

E assim pode-se continuar acrescentando parâmetros quanto mais valores se queira informar à função.

Referências