JavaScript Substring: Como Recortar Textos

O método JavaScript substring é um dos recursos mais úteis para manipular textos em aplicações web. Ele permite extrair uma parte de uma string com base em posições numéricas, sendo especialmente prático para exibir resumos, separar códigos, ocultar trechos de dados e tratar informações recebidas de APIs. Embora pareça simples, seu uso correto exige compreender como os índices funcionam, quais são os parâmetros aceitos e em quais situações outros métodos de string, como slice() e substr(), podem ser mais adequados. Neste guia, você aprenderá a usar String.substring() com exemplos claros, boas práticas e comparações relevantes.

Como funciona o JavaScript substring

Em JavaScript, uma string é uma sequência de caracteres indexada a partir de zero. Isso significa que o primeiro caractere ocupa a posição 0, o segundo está na posição 1 e assim por diante. O método substring() é chamado sobre uma string e retorna uma nova string contendo os caracteres compreendidos entre os índices informados. A string original não é alterada, pois as strings são valores imutáveis em JavaScript.

A sintaxe básica é texto.substring(inicio, fim). O parâmetro inicio indica o índice onde a extração começa, enquanto fim determina o índice onde ela termina. É importante observar que o índice final não é incluído no resultado. Portanto, em "JavaScript".substring(0, 4), o retorno será "Java", pois os caracteres nas posições 0, 1, 2 e 3 são selecionados.

Quando apenas o índice inicial é fornecido, o método retorna todos os caracteres desde essa posição até o fim da string. Por exemplo, "desenvolvimento".substring(6) produz "vimento". Esse comportamento é útil quando se conhece o ponto de corte, mas o tamanho restante do conteúdo pode variar.

Veja um exemplo comum de recorte de texto em uma interface:

const descricao = "Aprenda técnicas práticas de JavaScript para projetos modernos.";
const resumo = descricao.substring(0, 35);

console.log(resumo + "...");
// Aprenda técnicas práticas de Java...

Em cenários reais, é recomendável validar o tamanho do texto antes de adicionar reticências. Caso contrário, um conteúdo curto poderá receber pontuação desnecessária. Uma abordagem mais robusta verifica se o comprimento é maior do que o limite estabelecido:

const limite = 35;
const resumo = descricao.length > limite
  ? descricao.substring(0, limite) + "..."
  : descricao;

A documentação da MDN Web Docs sobre String.prototype.substring() explica que os valores passados são convertidos para números inteiros. Na prática, isso significa que parâmetros decimais tendem a ser ajustados para inteiros, mas depender dessa conversão implícita não é uma boa prática. Prefira trabalhar com valores já validados para manter o código previsível.

Parâmetros, índices e comportamentos importantes

O primeiro parâmetro de String.substring representa o ponto inicial da seleção. O segundo é opcional e representa o ponto final exclusivo. Quando o parâmetro final é omitido, a seleção segue até o último caractere disponível. Esse modelo torna o método apropriado para extrair prefixos, sufixos e faixas específicas de texto.

Um detalhe que diferencia substring() de outros métodos de string é o tratamento dos índices invertidos. Se o valor de inicio for maior que o valor de fim, o JavaScript troca automaticamente os dois valores. Assim, "tecnologia".substring(7, 2) retorna o mesmo resultado de "tecnologia".substring(2, 7), isto é, "cnolo". Embora esse comportamento evite falhas, ele pode esconder erros lógicos na aplicação. Por isso, em códigos de produção, vale a pena organizar os índices antes da chamada.

Também é importante saber que índices negativos são tratados como zero. Logo, "arquivo".substring(-3, 4) funciona como "arquivo".substring(0, 4) e retorna "arqu". Para quem precisa contar caracteres a partir do final da string, substring() não é a melhor alternativa; slice() aceita índices negativos e oferece comportamento mais direto nesse caso.

Considere a extração de uma extensão de arquivo. Se o nome for conhecido, é possível usar um índice fixo, mas essa solução não é flexível. Uma estratégia melhor é localizar o último ponto com lastIndexOf():

const arquivo = "relatorio.financeiro.pdf";
const posicaoPonto = arquivo.lastIndexOf(".");
const extensao = arquivo.substring(posicaoPonto + 1);

console.log(extensao); // pdf

Nesse exemplo, o método lastIndexOf() encontra a última ocorrência do delimitador, e substring() recorta tudo após ela. Essa combinação é frequente no tratamento de nomes de arquivos, URLs, identificadores e dados textuais estruturados. Para referências oficiais sobre os comportamentos da linguagem, a especificação mantida pelo ECMA International detalha os métodos de processamento de texto do ECMAScript.

Boas práticas para recortar texto com segurança

Ao utilizar JavaScript substring, o primeiro cuidado é confirmar que o valor recebido é realmente uma string. Em aplicações integradas a formulários, bancos de dados ou APIs externas, um campo pode ser null, undefined ou até um número. Chamar substring() diretamente sobre um valor inválido gera erro e pode interromper funcionalidades da página.

function criarResumo(valor, limite) {
  if (typeof valor !== "string") {
    return "";
  }

  return valor.length > limite
    ? valor.substring(0, limite) + "..."
    : valor;
}

Outro ponto importante é que os índices trabalham com unidades UTF-16. Em textos com emojis, alguns símbolos ou caracteres Unicode compostos, cortar em uma posição arbitrária pode dividir visualmente um caractere. Embora esse cenário não seja comum em textos corporativos simples, ele deve ser considerado em produtos internacionais, chats e redes sociais. Para segmentações mais confiáveis por caracteres visíveis, pode ser necessário usar Array.from(), Intl.Segmenter ou bibliotecas especializadas.

Também convém evitar cortes cegos no meio de palavras em resumos editoriais. Um recorte técnico com substring() atende bem a muitos casos, mas a experiência do usuário melhora quando a aplicação procura o último espaço antes do limite. Dessa forma, o texto exibido permanece mais natural e legível.

function resumirPorPalavra(texto, limite) {
  if (texto.length <= limite) return texto;

  const trecho = texto.substring(0, limite);
  const ultimoEspaco = trecho.lastIndexOf(" ");

  return trecho.substring(0, ultimoEspaco) + "...";
}

Por fim, não use métodos de string como mecanismo de segurança. Ocultar parte de um e-mail, CPF ou token no navegador não protege o dado original se ele ainda estiver disponível no código, no estado da aplicação ou em uma resposta de rede. A proteção de informações sensíveis deve ser aplicada no servidor, com controle de acesso e mascaramento adequado antes da entrega ao cliente.

Checklist para usar String.substring corretamente

• Comece a contagem dos caracteres no índice 0.
• Lembre-se de que o índice final é exclusivo, isto é, não entra no trecho retornado.
• Use somente o parâmetro inicial quando desejar extrair até o fim da string.
• Valide valores externos antes de chamar métodos de string.
• Não dependa da troca automática de índices quando o início for maior que o fim.
• Prefira slice() se precisar trabalhar com índices negativos.
• Verifique o comprimento do conteúdo antes de criar resumos com reticências.
• Considere limites por palavras ou por caracteres Unicode em interfaces voltadas ao público.

Substring, slice e substr: comparação prática

Os métodos substring(), slice() e substr() podem parecer equivalentes à primeira vista, pois todos extraem partes de uma string. No entanto, eles têm diferenças de sintaxe e comportamento que influenciam a manutenção do código. Atualmente, substr() é considerado legado em muitos contextos e não deve ser a escolha padrão para projetos novos.

Na prática, substring() é uma excelente opção quando os limites de recorte são sempre positivos e claramente definidos. Já slice() costuma ser preferível quando a equipe deseja uma semântica mais consistente com arrays ou precisa buscar texto a partir do final. Por exemplo, "documento.pdf".slice(-3) retorna "pdf", enquanto substring(-3) retorna a string completa, pois o valor negativo é convertido para zero.

Dúvidas comuns sobre substring em JavaScript

O que é JavaScript substring?

substring() é um método de strings do JavaScript usado para retornar uma nova sequência de caracteres entre dois índices. Ele não altera o texto original e é empregado para criar recortes, prefixos, sufixos e resumos.

O índice final entra no resultado de substring?

Não. O segundo argumento define uma posição de parada exclusiva. Em "ABCDE".substring(1, 4), o resultado é "BCD": os índices 1, 2 e 3 são incluídos, mas o índice 4 fica de fora.

O que acontece se eu usar índices negativos?

No método String.substring, índices negativos são convertidos para zero. Portanto, ele não recorta a partir do final da string. Se esse for o objetivo, utilize slice(), que aceita valores negativos.

Qual é a diferença entre substring e slice?

Ambos recebem índice inicial e final exclusivo, mas slice() aceita índices negativos e não troca automaticamente valores invertidos. Já substring() converte negativos em zero e reorganiza os índices caso o início seja maior que o fim.

Substring pode cortar uma palavra no meio?

Sim. O método opera exclusivamente por posição de caracteres e não reconhece palavras, frases ou pontuação. Para criar resumos mais naturais, combine-o com lastIndexOf(" ") ou com uma lógica de segmentação textual.

Conclusão: quando usar JavaScript substring

Dominar o JavaScript substring facilita tarefas recorrentes de manipulação de textos em sites, sistemas administrativos e aplicações front-end. O método é simples, rápido e eficiente para extrair conteúdo entre índices positivos, criar previews e separar partes de dados estruturados. Entretanto, seu comportamento com valores negativos e índices invertidos precisa ser entendido para evitar resultados inesperados.

Ao desenvolver uma solução, escolha substring() quando a regra de recorte for clara e baseada em posições não negativas. Para necessidades envolvendo o fim da string, avalie slice(). Em ambos os casos, valide os dados recebidos, respeite a legibilidade do usuário e trate corretamente textos com caracteres especiais. Essas práticas tornam o código mais confiável, reutilizável e fácil de manter.

Fontes e documentação recomendada

• MDN Web Docs: String.prototype.substring().
• MDN Web Docs: String.prototype.slice().
• ECMAScript Language Specification: processamento de texto.
• MDN Web Docs: trabalhando com strings em JavaScript.

Isenção de responsabilidade

Este conteúdo possui finalidade educacional e informativa. Os exemplos de JavaScript substring podem exigir adaptações conforme a versão do ambiente, os requisitos do projeto, a codificação dos dados e as políticas de segurança adotadas. Antes de aplicar qualquer trecho em produção, realize testes, valide entradas externas e consulte a documentação oficial das tecnologias utilizadas.