Strings e Template Literals no JavaScript: Guia Prático

Três formas de escrever uma string em JavaScript

O JavaScript oferece três delimitadores para criar strings. Dois deles são basicamente intercambiáveis; o terceiro vai muito além.

Aspas simples e duplas geram strings idênticas — escolha uma e mantenha o padrão (a maioria das bases de código modernas usa aspas simples ou deixa a decisão para o formatador). Já as crases produzem um template literal, e é aí que a coisa fica interessante: elas permitem interpolação e podem ocupar várias linhas.

Nos bastidores, as três formas produzem o mesmo tipo primitivo string. O delimitador é apenas uma escolha de sintaxe.

Sequências de escape e aspas dentro de strings

Dentro de uma string, a contrabarra inicia uma sequência de escape. As mais comuns são \n (quebra de linha), \t (tabulação), \\ (contrabarra literal) e \" / \' para incluir o mesmo tipo de aspa que você usou para abrir a string:

Dá pra evitar boa parte dos escapes só escolhendo o outro tipo de aspas: 'She said "hi" and left.' não precisa de barra invertida nenhuma. Pragmatismo vence dogma.

Template literals no JavaScript: o superpoder da crase

Uma template literal faz duas coisas que as strings normais não conseguem. Primeiro, ela permite interpolação de string com ${...}:

Tudo que estiver dentro de ${...} é uma expressão JavaScript — e não apenas um nome de variável. Contas, chamadas de função, operador ternário, até outros template literals: vale de tudo:

Em segundo lugar, as template literals suportam múltiplas linhas sem precisar de \n:

Quebras de linha no código-fonte viram quebras de linha dentro da string. Pra qualquer coisa maior que um rótulo curto, usar crase é quase sempre o melhor caminho.

Interpolação de string vence a concatenação

Antes das template literals, a única forma de montar uma string dinâmica era com o operador +:

Ambas produzem exatamente a mesma saída. Só que o template literal soa como a própria frase que você quer montar, enquanto a versão com + te obriga a ficar de olho em aspas, espaços e operadores de concatenação. Use + só quando for juntar uma coisinha a uma string que já existe. Pra qualquer coisa maior que isso, vai de crase.

Strings em JavaScript são imutáveis

Todo método que parece alterar uma string, na real, devolve uma nova:

Se você quer que a mudança aconteça de fato, precisa atribuir o resultado a algum lugar. Essa pegadinha costuma derrubar quem está começando: a pessoa escreve s.replace("a", "b") achando que s vai mudar. Não muda. Strings em JavaScript funcionam como números — o valor em si não pode ser alterado, só a variável é que pode apontar para um novo valor.

Métodos de string que você vai usar no dia a dia

A API de strings é bem extensa, mas, na prática, uns poucos métodos dão conta da maioria dos casos:

Algumas observações que vale a pena memorizar:

• length é uma propriedade, não um método — nada de parênteses.
• replace com uma string simples troca apenas a primeira ocorrência. Se quiser substituir todas, use replaceAll ou uma regex com a flag g.
• slice(start, end) usa um intervalo semiaberto: o caractere em end não entra no resultado.
• Índices negativos em slice contam a partir do fim: s.slice(-3) devolve os três últimos caracteres.

Indexando e percorrendo caracteres de uma string

Strings em JavaScript se comportam como arrays de caracteres somente leitura. Você pode acessar por índice e iterar sobre elas, mas não dá para atribuir valor a uma posição:

for...of percorre os code points, o que lida corretamente com a maior parte do Unicode. Já usar índices (s[i]) percorre as code units UTF-16, o que pode partir emojis e outros caracteres fora do BMP ao meio. Para textos comuns, os dois jeitos funcionam; mas quando o conteúdo vem do usuário, prefira for...of ou [...s].

Tagged template literals

Existe ainda mais uma forma que vale a pena conhecer, mesmo que você raramente vá escrever uma. Uma template literal com tag chama uma função passando os pedaços estáticos da string e os valores interpolados como argumentos separados:

A função tag decide o formato final da string — pode escapar HTML, montar SQL com segurança, compilar CSS ou parsear GraphQL. Esse padrão aparece muito mais em bibliotecas (styled-components, graphql-tag, lit-html) do que em código que você mesmo vai escrever. Mas, quando realmente precisar de processamento customizado de strings, as tagged templates são a ferramenta mais limpa para o trabalho.

Armadilhas comuns

Uma lista rápida do que costuma pegar o pessoal:

• Esquecer de atribuir o resultado dos métodos. s.trim() sozinho não faz nada.
• Usar + para concatenar número e string. "Idade: " + 30 + 5 resulta em "Idade: 305", não "Idade: 35". Com template literals isso some: `Idade: ${30 + 5}`.
• Confundir == com comparação de string. Vamos falar de igualdade com calma mais adiante, mas "1" == 1 é true e "1" === 1 é false. Prefira sempre ===.
• Achar que length é a quantidade de caracteres. Para emojis e outros caracteres de par substituto (surrogate pair), "".length é 2, não 1. Use [..."".length] ou Array.from(s).length quando precisar contar caracteres como o usuário os enxerga.

A seguir: Numbers e BigInt

Strings são um tipo primitivo; números são outro, e o sistema numérico do JavaScript tem suas particularidades — um único tipo Number tanto para inteiros quanto para floats, além do BigInt para quando isso não dá conta. É o assunto da próxima página.