Verificação de substring em JavaScript: 3 maneiras para iniciantes

Treinador Online de Python para Iniciantes

Aprenda Python facilmente sem sobrecarga teórica. Resolva tarefas práticas com verificação automática e escreva código diretamente no navegador.

Start Course

«Esta string contém aquela palavra?» — a pergunta que atormenta todo iniciante

Você está escrevendo um script, recebendo uma resposta do servidor ou apenas filtrando uma lista de cidades. E de repente fica perplexo: como verificar se uma string contém uma determinada substring em JavaScript? Esta pergunta é um verdadeiro sucesso no Stack Overflow, milhares de desenvolvedores a fazem. E não é à toa: strings são a base de qualquer aplicação, e saber pesquisar substrings nelas rapidamente é uma habilidade básica.

Neste tutorial, abordaremos três maneiras práticas: desde a mais moderna (e amada por todos) até a clássica com recursos extras. Você aprenderá quando usar cada método e escreverá um código que não será vergonha mostrar em uma entrevista.

\n\n

Método nº1: `includes()` — simplicidade e elegância

Se você está escrevendo código em JavaScript moderno (ES6 ou superior), então includes() é seu melhor amigo. Este método retorna true ou false e é lido como uma pergunta em inglês: «A string inclui a substring?».

\n\n

Sintaxe

string.includes(searchString, position)

searchString — o que estamos procurando (obrigatório).
position — parâmetro opcional, a partir de qual índice iniciar a busca (padrão é 0).

\n\n

Exemplo na prática

const message = "Olá, mundo! JavaScript é legal.";\n\nconsole.log(message.includes("JavaScript")); // true\nconsole.log(message.includes("Python"));     // false\nconsole.log(message.includes("mundo", 10));    // false (busca a partir do 10º caractere)\n

Observe: o método é sensível a maiúsculas/minúsculas. "javascript" e "JavaScript" são strings diferentes. Se você precisar ignorar isso, basta converter ambas as strings para minúsculas:

const text = "Estudando JavaScript";\nconst keyword = "javascript";\n\nconsole.log(text.toLowerCase().includes(keyword.toLowerCase())); // true\n

\n\n

Quando usar

Validação de formulários (verificar se email contém "@").
Pesquisa em listas (filtragem de produtos).
Qualquer verificação simples de ocorrência.

\n\n

Método nº2: `indexOf()` — o clássico que nunca morre

Antes do includes(), todos usavam indexOf(). Ele não apenas diz «sim/não», mas retorna o índice da primeira ocorrência da substring. Se a substring não for encontrada, retorna -1.

\n\n

Sintaxe

string.indexOf(searchValue, fromIndex)

\n\n

Exemplo

const sentence = "Eu amo JavaScript e Python.";\n\nconsole.log(sentence.indexOf("amo")); // 2\nconsole.log(sentence.indexOf("Ruby"));  // -1\n\n// Verificação de ocorrência\nif (sentence.indexOf("JavaScript") !== -1) {\n    console.log("Sim, a string contém JavaScript!");\n}\n

\n\n

Detalhe importante: por que não `!== -1`?

Muitos iniciantes escrevem if (str.indexOf("word")) — e isso é um erro. Se a substring estiver no início (índice 0), a condição if (0) é considerada false. Sempre compare com -1.

\n\n

Quando usar `indexOf()` em vez de `includes()`

Quando precisar do índice do início da substring (por exemplo, para extrair parte da string).
Trabalhar com código antigo (IE e versões antigas de navegadores).
Quando precisar encontrar todas as ocorrências (em um loop alterando fromIndex).

\n\n

Método nº3: `search()` e RegExp — quando a flexibilidade é necessária

E se você precisar encontrar não apenas uma palavra, mas um padrão? Por exemplo, «todas as palavras que começam com "JS"» ou «um número de telefone no formato +7-xxx-xxx-xx-xx». É aí que entram as expressões regulares e o método search().

\n\n