Métodos de String em JavaScript Explicados: substr vs substring vs slice (Melhores Práticas e Uso Moderno)

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introdução

JavaScript é uma linguagem de programação essencial no desenvolvimento web. Em particular, a manipulação de strings é frequentemente usada para formatar dados, analisar informações e atualizar a interface do usuário de forma dinâmica.
Neste artigo, explicaremos em detalhes três métodos de string JavaScript amplamente utilizados — substr, substring e slice. Como esses métodos fornecem funcionalidades semelhantes, entender suas diferenças ajudará você a escolher o mais adequado para cada situação.
Também discutiremos por que o substr foi descontinuado e apresentaremos abordagens alternativas, oferecendo conselhos práticos para escrever JavaScript seguindo as melhores práticas modernas.

2. Informações Básicas e Uso de Cada Método

Esta seção explica a sintaxe básica e o uso de substr, substring e slice. Compreender esses métodos ajudará você a escolher o mais apropriado e a melhorar a legibilidade e a manutenção do código.

2.1 Método substr

Sintaxe:

string.substr(start, length)

Descrição:

• start : especifica o índice inicial para a extração (baseado em 0).
• length : especifica o número de caracteres a serem extraídos. Se omitido, a extração continua até o final da string.

Exemplo de Uso:

let str = "JavaScript";
console.log(str.substr(0, 4)); // Output: "Java"
console.log(str.substr(4, 6)); // Output: "Script"

Observação:
O método substr está descontinuado e recomenda‑se evitá‑lo em códigos futuros. Use slice ou substring em seu lugar.
Exemplo Alternativo (usando slice):

let str = "JavaScript";
console.log(str.slice(0, 4)); // Output: "Java"
console.log(str.slice(4));   // Output: "Script"

2.2 Método substring

Sintaxe:

string.substring(start, end)

Descrição:

• start : índice inicial da extração.
• end : índice final (o caractere neste índice não é incluído).

Exemplo de Uso:

let str = "JavaScript";
console.log(str.substring(0, 4)); // Output: "Java"
console.log(str.substring(4, 10)); // Output: "Script"

Pontos:

1. A ordem dos argumentos é corrigida automaticamente: se você chamar substring(10, 4), ele será tratado como substring(4, 10).
2. Valores negativos são ignorados: qualquer argumento negativo é tratado como 0.

Exemplo alternativo quando valores negativos são necessários (usando slice):

let str = "JavaScript";
console.log(str.slice(-6)); // Output: "Script"

2.3 Método slice

Sintaxe:

string.slice(start, end)

Descrição:

• start : índice inicial da extração.
• end : índice final (o caractere neste índice não é incluído).

Exemplo de Uso:

let str = "JavaScript";
console.log(str.slice(0, 4));  // Output: "Java"
console.log(str.slice(-6));   // Output: "Script"

Pontos:

1. Suporta valores negativos: índices negativos contam a partir do final da string.
2. Funciona tanto para strings quanto para arrays: também pode extrair elementos de arrays, tornando‑o altamente versátil.

3. Tabela Comparativa de Cada Método

Escolhendo o Método Adequado por Caso de Uso:

• Extrair trechos curtos: → slice
• Quando valores negativos são necessários: → slice
• Compatibilidade com código legado: → Evite substr; migre conforme necessário

4. Exemplos Práticos de Código

Manipulação Básica de Strings

let text = "JavaScriptProgramming";

// Extract the first 10 characters
console.log(text.slice(0, 10)); // "JavaScript"

// Extract the last 3 characters
console.log(text.slice(-3));   // "ing"

Extraindo Valores com Base em um Padrão

let url = "https://example.com/index.html";

// Get the file name
console.log(url.slice(url.lastIndexOf("/") + 1)); // "index.html"

5. Como Lidar com Métodos Descontinuados

O método substr do JavaScript está descontinuado. Isso ocorre porque o substr foi classificado como um método não recomendado nas especificações mais recentes do ECMAScript.
Esta seção explica os problemas associados ao substr, métodos alternativos e como migrar seu código.

5.1 Por que substr está obsoleto?

1. Legibilidade ruim:

• substr usa o segundo argumento como “número de caracteres a extrair,” o que difere de outros métodos que utilizam um índice final.
  Essa inconsistência torna o código mais difícil de entender.

1. Possíveis problemas de compatibilidade futura devido a mudanças na especificação:

• Recursos antigos são descontinuados durante a padronização do ECMAScript.
  Novos códigos não devem depender deles.

1. Sem suporte a valores negativos:

• substr não aceita índices negativos, enquanto slice aceita.

5.2 Como migrar para métodos modernos

Caso 1: Extraindo uma substring de comprimento fixo

// Deprecated code
let str = "JavaScript";
console.log(str.substr(0, 4)); // "Java"

// Recommended (slice)
console.log(str.slice(0, 4)); // "Java"

Caso 2: Extraindo o final de uma string

// Deprecated code
console.log(str.substr(-6)); // Error (negative not supported)

// Recommended (slice)
console.log(str.slice(-6)); // "Script"

Caso 3: Extraindo parte de uma URL ou nome de arquivo

let url = "https://example.com/index.html";

// Deprecated code
let filename = url.substr(url.lastIndexOf("/") + 1);
console.log(filename); // "index.html"

// Recommended (slice)
let filenameNew = url.slice(url.lastIndexOf("/") + 1);
console.log(filenameNew); // "index.html"

5.3 Pontos de refatoração para código legado

1. Realizar uma varredura no código:

• Use ferramentas como ESLint para detectar onde substr é usado.

1. Fortalecer a cobertura de testes:

• Use testes unitários para garantir que o comportamento permaneça correto após a substituição dos métodos.

1. Migrar gradualmente:

• Priorize a substituição nas seções importantes ou frequentemente executadas.

5.4 Benefícios de migrar longe de substr

1. Legibilidade e manutenção aprimoradas:

• A intenção do código fica mais clara, facilitando o entendimento da equipe.

1. Compatibilidade com padrões modernos:

• Seguir os padrões ECMAScript garante estabilidade a longo prazo.

1. Suporte flexível a valores negativos:

• slice permite extrações concisas tanto a partir do início quanto do final.

6. Perguntas Frequentes (FAQ)

Esta seção resume perguntas comuns e respostas sobre métodos de manipulação de strings em JavaScript.

Q1: Ainda posso usar substr?

R:
Sim, a maioria dos navegadores modernos ainda suporta substr.
Entretanto, como o ECMAScript o marca como obsoleto, deve ser evitado em novos projetos ou bases de código que exijam compatibilidade futura.
Alternativa recomendada:

let str = "JavaScript";
console.log(str.slice(0, 4)); // "Java"

Q2: Qual a diferença entre slice e substring?

R:
A tabela abaixo resume as diferenças entre eles:

Exemplos:

let str = "JavaScript";

// slice examples
console.log(str.slice(0, 4));   // "Java"
console.log(str.slice(-6));    // "Script"

// substring examples
console.log(str.substring(0, 4));  // "Java"
console.log(str.substring(4, 10)); // "Script"

Q3: Quais são os riscos de continuar usando métodos obsoletos?

R:

1. Possível remoção de suporte nos navegadores: substr pode acabar não sendo mais suportado.
2. Aumento dos custos de manutenção: Depurar recursos obsoletos consome tempo adicional.
3. Qualidade de código inferior: Não seguir padrões modernos reduz a legibilidade.

Q4: Qual método é melhor para strings longas?

R:
slice é o mais indicado porque aceita índices negativos e oferece grande flexibilidade.
Exemplo:

let longText = "This is a very long text string used for testing purposes.";

// First 10 characters
console.log(longText.slice(0, 10)); // "This is a "

// Last 10 characters
console.log(longText.slice(-10));  // "purposes."

Q5: Como contar regressivamente usando valores negativos?

R:
Use slice, já que substring trata valores negativos como 0.
Exemplo:

let str = "JavaScript";

// slice supports negative values
console.log(str.slice(-6));  // "Script"

// substring treats negative as 0
console.log(str.substring(-6)); // "JavaScript"

Q6: Existem diferenças de desempenho?

A:
Os navegadores modernos não mostram diferenças de desempenho significativas entre slice, substring ou substr.
Como todos são funções nativas, priorize a legibilidade e a manutenibilidade em vez de micro‑otimizações.

7. Resumo e Práticas Recomendadas

Neste artigo, exploramos os métodos de string do JavaScript substr, substring e slice, abordando sua sintaxe básica, diferenças, exemplos práticos de código e estratégias de migração para métodos obsoletos.
Esta seção reorganiza as principais características de cada método e apresenta as práticas recomendadas modernas.

7.1 Resumo de Cada Método

7.2 Critérios Práticos de Seleção

1. Use substring para extração simples de intervalo:

• Melhor quando valores negativos não são necessários. Exemplo:

  let str = "JavaScript";
  console.log(str.substring(0, 4)); // Output: "Java"
  

2. Use slice para máxima flexibilidade:

• Suporta índices negativos e é o método preferido para novo código. Exemplo:

  let str = "JavaScript";
  console.log(str.slice(-6)); // Output: "Script"
  

3. Substitua substr o quanto antes:

• Migre para slice ou substring ao manter código legado.

7.3 Práticas Modernas Recomendadas

1. Escreva código pensando na legibilidade:

• Código claro e conciso melhora a manutenibilidade a longo prazo.

1. Evite métodos obsoletos:

• substr pode perder suporte nos navegadores em futuras atualizações — migre cedo.

1. Use slice ao trabalhar com valores negativos:

• slice é o único método que lida corretamente com índices negativos.

1. Use ESLint e suítes de teste para manter a qualidade do código:

• Análise estática ajuda a detectar métodos obsoletos e a impor estilos de codificação modernos.

7.4 Exemplo de um Estilo de Codificação Moderno

// Example: Extract domain from an email address
let email = "user@example.com";
let domain = email.slice(email.indexOf("@") + 1);
console.log(domain); // Output: "example.com"

// Example: Get file extension from a URL
let url = "document.pdf";
let extension = url.slice(-3);
console.log(extension); // Output: "pdf"

7.5 Plano de Ação para os Leitores

1. Revise seu código existente:

• Verifique se substr está sendo usado em seu projeto e substitua‑o onde necessário.

1. Siga as melhores práticas em código novo:

• Use padrões modernos e flexíveis e evite recursos obsoletos.

1. Aproveite comentários e perguntas da comunidade:

• Compartilhe perguntas ou casos de uso para ajudar outros a aprender enquanto reforça sua compreensão.

Conclusão

Este artigo forneceu uma explicação aprofundada dos métodos substr, substring e slice do JavaScript, incluindo sintaxe, exemplos, tabelas comparativas e estratégias de migração.

• Evite substr porque está obsoleto.
• Use substring para cenários simples.
• Use slice para máxima flexibilidade e práticas modernas recomendadas.

Use esses insights para escrever código JavaScript eficiente e manutenível.

8. Links Relacionados e Referências

Para aprofundar seu entendimento de substr, substring e slice, aqui estão links e referências úteis. Documentação oficial e recursos de aprendizado ajudarão você a acompanhar as últimas atualizações e técnicas do JavaScript.

8.1 Documentação Oficial

1. MDN Web Docs – Objeto String do JavaScript

• Link: String – MDN Web Docs
• Visão geral: Uma referência completa para o objeto String do JavaScript com especificações detalhadas e exemplos.

1. Especificação ECMAScript (ECMA-262)

• Link: ECMAScript Official Specification
• Visão Geral: A especificação oficial da linguagem que abrange os recursos mais recentes do ECMAScript, métodos descontinuados e detalhes técnicos.

8.2 Sites de Aprendizagem e Tutoriais

1. JavaScript.info – Guia de Manipulação de Strings

• Link: JavaScript.info
• Visão Geral: Um guia extenso que cobre operações básicas e avançadas com strings, com exemplos práticos.

1. Progate – Curso de JavaScript para Iniciantes a Intermediários

• Link: Progate
• Visão Geral: Uma plataforma interativa ideal para iniciantes que aprendem por meio de exercícios de codificação práticos.

1. DotInstall – Lições Introdutórias de JavaScript

• Link: DotInstall
• Visão Geral: Lições em vídeo curtas que facilitam o aprendizado visual e rápido de JavaScript.

8.3 Recursos de Código de Exemplo Prático

1. GitHub – Projetos de Exemplo em JavaScript

• Link: GitHub
• Visão Geral: Aprenda melhores práticas e padrões do mundo real explorando projetos de código aberto.

1. CodePen – Compartilhamento Interativo de Código

• Link: CodePen
• Visão Geral: Compartilhe e teste seu código com outros desenvolvedores ou navegue por exemplos para inspiração.

8.4 Livros Recomendados

1. JavaScript: The Definitive Guide (7th Edition)

• Visão Geral: Uma referência abrangente e autoritativa que cobre o JavaScript desde os fundamentos até recursos avançados.

1. Mastering Modern JavaScript – Revised Edition

• Visão Geral: Uma referência prática focada no JavaScript moderno e padrões de codificação atualizados.

8.5 Comunidade e Fóruns

1. Stack Overflow (Japonês)

• Link: Stack Overflow
• Visão Geral: Uma comunidade de Q&A onde você pode resolver problemas de JavaScript de forma eficiente.

1. Qiita

• Link: Qiita
• Visão Geral: Uma plataforma japonesa rica em artigos práticos e estudos de caso sobre JavaScript.

1. Teratail

• Link: Teratail
• Visão Geral: Um site japonês de Q&A ideal para fazer perguntas técnicas na língua nativa.

Conclusão

Esta seção apresentou uma ampla gama de recursos — de referências oficiais a tutoriais, repositórios de código de exemplo e plataformas de comunidade — para apoiar o aprendizado contínuo sobre operações com strings em JavaScript. Principais Lições:

1. Verifique a documentação oficial regularmente:

• Garanta que seu estilo de codificação permaneça alinhado com os padrões mais recentes.

1. Fortaleça as habilidades por meio de codificação prática:

• A prática torna os conceitos mais claros e melhora a aplicação no mundo real.

1. Engaje-se com a comunidade:

• Compartilhar perguntas e soluções ajuda a aprofundar o entendimento e ampliar sua rede.