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, podem ser mencionadas:
Quebra de linhas literais
Ao contrário de literais "normais" de string (delimitados por aspas simples '
ou aspas duplas "
), template strings podem abrigar múltiplas linhas 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
É possível 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, ToString
será aplicado ao valor interpolado.
Tagged template string
De certo modo, pode-se 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 propriamente dito, 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.