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

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

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

1. Introdução

JavaScript é uma linguagem de programação essencial no desenvolvimento web moderno. Em particular, a manipulação de strings é frequentemente usada para formatação de dados, análise e atualizações dinâmicas da interface do usuário.

Este artigo fornece uma explicação detalhada de três métodos de string JavaScript amplamente utilizados — substr, substring e slice. Como esses métodos têm 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, apresentaremos alternativas recomendadas e ofereceremos conselhos práticos para alinhar seu código com as melhores práticas modernas de JavaScript.

2. Visão geral básica e uso de cada método

Esta seção explica a sintaxe básica e o uso de substr, substring e slice em detalhes. Ao compreender cada método, você pode selecionar o mais apropriado e melhorar tanto a legibilidade quanto a manutenção do código.

2.1 Método substr

Sintaxe:

string.substr(start, length)

Descrição:

• start : Especifica a posição inicial (índice) para extração. A indexação começa em 0.
• length : Especifica o número de caracteres a serem extraídos. Se omitido, os caracteres são extraídos da posição inicial até o final da string.

Exemplo:

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

Observações importantes:
O método substr está descontinuado e seu uso é desencorajado no desenvolvimento JavaScript moderno. Em vez disso, use slice ou substring como alternativas.

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 : Especifica a posição inicial para extração.
• end : Especifica a posição final (o caractere neste índice não é incluído).

Exemplo:

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

Pontos principais:

1. A ordem dos argumentos é ajustada automaticamente: Se substring(10, 4) for especificado, ele será interpretado automaticamente como substring(4, 10).
2. Valores negativos são ignorados: Se um valor negativo for fornecido, ele será tratado como 0.

Alternativa 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 : Especifica a posição inicial para extração.
• end : Especifica a posição final (o caractere neste índice não é incluído).

Exemplo:

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

Pontos principais:

1. Suporta valores negativos: Valores negativos são interpretados como deslocamentos a partir do final da string.
2. Aplicável tanto a strings quanto a arrays: Como slice também pode ser usado com arrays, é um método altamente versátil.

3. Tabela comparativa de cada método

Como escolher de acordo com o caso de uso:

• Extrair uma pequena parte de uma string: → slice
• Quando índices negativos são necessários: → slice
• Compatibilidade com código legado: → Evite substr e migre para alternativas modernas

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 um valor de um padrão específico

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

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

5. Tratamento de Métodos Depreciados

Em JavaScript, o método substr é considerado depreciado. Isso ocorre porque ele foi oficialmente classificado como uma abordagem não recomendada nas últimas especificações ECMAScript. Esta seção explica os problemas com substr, as alternativas disponíveis e estratégias práticas de migração.

5.1 Por que o substr está Depreciado?

1. Baixa legibilidade:

• O método substr especifica o número de caracteres a extrair como seu segundo argumento, o que difere de outros métodos que utilizam posições de início e fim. Essa inconsistência torna o código mais difícil de entender à primeira vista.

2. Possíveis problemas de compatibilidade futura devido a mudanças nas especificações:

• Durante o processo de padronização do ECMAScript, recursos mais antigos podem ser marcados como depreciados. Como resultado, substr deve ser evitado em código novo para garantir compatibilidade a longo prazo.

3. Sem suporte a valores negativos:

• Enquanto substr não aceita valores negativos, slice suporta totalmente índices negativos, permitindo uma extração de strings mais flexível.

5.2 Como Migrar para Métodos Alternativos

Caso 1: Extraindo uma Substring de Comprimento Fixo

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

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

Caso 2: Extraindo o Final de uma String

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

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

Caso 3: Extraindo uma 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); // Output: "index.html"

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

5.3 Dicas de Refatoração para Código Legado

1. Execute uma varredura de código:

• Use ferramentas como ESLint para detectar ocorrências de substr em sua base de código.

2. Melhore a cobertura de testes:

• Utilize testes unitários para verificar o comportamento após a refatoração e garantir que as mudanças não introduzam regressões.

3. Migre gradualmente:

• Priorize seções críticas da sua base de código e substitua os métodos depreciados passo a passo.

5.4 Benefícios de Migrar Longe do substr

1. Legibilidade e manutenção aprimoradas:

• A intenção do código fica mais clara, facilitando a colaboração e a manutenção a longo prazo.

2. Alinhamento com especificações modernas:

• Conformar‑se ao padrão ECMAScript garante atualizações futuras mais suaves e maior compatibilidade.

3. Manipulação flexível de valores negativos:

• Usar slice permite extrair facilmente tanto do início quanto do fim das strings, resultando em código mais limpo e conciso.

6. Perguntas Frequentes (FAQ)

Esta seção resume perguntas comuns e respostas relacionadas a métodos de manipulação de strings em JavaScript, ajudando os leitores a resolver rapidamente dúvidas típicas.

Q1: O substr ainda pode ser usado?

R:
Sim, substr ainda funciona na maioria dos navegadores modernos. No entanto, como ele está depreciado na especificação ECMAScript, deve ser evitado em novos projetos ou quando se considera compatibilidade a longo prazo.

Alternativa recomendada:

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

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

R:
A tabela abaixo resume as principais diferenças entre slice e substring.

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 depreciados?

A:
Continuar a usar métodos obsoletos pode acarretar os seguintes riscos.

1. Fim do suporte dos navegadores: No futuro, substr pode deixar de ser suportado pelos navegadores.
2. Aumento dos custos de manutenção: Corrigir bugs ou avisos causados por métodos obsoletos pode gerar sobrecarga desnecessária.
3. Diminuição da qualidade do código: Não alinhar-se às especificações modernas reduz a legibilidade e a manutenibilidade.

Q4: Qual método é o melhor para lidar com strings longas?

A:
Ao trabalhar com strings longas, slice é a melhor escolha devido à sua flexibilidade e ao suporte a índices negativos.

Exemplo:

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

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

// Get the last 10 characters
console.log(longText.slice(-10));  // "purposes."

Q5: Como contar a partir do final usando valores negativos?

A:
Embora slice suporte valores negativos, substring trata valores negativos como 0, portanto é preciso ter cautela.

Exemplo:

let str = "JavaScript";

// Extract from the end using slice
console.log(str.slice(-6));  // "Script"

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

Q6: Existem diferenças de desempenho?

A:
Nos navegadores modernos, não há diferenças de desempenho significativas entre slice, substring e substr. Como todos são implementados como funções nativas, recomenda‑se priorizar a legibilidade e a manutenibilidade em vez do desempenho.

7. Resumo e Boas Práticas Recomendadas

Este artigo explicou os métodos de manipulação de strings em JavaScript — substr, substring e slice — desde o uso básico até as principais diferenças, exemplos práticos e estratégias para lidar com métodos obsoletos.

Esta seção resume cada método e destaca as boas práticas recomendadas com base nos padrões modernos de JavaScript.

7.1 Resumo de Cada Método

7.2 Critérios Práticos para Escolher o Método Adequado

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

• Recomendado quando se trabalha com strings curtas e não são necessários valores negativos. Exemplo:

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

2. Escolha slice para máxima flexibilidade:

• Como suporta índices negativos e oferece maior versatilidade, slice é a opção mais recomendada para código moderno. Exemplo:

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

3. Substitua substr o quanto antes:

• Em bases de código legadas, substitua proativamente substr por slice ou substring.

7.3 Boas Práticas Modernas

1. Priorize a legibilidade:

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

2. Elimine métodos obsoletos:

• Como substr pode ser removido em futuras atualizações, migre ativamente para slice ou substring.

3. Use slice quando valores negativos forem necessários:

• slice oferece extração reversa flexível, sendo ideal para muitos casos de uso reais.

7.4 Exemplos de Estilo de Código

Por fim, aqui estão alguns exemplos de manipulação de strings modernos escritos de forma limpa e mantível.

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

// Example: Extracting a 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. Realize uma revisão de código:

• Verifique projetos existentes em busca de uso de substr e substitua por slice ou substring quando apropriado.

2. Aplique as boas práticas em novo código:

• Siga as especificações modernas e projete o código com legibilidade e tratamento de índices negativos em mente.

3. Aproveite comentários e perguntas:

• Incentive perguntas e discussões sobre pontos pouco claros ou casos de uso específicos para compartilhar conhecimento dentro da comunidade.

Conclusão

Este artigo explicou os métodos de string do JavaScript substr, substring e slice usando sintaxe básica, exemplos de uso e tabelas de comparação.

• substr deve ser evitado porque está obsoleto.
• substring é adequado para casos de uso simples.
• slice é o método mais flexível e recomendado.

Use esse conhecimento para escrever código JavaScript eficiente, legível e de fácil manutenção.

8. Links Relacionados e Referências

Para aprofundar ainda mais sua compreensão de substr, substring e slice, esta seção fornece links úteis e materiais de referência. Documentação oficial e recursos de aprendizado ajudarão você a se manter atualizado com as últimas especificações e técnicas avançadas.

8.1 Documentação Oficial

1. MDN Web Docs – JavaScript String Object

• Link: String – MDN Web Docs
• Descrição: Documentação de referência oficial para o objeto String do JavaScript, incluindo especificações detalhadas e exemplos para cada método.

2. ECMAScript Specification (ECMA-262)

• Link: ECMAScript Official Specification
• Descrição: A especificação oficial do ECMAScript detalhando recursos da linguagem JavaScript, incluindo métodos obsoletos e atualizações recentes.

8.2 Sites de Aprendizado e Tutoriais

1. JavaScript.info – String Methods

• Link: JavaScript.info
• Descrição: Explicações abrangentes sobre manipulação de strings, desde o básico até casos de uso avançados, com exemplos práticos.

2. Progate – JavaScript Learning Courses

• Link: Progate
• Descrição: Uma plataforma de aprendizado interativa para iniciantes, cobrindo fundamentos de JavaScript através de codificação prática.

3. Dotinstall – JavaScript Beginner Course

• Link: Dotinstall
• Descrição: Uma plataforma de aprendizado baseada em vídeo que permite compreensão rápida e visual dos conceitos de JavaScript.

8.3 Recursos Práticos de Código de Exemplo

1. GitHub – JavaScript Sample Projects

• Link: GitHub
• Descrição: Aprenda padrões reais de JavaScript e melhores práticas através de projetos de código aberto.

2. CodePen – Interactive Code Playground

• Link: CodePen
• Descrição: Uma plataforma para compartilhar e experimentar código JavaScript em tempo real.

8.4 Livros Recomendados

1. JavaScript: The Definitive Guide, 7th Edition (O’Reilly)

• Visão geral: Uma referência abrangente que cobre fundamentos de JavaScript até os recursos mais recentes da linguagem.

2. Modern JavaScript Development Guide (Revised Edition)

• Visão geral: Um guia prático focado na sintaxe moderna de JavaScript e técnicas de desenvolvimento do mundo real.

8.5 Comunidades e Fóruns

1. Stack Overflow

• Link: Stack Overflow
• Descrição: Uma comunidade global de perguntas e respostas para dúvidas relacionadas à programação e solução de problemas.

2. Qiita

• Link: Qiita
• Descrição: Uma plataforma japonesa de artigos técnicos que apresenta muitos exemplos práticos de JavaScript.

3. Teratail

• Link: Teratail
• Descrição: Um site japonês de perguntas e respostas onde desenvolvedores podem fazer perguntas em japonês.

Resumo

Esta seção apresentou referências oficiais, recursos de aprendizado, repositórios de código de exemplo e comunidades de desenvolvedores relacionadas à manipulação de strings em JavaScript.

Principais Pontos:

1. Verifique as especificações usando a documentação oficial:

• Faça disso um hábito verificar as especificações mais recentes e as diretrizes de uso.

2. Fortaleça habilidades práticas por meio de tutoriais e códigos de exemplo:

• A codificação prática reforça tanto a compreensão teórica quanto a aplicação no mundo real.

3. Compartilhe conhecimento através de comunidades de desenvolvedores:

• Participar de discussões ajuda a expandir sua expertise e rede profissional.