Guia rápido de métodos de string em JavaScript (ao vivo)

Guia rápido de métodos de string em JavaScript

Guia rápido de métodos de string em JavaScript (resultados ao vivo) | We.Inc

Digite seu próprio texto e veja cada método de string comum do JavaScript rodando nele ao vivo: slice, split, replace com regex, padStart, trim e mais, além de funções de validação prontas para copiar.

As strings em JavaScript têm métodos nativos para buscar (includes, indexOf, startsWith), cortar (slice, substring, split), mudar maiúsculas e minúsculas, remover espaços, preencher e substituir. Nenhum deles altera o texto original: strings são imutáveis, então cada método retorna um novo valor. Digite qualquer texto abaixo para ver cada método rodando enquanto você edita.

Os métodos mais usados

Tarefa
Método
Resultado de exemplo

Contém uma palavra?
"web site".includes("site")

Primeiros 3 caracteres
"website".slice(0, 3)
"web"

Último caractere
"website".at(-1)

Palavras para um array
"a b c".split(" ")

Substituir todas as ocorrências
"a-b-c".replaceAll("-", "/")

Preencher um número com zeros
"7".padStart(3, "0")

Ler uma lista de métodos mostra os nomes; rodar os métodos no seu próprio texto mostra o comportamento. O guia ao vivo abaixo aplica cada método ao que você digitar, então casos especiais como índices negativos, strings vazias e espaços repetidos aparecem na hora. Depois vêm substituições com regex e pequenas funções de validação que você pode colar em um formulário.

Digite ou cole texto no campo. Cada linha do guia ao vivo é recalculada enquanto você digita.
Filtre as linhas por nome ou por grupo, como Buscar ou Alterar, para encontrar um método rapidamente.
Edite o padrão regex e a substituição para testar replace com grupos de captura no seu texto.
Copie as funções auxiliares mais abaixo para remover espaços, gerar slugs, title case e verificar emails.

Prefira slice a substr. O MDN marca substr como obsoleto, e slice aceita posições negativas contadas a partir do fim.
replaceAll com uma regex precisa da flag g, senão lança um TypeError.
Use localeCompare ao ordenar nomes para que acentos e maiúsculas fiquem na ordem que os leitores esperam.
length conta unidades de código UTF-16, então um único emoji pode ter length 2. Espalhe a string em um array para contar code points.
Encadear é tranquilo porque cada chamada retorna uma string nova: text.trim().toLowerCase().replaceAll(" ", "-").

Perguntas frequentes

Qual é a diferença entre slice e substring?

Os dois recortam parte de uma string de um índice inicial até um índice final. slice trata um número negativo como contagem a partir do fim, então slice(-3) retorna os três últimos caracteres. substring trata negativos como zero e inverte os argumentos se o início for maior que o fim.

Como substituo todas as ocorrências em uma string?

Use replaceAll("old", "new") para texto simples, ou replace com uma regex global como text.replace(/old/g, "new"). Chamar replace com uma string simples só muda a primeira ocorrência.

Como uso grupos de captura em uma substituição?

Envolva partes do padrão em parênteses e se refira a elas como $1, $2 na string de substituição. Grupos nomeados escritos como (?<year>\d{4}) são referenciados como $<year>, e $& insere a correspondência inteira.

Como verifico se uma string é um endereço de email válido?

Um padrão simples pega erros de digitação óbvios, mas nenhuma regex cobre totalmente as regras de email. A verificação mais confiável no navegador é um input com type="email", que aplica o próprio padrão do padrão HTML, seguido do envio de uma mensagem de confirmação.

Os métodos de string alteram a variável original?

Não. Um valor de string não pode ser alterado depois de criado. Métodos como toUpperCase retornam uma nova string, então você precisa atribuir o resultado: name = name.toUpperCase().

Índices, negativos e caracteres

As posições começam em 0. at() e slice() aceitam números negativos que contam a partir do fim, enquanto charAt() e o acesso com colchetes não aceitam, e por isso text.at(-1) é a forma mais limpa de pegar o último caractere.
O JavaScript armazena texto em UTF-16. A maioria das letras ocupa uma unidade, mas emojis e alguns sistemas de escrita ocupam duas, então length, slice e charAt podem cortar esse caractere ao meio. Array.from(text) ou um loop for...of percorre os code points reais.

Métodos de busca que retornam coisas diferentes

includes, startsWith e endsWith retornam um booleano. indexOf e lastIndexOf retornam uma posição ou -1. search recebe uma regex e também retorna uma posição. match retorna as correspondências, e matchAll retorna um iterador com cada correspondência e seus grupos.
Escolha pelo que a próxima linha precisa. Se você só decide entre sim e não, um método booleano é mais legível do que comparar um índice com -1.

Limpando a entrada do usuário

Remova os espaços antes de validar, porque texto colado costuma trazer espaços ou quebras de linha nas pontas. Normalize maiúsculas e minúsculas antes de comparar e junte sequências de espaços com replace(/\s+/g, " ").
A validação no navegador é uma conveniência para o visitante. Repita as mesmas verificações no servidor, já que requisições podem ser enviadas sem passar pela sua página.

Substituir com uma expressão regular

Uma substituição com regex pode corresponder a padrões em vez de texto fixo, reordenar partes com grupos de captura ou calcular a substituição com uma função.

Padrões especiais dentro da string de substituição

Padrão
Insere

A correspondência inteira

O texto de um grupo de captura numerado

$<name>
O texto de um grupo de captura nomeado

Um cifrão literal

Padrões de replace com regex que você vai reutilizar

Cada linha roda sozinha. A forma com função permite transformar cada correspondência, aqui deixando maiúscula a primeira letra de cada palavra.

Funções de validação e limpeza

Slug, title case, truncar e uma verificação básica de email

Funções pequenas e sem dependências para formulários e URLs. A verificação de email só pega erros óbvios; confirme os endereços enviando uma mensagem.

Métodos a evitar

Métodos antigos que o MDN lista como obsoletos

Método
Use no lugar

substr(start, length)
slice(start, start + length)

anchor(), bold(), link() e os outros métodos que envolvem HTML
Crie elementos com o DOM e defina textContent

Inspecionar

Número de unidades de código UTF-16

Inspecionar

Caractere em uma posição; negativos contam a partir do fim

Inspecionar

Último caractere

Inspecionar

Caractere em uma posição, string vazia se estiver fora do intervalo

Inspecionar

Número da unidade de código UTF-16 em uma posição

Buscar

true se o texto aparece em qualquer lugar

Buscar

true se a string começa com o texto

Buscar

true se a string termina com o texto

Buscar

Primeira posição do texto, ou -1

Buscar

Última posição do texto, ou -1

Buscar

Posição da primeira correspondência da regex, ou -1

Buscar

Array com todas as correspondências de uma regex global

Cortar

Parte entre duas posições

Cortar

Os cinco últimos caracteres

Cortar

Parte entre duas posições, sem negativos

Cortar

Array de pedaços divididos por um separador

Alterar

Todas as letras em maiúsculas

Alterar

Todas as letras em minúsculas

Alterar

Remove espaços nas duas pontas

Alterar

Remove espaços no início

Alterar

Remove espaços no fim

Alterar

Preenche o início até um comprimento

Alterar

Preenche o fim até um comprimento

Alterar

A string unida a si mesma n vezes

Alterar

Substitui apenas a primeira correspondência

Alterar

Substitui todas as correspondências

Alterar

Une strings; + faz o mesmo

Alterar

Forma normal Unicode, útil antes de comparar

Comparar

Negativo, 0 ou positivo para a ordem de classificação

Todos

Guia ao vivo de métodos de string

Digite um texto e cada método abaixo roda nele enquanto você edita.

Seu texto (str)

Filtrar métodos

por exemplo pad ou trim

Grupo de métodos

Métodos de string por grupo ({n} exibidos)

Chamada

Grupo

O que faz

Resultado

Teste um replace com regex

Edite um padrão, as flags e a substituição para testar no seu próprio texto.

Texto

Padrão

Flags

Substituição

Padrão inválido: {msg}

Comece grátis · Sem cartão de crédito

Guia rápido de métodos de string em JavaScript (ao vivo)