Méthodes de chaîne JavaScript expliquées : substr vs substring vs slice (Bonnes pratiques et utilisation moderne)

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

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

1. Introduction

JavaScript est un langage de programmation essentiel dans le développement web. En particulier, la manipulation de chaînes de caractères est fréquemment utilisée pour formater des données, analyser et mettre à jour dynamiquement l’interface utilisateur.
Dans cet article, nous expliquerons en détail trois méthodes de chaîne JavaScript couramment utilisées — substr, substring et slice —. Étant donné que ces méthodes offrent des fonctionnalités similaires, comprendre leurs différences vous aidera à choisir la bonne selon chaque situation.
Nous aborderons également pourquoi substr a été dépréciée et proposerons des approches alternatives, offrant des conseils pratiques pour écrire du JavaScript en suivant les meilleures pratiques modernes.

2. Informations de base et utilisation de chaque méthode

Cette section explique la syntaxe de base et l’utilisation de substr, substring et slice. Comprendre ces méthodes vous aidera à choisir celle qui convient et à améliorer la lisibilité et la maintenabilité du code.

2.1 Méthode substr

Syntaxe :

string.substr(start, length)

Description :

• start : Spécifie l’indice de départ pour l’extraction (index 0).
• length : Spécifie le nombre de caractères à extraire. Si omis, l’extraction se poursuit jusqu’à la fin de la chaîne.

Exemple d’utilisation :

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

Remarque :
La méthode substr est dépréciée, et il est recommandé de ne plus l’utiliser dans le code futur. Utilisez slice ou substring à la place.

Exemple alternatif (en utilisant slice) :

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

2.2 Méthode substring

Syntaxe :

string.substring(start, end)

Description :

• start : Indice de départ de l’extraction.
• end : Indice de fin (le caractère à cet indice n’est pas inclus).

Exemple d’utilisation :

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

Points :

1. L’ordre des arguments est automatiquement corrigé : Si vous appelez substring(10, 4), il sera traité comme substring(4, 10).
2. Les valeurs négatives sont ignorées : Tout argument négatif est traité comme 0.

Exemple alternatif lorsque des valeurs négatives sont nécessaires (en utilisant slice) :

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

2.3 Méthode slice

Syntaxe :

string.slice(start, end)

Description :

• start : Indice de départ de l’extraction.
• end : Indice de fin (le caractère à cet indice n’est pas inclus).

Exemple d’utilisation :

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

Points :

1. Prend en charge les valeurs négatives : Les indices négatifs comptent à partir de la fin de la chaîne.
2. Fonctionne à la fois pour les chaînes et les tableaux : Il peut également extraire des éléments de tableaux, ce qui le rend très polyvalent.

3. Tableau comparatif de chaque méthode

Choisir la bonne méthode selon le cas d’utilisation :

• Extraction de courts segments : → slice
• Lorsque des valeurs négatives sont nécessaires : → slice
• Compatibilité avec le code hérité : → Éviter substr ; migrer si nécessaire

4. Exemples de code pratiques

Manipulation de chaîne de base

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"

Extraction de valeurs selon un motif

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

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

5. Comment gérer les méthodes dépréciées

La méthode substr de JavaScript est dépréciée. Cela est dû au fait que substr a été classée comme méthode non recommandée dans les dernières spécifications ECMAScript.
Cette section explique les problèmes liés à substr, les méthodes alternatives, et comment migrer votre code.

5.1 Pourquoi substr est-il obsolète ?

1. Mauvaise lisibilité :

• substr utilise le deuxième argument comme le « nombre de caractères à extraire »,
  ce qui diffère des autres méthodes qui utilisent un indice de fin.
  Cette incohérence rend le code plus difficile à comprendre.

1. Risques potentiels de compatibilité future en raison de changements de spécification :

• Les anciennes fonctionnalités sont dépréciées lors de la standardisation d’ECMAScript.
  Le nouveau code ne devrait pas s’y fier.

1. Pas de prise en charge des valeurs négatives :

• substr ne prend pas en charge les indices négatifs, alors que slice le fait.

5.2 Comment migrer vers des méthodes modernes

Cas 1 : Extraction d’une sous‑chaîne de longueur fixe

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

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

Cas 2 : Extraction de la fin d’une chaîne

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

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

Cas 3 : Extraction d’une partie d’une URL ou d’un nom de fichier

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 Points de refactorisation pour le code hérité

1. Effectuer un scan du code :

• Utilisez des outils comme ESLint pour détecter où substr est utilisé.

1. Renforcer la couverture des tests :

• Utilisez des tests unitaires pour garantir que le comportement reste correct après le remplacement des méthodes.

1. Migrer progressivement :

• Priorisez le remplacement dans les sections importantes ou fréquemment exécutées.

5.4 Avantages de la migration loin de substr

1. Lisibilité et maintenabilité améliorées :

• L’intention du code devient plus claire, améliorant la compréhension de l’équipe.

1. Compatibilité avec les normes modernes :

• Suivre les normes ECMAScript assure une stabilité à long terme.

1. Prise en charge flexible des valeurs négatives :

• slice permet une extraction concise depuis les positions de début et de fin.

6. Questions fréquemment posées (FAQ)

Cette section résume les questions courantes et leurs réponses concernant les méthodes de manipulation de chaînes en JavaScript.

Q1 : Puis-je encore utiliser substr ?

R :
Oui, la plupart des navigateurs modernes supportent encore substr.
Cependant, comme ECMAScript le marque comme obsolète, il devrait être évité dans les nouveaux projets ou les bases de code nécessitant une compatibilité future.
Alternative recommandée :

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

Q2 : Quelle est la différence entre slice et substring ?

R :
Le tableau ci-dessous résume leurs différences :

Exemples :

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 : Quels sont les risques de continuer à utiliser des méthodes obsolètes ?

R :

1. Suppression potentielle du support navigateur : substr pourrait éventuellement ne plus être supporté.
2. Coûts de maintenance accrus : Le débogage des fonctionnalités obsolètes prend du temps supplémentaire.
3. Qualité de code réduite : Ne pas suivre les normes modernes diminue la lisibilité.

Q4 : Quelle méthode est la meilleure pour les longues chaînes ?

R :
slice est la meilleure car elle prend en charge les indices négatifs et offre une grande flexibilité.
Exemple :

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 : Comment compter à rebours en utilisant des valeurs négatives ?

R :
Utilisez slice, car substring considère les valeurs négatives comme 0.
Exemple :

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 : Y a-t-il des différences de performance ?

R : Les navigateurs modernes ne montrent pas de différences de performance majeures entre slice, substring ou substr. Puisque toutes sont des fonctions natives, priorisez la lisibilité et la maintenabilité par rapport aux micro-optimisations.

7. Résumé et Meilleures Pratiques Recommandées

Dans cet article, nous avons exploré les méthodes de chaînes JavaScript substr, substring et slice, couvrant leur syntaxe de base, leurs différences, des exemples de code pratiques et des stratégies de migration pour les méthodes dépréciées. Cette section réorganise les caractéristiques clés de chaque méthode et présente les meilleures pratiques modernes recommandées.

7.1 Résumé de Chaque Méthode

7.2 Critères de Sélection Pratiques

1. Utilisez substring pour l’extraction de plage simple :

• Meilleur quand les valeurs négatives ne sont pas nécessaires. Exemple :

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

2. Utilisez slice pour une flexibilité maximale :

• Prend en charge les indices négatifs et est la méthode préférée pour le nouveau code. Exemple :

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

3. Remplacez substr dès que possible :

• Migrez vers slice ou substring lors de la maintenance du code legacy.

7.3 Meilleures Pratiques Modernes

1. Écrivez du code en gardant la lisibilité à l’esprit :

• Un code clair et concis améliore la maintenabilité à long terme.

1. Évitez les méthodes dépréciées :

• substr pourrait perdre le support des navigateurs dans les futures mises à jour — migrez tôt.

1. Utilisez slice lors du travail avec des valeurs négatives :

• slice est la seule méthode qui gère correctement les indices négatifs.

1. Utilisez ESLint et les suites de tests pour maintenir la qualité du code :

• L’analyse statique aide à détecter les méthodes dépréciées et à imposer des styles de codage modernes.

7.4 Exemple d’un Style de Codage Moderne

// 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 Plan d’Action pour les Lecteurs

1. Examinez votre code existant :

• Vérifiez si substr est utilisé dans votre projet et remplacez-le si nécessaire.

1. Suivez les meilleures pratiques dans le nouveau code :

• Utilisez des patterns modernes et flexibles et évitez les fonctionnalités dépréciées.

1. Tirez parti des commentaires et des questions de la communauté :

• Partagez des questions ou des cas d’utilisation pour aider les autres à apprendre tout en renforçant votre compréhension.

Conclusion

Cet article a fourni une explication approfondie des méthodes substr, substring et slice de JavaScript, incluant la syntaxe, des exemples, des tableaux de comparaison et des stratégies de migration.

• Évitez substr car elle est dépréciée.
• Utilisez substring pour les scénarios simples.
• Utilisez slice pour une flexibilité maximale et les meilleures pratiques modernes.

Utilisez ces insights pour écrire du code JavaScript efficace et maintenable.

8. Liens et Références Connexes

Pour approfondir votre compréhension de substr, substring et slice, voici des liens et références utiles. La documentation officielle et les ressources d’apprentissage vous aideront à rester à jour avec les dernières mises à jour et techniques JavaScript.

8.1 Documentation Officielle

1. MDN Web Docs – Objet String JavaScript

• Lien : String – MDN Web Docs
• Aperçu : Une référence complète pour l’objet String de JavaScript avec des spécifications détaillées et des exemples.

1. Spécification ECMAScript (ECMA-262)

• Lien : Spécification officielle ECMAScript
• Aperçu : La spécification officielle du langage couvrant les dernières fonctionnalités ECMAScript, les méthodes obsolètes et les détails techniques.

8.2 Sites d’apprentissage et tutoriels

1. JavaScript.info – Guide de manipulation des chaînes

• Lien : JavaScript.info
• Aperçu : Un guide complet couvrant les opérations de chaînes de base et avancées avec des exemples pratiques.

1. Progate – Cours JavaScript du niveau débutant à intermédiaire

• Lien : Progate
• Aperçu : Une plateforme interactive idéale pour les débutants apprenant à travers des exercices de codage pratiques.

1. DotInstall – Leçons d’introduction à JavaScript

• Lien : DotInstall
• Aperçu : Courtes leçons vidéo qui facilitent l’apprentissage visuel et rapide de JavaScript.

8.3 Ressources de code d’exemple pratiques

1. GitHub – Projets d’exemple JavaScript

• Lien : GitHub
• Aperçu : Apprenez les meilleures pratiques et les modèles réels en explorant des projets open source.

1. CodePen – Partage de code interactif

• Lien : CodePen
• Aperçu : Partagez et testez votre code avec d’autres développeurs ou parcourez des exemples pour vous inspirer.

8.4 Livres recommandés

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

• Aperçu : Une référence complète et autoritaire couvrant JavaScript des fondamentaux aux fonctionnalités avancées.

1. Mastering Modern JavaScript – Revised Edition

• Aperçu : Une référence pratique axée sur le JavaScript moderne et les normes de codage à jour.

8.5 Communautés et forums

1. Stack Overflow (japonais)

• Lien : Stack Overflow
• Aperçu : Une communauté de questions‑réponses où vous pouvez résoudre efficacement les problèmes JavaScript.

1. Qiita

• Lien : Qiita
• Aperçu : Une plateforme japonaise riche en articles pratiques et études de cas JavaScript.

1. Teratail

• Lien : Teratail
• Aperçu : Un site de questions‑réponses japonais idéal pour poser des questions techniques dans votre langue maternelle.

Conclusion

Cette section a présenté un large éventail de ressources — des références officielles aux tutoriels, dépôts de code d’exemple et plateformes communautaires — pour soutenir l’apprentissage continu des opérations sur les chaînes en JavaScript.
Points clés :

1. Consultez régulièrement la documentation officielle :

• Assurez‑vous que votre style de codage reste aligné avec les dernières normes.

1. Renforcez vos compétences par la pratique du codage :

• La pratique rend les concepts plus clairs et améliore leur application concrète.

1. Impliquez‑vous dans la communauté :

• Partager des questions et des solutions aide à approfondir la compréhension et à élargir votre réseau.