Para que serve o backtick em JavaScript – crase ou `

Neste artigo você vai aprender para que serve o backtick em JavaScript, ou como melhor conhecemos, a famosa crase!

O backtick (`), a famosa crase, é o delimitador dos template literals do JavaScript

Em vez de abrir a string com aspas simples ou duplas, você abre e fecha com crase e ganha duas coisas de graça: interpolar valor com ${expressao} e quebrar linha de verdade dentro da string, sem concatenação

const nome = "Matheus"

console.log(`Olá, ${nome}!
Essa linha já vem quebrada`)

O nome oficial do recurso é template literals (nas edições antigas da especificação aparecia como template strings)

Ele entrou na linguagem na ECMAScript 2015 (6ª edição do ECMA-262, junho de 2015) e hoje tem status Baseline Widely available, disponível nos navegadores desde setembro de 2015

Fala programador(a), beleza? Bora aprender mais sobre o backtick em JavaScript!

O recurso que utiliza a crase em JavaScript é chamado de template literals

Ele serve para dar mais poder a uma string

Podemos interpolar variáveis facilmente e também quebrar linha sem se preocupar com concatenação

Tornando muito mais simples a escrita de textos dinâmicos

Veja alguns exemplos:

const name = "Matheus"
const age = 31;

console.log(`Meu nome e´${name} e eu tenho ${age} anos.`)

console.log(`Quebrando

várias

linhas`)

Ambos os exemplos acima são funcionais, e ficam muito mais simples do que se fossem escritos com concatenação

Lembrando também que as variáveis precisam ser inseridas com uma sintaxe especial: ${name}

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Onde name deve ser alterado para o nome da sua variável

Veja que é possível quebrar linhas sem dificuldade, o console apresenta cada texto em uma linha nova

Assim temos strings dinâmicas com sintaxe facilitada! 🙂

Conclusão

No artigo de hoje você aprendeu para que serve o backtick em JavaScript

O caractere de crase serve para criar uma string com mais funcionalidades

Podemos interpolar variáveis e também quebrar linha sem necessitar de concatenação

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos

Dá pra colocar conta e função dentro do ${}?

Dá sim, e é aqui que muita gente se limita

O ${} não aceita só o nome da variável, ele avalia EXPRESSÃO

Então conta, chamada de método, condição, tudo entra ali dentro

const nome = "Matheus"
const preco = 10

console.log(`Fala ${nome.toUpperCase()}, beleza?`)
console.log(`Total da compra: ${preco * 3} reais`)
console.log(`Um dia em milissegundos: ${12 * 60 * 60 * 1000}`)

Se você conhece a interpolação do PHP ou do Python (f-string), a ideia é bem semelhante

A diferença é que aqui não é só substituir valor, é rodar a expressão e jogar o resultado na string 🙂

Como escrever uma crase dentro da string:

Essa é a hora que o texto quebra e ninguém entende o motivo

Se você digitar uma crase solta dentro do template, o JavaScript entende que a string acabou ali

Pra escrever a crase como texto, coloca uma barra invertida antes dela

E se você quer mostrar o ${} literalmente, sem interpolar, escapa o cifrão do mesmo jeito

const nome = "Matheus"

console.log(`Isso aqui é uma crase de verdade: \` massa né?`)
console.log(`Aqui NÃO interpola: \${nome}`)
console.log(`Aqui interpola: ${nome}`)

Tome cuidado com isso quando você monta exemplo de código dentro de string, é o caso clássico de a string "morrer" no meio

Template dentro de template: dá pra aninhar?

Dá, e a regra é simples: crase dentro de crase só vale se estiver dentro de um ${}

Ou seja, o placeholder abre um espaço novo onde o JavaScript aceita outro template

const logado = true
const nome = "Matheus"

console.log(`Bem vindo, ${logado ? `de volta ${nome}` : `visitante`}!`)

Fica legível pra condicional curta

Pra lógica grande, joga fora da string e guarda numa variável antes, senão vira sopa de crase kkk

Tagged template e String.raw: quando a crase chama função

Se liga nisso, porque é o lado do backtick que quase ninguém mostra

Você pode colocar o nome de uma função grudado no template, sem parênteses

O JavaScript chama a função e entrega os pedaços separados: no primeiro argumento vai um array com as partes de texto, e nos argumentos seguintes vão as interpolações, na ordem

function tag(partes, ...valores) {
console.log(partes)      // array com os pedaços de texto
console.log(partes.raw)  // o texto como foi digitado, sem processar os escapes
console.log(valores)     // as interpolações, na ordem
}

const nome = "Matheus"
tag`Olá ${nome}, tudo certo?`

Repara no partes.raw

Ele dá acesso ao texto cru, do jeitinho que você digitou

E já existe uma tag pronta pra isso na linguagem, a String.raw, que processa o ${} normalmente mas NÃO processa as sequências de escape

console.log(String.raw`C:\novo\teste ${1 + 1}`)

Aquele \n ali não vira quebra de linha, ele continua sendo \n mesmo

Salva a vida quando você trabalha com caminho de arquivo ou expressão regular dentro de string

Onde você encontra backtick fora do console.log:

O backtick saiu do "string bonitinha" e virou sintaxe de biblioteca

O caso mais conhecido é o styled-components: o CSS é escrito dentro das crases, logo depois do styled com o elemento

const Button = styled.button`
color: white;
padding: 12px;
`

Isso é tagged template literal na veia, aquilo que a gente viu na seção anterior

No TypeScript o backtick foi parar até na posição de TIPO: o TypeScript 4.1 trouxe os template literal types, com a mesma sintaxe, mais os utilitários de caixa Uppercase, Lowercase, Capitalize e Uncapitalize

type Saudacao = `ola ${string}`

E tem o lado do lint também: o ESLint tem a regra prefer-template, que aponta o uso do operador + com strings e empurra você pro template literal

A regra não tem opções, e a própria documentação avisa pra não usar em ambiente ES3/ES5

Desde quando isso funciona?

Pergunta justa, ninguém quer escrever código que quebra no cliente

Os template literals entraram na especificação da linguagem em 2015, na ECMAScript 2015 (a 6ª edição do ECMA-262, finalizada em junho de 2015)

Hoje o recurso tem status Baseline Widely available, ou seja, amplamente disponível, funcionando nos navegadores desde setembro de 2015

Pra ter noção do quanto isso é antigo: a linguagem já passou por muitas edições desde lá, a ECMAScript 2025 é a 16ª edição (junho de 2025) e a edição aprovada mais recente é a ECMAScript 2026, a 17ª

Ou seja, pode usar sem medo =)

Perguntas frequentes sobre o backtick em JavaScript:

Uma coisa que só aparece quando você tá com a mão no código: o backtick brilha mesmo é quando a string mistura texto fixo com valor que veio de outro lugar

Gravei uma aula da playlist de JavaScript resolvendo problema do dia a dia sobre remover acentos de uma string, e ali o cenário é exatamente esse

A frase vem de uma variável (na aula eu deixo ela fixa, mas ela poderia vir do input do formulário ou do próprio elemento da página), passa por normalize e por um replace com expressão regular, e o resultado vai pro console

Na hora de mostrar o antes e o depois no console, concatenar com + vira aquela salada de aspas e sinal de mais

Com crase é uma linha só:

console.log(`Original: ${frase} | Sem acento: ${semAcento}`)

Outra dor real que peguei ali: expressão regular e caminho de arquivo dentro de string são um convite pra barra invertida sumir sem avisar

É literalmente o caso de uso do String.raw, que devolve o texto cru

O que eu NÃO vou cravar aqui porque ainda não testei com medição séria: se template literal é mais rápido ou mais lento que concatenação com +, e o comportamento da tecla de crase em cada layout de teclado (aquilo de virar tecla morta e esperar a próxima letra)

Quando eu testar de verdade, com número na mão, eu volto e atualizo o post =)