O acento grave delimita um novo tipo de literal string no JavaScript, chamado template string (ou template literal). Foi introduzido na especificação ECMAScript 2015 (ES6).
Entre as possibilidades de um template string, pode-se mencionar:
Quebra de linhas literais
Ao contrário de literais "normais" de string (delimitados por aspas simples '
ou aspas duplas "
), template strings podem conter quebras de linha sem qualquer tipo de escape:
const name = 'Foo';
const age = 'Bar';
const htmlStr =
`<div>Name: ${name}</div>
<div>Idade: ${age}</div>`;
Interpolação de valores
Você pode interpolar valores dentro de um template string. Isso é útil pois evita o uso do operador de concatenação +
, que muitas vezes acaba "poluindo" o código:
const name = 'Foo';
const age = 'Bar';
const oldWay = 'Olá, chamo-me ' + name + ' e tenho ' + age + ' anos.';
const newWay = `Olá, chamo-me ${name} e tenho ${age} anos.`;
Ao interpolar algum valor, ele sempre será convertido ao tipo string
. Para isso, o método toString
será utilizado.
Tagged template string
De certo modo, você pode utilizar uma template string como "argumento" de uma função. Nesse caso, a função é chamada de tag
e precede o primeiro caractere de acento agudo:
tag`Caracteres da string...`;
Uma vez que essa expressão é avaliada, tag
(que é uma função) é invocada. Ao primeiro argumento passa-se o array de cada string (separadas no local da interpolação). Os demais argumentos (é uma função variádica) são os próprios valores interpolados. As possibilidades disso são infinitas. É a base para bibliotecas como styled-components
. Uma outra aplicação é realizar a filtragem do valor a ser interpolado para, por exemplo, prevenir XSS. Este artigo (em inglês) exemplifica.
String.raw
O String.raw
permite o uso de strings sem aplicar sequências de escape, como \n
, \t
etc. O String.raw
é uma função tag built-in na linguagem, de modo que o tag function é raw
, método dentro do objeto global String
.
Esta pergunta dá mais detalhes sobre o String.raw
. A documentação também pode ser útil.
É realmente um "template"?
Apesar do nome "template strings", esse tipo de string literal não se trata, exatamente, de um template "real", já que, ao contrário deste, os template strings não permitem avaliação posterior. Desse modo, todos os valores que serão interpolados devem estar no escopo no momento em que o literal for avaliado pelo runtime. Esse tema é mais discutido nesta outra resposta.