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

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

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

1. Introduction

JavaScript est un langage de programmation essentiel dans le développement web moderne. En particulier, la manipulation de chaînes de caractères est fréquemment utilisée pour le formatage des données, l’analyse et les mises à jour dynamiques de l’interface utilisateur.

Cet article fournit une explication détaillée de trois méthodes de chaîne JavaScript couramment utilisées — substr, substring et slice. Puisque ces méthodes ont des fonctionnalités similaires, comprendre leurs différences vous aidera à choisir la plus appropriée pour chaque situation.

Nous aborderons également les raisons pour lesquelles substr a été déprécié, présenterons les alternatives recommandées et donnerons des conseils pratiques pour aligner votre code avec les meilleures pratiques modernes de JavaScript.

2. Vue d’ensemble et utilisation de chaque méthode

Cette section explique en détail la syntaxe de base et l’utilisation de substr, substring et slice. En comprenant chaque méthode, vous pourrez sélectionner celle qui convient et améliorer à la fois la lisibilité et la maintenabilité du code.

2.1 Méthode substr

Syntaxe :

string.substr(start, length)

Description :

• start : indique la position de départ (indice) pour l’extraction. L’indexation commence à 0.
• length : indique le nombre de caractères à extraire. Si omis, les caractères sont extraits de la position de départ jusqu’à la fin de la chaîne.

Exemple :

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

Remarques importantes :
La méthode substr est dépréciée, et son utilisation est découragée dans le développement JavaScript moderne. Utilisez plutôt slice ou substring comme alternatives.

Exemple alternatif (avec 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 : indique la position de départ pour l’extraction.
• end : indique la position de fin (le caractère à cet indice n’est pas inclus).

Exemple :

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

Points clés :

1. L’ordre des arguments est automatiquement ajusté : si substring(10, 4) est spécifié, il est automatiquement interprété comme substring(4, 10).
2. Les valeurs négatives sont ignorées : si une valeur négative est fournie, elle est traitée comme 0.

Alternative lorsque des valeurs négatives sont nécessaires (avec slice) :

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

2.3 Méthode slice

Syntaxe :

string.slice(start, end)

Description :

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

Exemple :

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

Points clés :

1. Prise en charge des valeurs négatives : les valeurs négatives sont interprétées comme des décalages depuis la fin de la chaîne.
2. Applicable aux chaînes et aux tableaux : comme slice peut également être utilisé avec des tableaux, c’est une méthode très polyvalente.

3. Tableau comparatif de chaque méthode

Comment choisir selon le cas d’utilisation :

• Extraction d’une petite portion d’une chaîne : → slice
• Lorsque des index négatifs sont nécessaires : → slice
• Compatibilité avec du code hérité : → Évitez substr et migrez vers des alternatives modernes

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 d’une valeur à partir d’un motif spécifique

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

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

5. Gestion des méthodes obsolètes

En JavaScript, la méthode substr est considérée comme obsolète. Cela s’explique par le fait qu’elle a été officiellement classée comme une approche non recommandée dans les dernières spécifications ECMAScript. Cette section explique les problèmes liés à substr, les alternatives disponibles et les stratégies de migration pratiques.

5.1 Pourquoi substr est‑elle obsolète ?

1. Lisibilité réduite :

• La méthode substr indique le nombre de caractères à extraire comme second argument, ce qui diffère des autres méthodes qui utilisent les positions de début et de fin. Cette incohérence rend le code plus difficile à comprendre d’un seul coup d’œil.

2. Risques futurs de compatibilité dus à des changements de spécification :

• Au cours du processus de normalisation ECMAScript, les fonctionnalités anciennes peuvent être marquées comme obsolètes. En conséquence, il faut éviter substr dans le nouveau code afin d’assurer une compatibilité à long terme.

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

• Alors que substr ne supporte pas les valeurs négatives, slice accepte pleinement les index négatifs, permettant une extraction de chaîne plus flexible.

5.2 Comment migrer vers des méthodes alternatives

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

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

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

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

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

// Recommended code (slice)
console.log(str.slice(-6)); // Output: "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); // Output: "index.html"

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

5.3 Conseils de refactorisation pour le code hérité

1. Exécuter une analyse du code :

• Utilisez des outils tels qu’ESLint pour détecter les occurrences de substr dans votre base de code.

2. Améliorer la couverture des tests :

• Utilisez des tests unitaires pour vérifier le comportement après refactorisation et vous assurer que les changements n’introduisent pas de régressions.

3. Migrer progressivement :

• Priorisez les sections critiques de votre base de code et remplacez les méthodes obsolètes étape par étape.

5.4 Avantages de la migration loin de substr

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

• L’intention du code devient plus claire, facilitant la collaboration et la maintenance à long terme.

2. Alignement avec les spécifications modernes :

• Se conformer à la norme ECMAScript garantit des mises à jour futures plus fluides et une meilleure compatibilité.

3. Gestion flexible des valeurs négatives :

• L’utilisation de slice permet une extraction aisée tant du début que de la fin des chaînes, ce qui donne un code plus propre et plus concis.

6. Foire aux questions (FAQ)

Cette section résume les questions courantes et leurs réponses concernant les méthodes de manipulation de chaînes en JavaScript, aidant les lecteurs à résoudre rapidement les doutes typiques.

Q1 : substr est‑elle encore utilisable ?

R :
Oui, substr fonctionne encore dans la plupart des navigateurs modernes. Cependant, comme elle est obsolète dans la spécification ECMAScript, il faut l’éviter dans les nouveaux projets ou lorsqu’on envisage une compatibilité à long terme.

Alternative recommandée :

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

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

R :
Le tableau ci‑dessous résume les principales différences entre slice et substring.

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 :
Continuer à utiliser des méthodes obsolètes peut entraîner les risques suivants.

1. Fin du support navigateur : À l’avenir, substr pourrait ne plus être pris en charge par les navigateurs.
2. Coûts de maintenance accrus : Corriger les bugs ou les avertissements causés par des méthodes obsolètes peut ajouter une surcharge inutile.
3. Qualité du code diminuée : Ne pas se conformer aux spécifications modernes réduit la lisibilité et la maintenabilité.

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

R :
Lorsqu’on travaille avec de longues chaînes, slice est le meilleur choix grâce à sa flexibilité et à la prise en charge des index négatifs.

Exemple :

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 : Comment compter depuis la fin en utilisant des valeurs négatives ?

R :
Alors que slice accepte les valeurs négatives, substring les traite comme 0, il faut donc faire preuve de prudence.

Exemple :

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

R :
Dans les navigateurs modernes, il n’y a pas de différences de performance significatives entre slice, substring et substr. Puisqu’ils sont tous implémentés comme fonctions natives, il est recommandé de privilégier la lisibilité et la maintenabilité plutôt que la performance.

7. Résumé et bonnes pratiques recommandées

Cet article a expliqué les méthodes de manipulation de chaînes JavaScript — substr, substring et slice — depuis leur utilisation de base jusqu’aux différences clés, aux exemples pratiques et aux stratégies pour gérer les méthodes obsolètes.

Cette section résume chaque méthode et met en avant les bonnes pratiques recommandées selon les standards modernes de JavaScript.

7.1 Résumé de chaque méthode

7.2 Critères pratiques pour choisir la bonne méthode

1. Utilisez substring pour une extraction simple de plage :

• Recommandé lorsqu’on travaille avec de courtes chaînes et que les valeurs négatives ne sont pas nécessaires. Exemple :

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

2. Choisissez slice pour une flexibilité maximale :

• Comme il prend en charge les index négatifs et offre une plus grande polyvalence, slice est l’option la plus recommandée pour le code moderne. Exemple :

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

3. Remplacez substr le plus tôt possible :

• Dans les bases de code héritées, remplacez de façon proactive substr par slice ou substring.

7.3 Bonnes pratiques modernes

1. Priorisez la lisibilité :

• Écrire du code clair et concis améliore la maintenabilité à long terme.

2. Éliminez les méthodes obsolètes :

• Puisque substr pourrait être supprimé dans de futures mises à jour, migrez activement vers slice ou substring.

3. Utilisez slice lorsque des valeurs négatives sont requises :

• slice offre une extraction flexible en arrière, ce qui le rend idéal pour de nombreux cas d’usage réels.

7.4 Exemples de style de codage

Enfin, voici quelques exemples de manipulation de chaînes modernes écrits dans un style de code propre et maintenable.

// 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 Plan d’action pour les lecteurs

1. Effectuez une revue de code :

• Vérifiez les projets existants pour la présence de substr et remplacez‑le par slice ou substring le cas échéant.

2. Appliquez les bonnes pratiques dans le nouveau code :

• Suivez les spécifications modernes et concevez le code en pensant à la lisibilité et à la gestion des index négatifs.

3. Exploitez les commentaires et les questions :

• Encouragez les questions et les discussions sur les points peu clairs ou les cas d’utilisation spécifiques afin de partager les connaissances au sein de la communauté.

Conclusion

Cet article a expliqué les méthodes de chaîne JavaScript substr, substring et slice en utilisant la syntaxe de base, des exemples d’utilisation et des tableaux de comparaison.

• substr doit être évité car il est obsolète.
• substring convient aux cas d’utilisation simples.
• slice est la méthode la plus flexible et recommandée.

Utilisez ces connaissances pour écrire du code JavaScript efficace, lisible et maintenable.

8. Liens et références associés

Pour approfondir davantage votre compréhension de substr, substring et slice, cette section fournit des liens utiles et des documents de référence. La documentation officielle et les ressources d’apprentissage vous aideront à rester à jour avec les dernières spécifications et techniques avancées.

8.1 Documentation officielle

1. MDN Web Docs – Objet String JavaScript

• Lien : String – MDN Web Docs
• Description : Documentation de référence officielle pour l’objet String de JavaScript, incluant des spécifications détaillées et des exemples pour chaque méthode.

2. Spécification ECMAScript (ECMA-262)

• Lien : Spécification officielle ECMAScript
• Description : La spécification officielle ECMAScript détaillant les fonctionnalités du langage JavaScript, y compris les méthodes obsolètes et les mises à jour récentes.

8.2 Sites d’apprentissage et tutoriels

1. JavaScript.info – Méthodes de chaîne

• Lien : JavaScript.info
• Description : Explications complètes de la manipulation de chaînes, des bases aux cas d’utilisation avancés, avec des exemples pratiques.

2. Progate – Cours d’apprentissage JavaScript

• Lien : Progate
• Description : Une plateforme d’apprentissage interactive pour les débutants, couvrant les fondamentaux de JavaScript à travers du codage pratique.

3. Dotinstall – Cours débutant JavaScript

• Lien : Dotinstall
• Description : Une plateforme d’apprentissage basée sur la vidéo qui permet une compréhension rapide et visuelle des concepts JavaScript.

8.3 Ressources de code d’exemple pratiques

1. GitHub – Projets d’exemple JavaScript

• Lien : GitHub
• Description : Apprenez les modèles JavaScript du monde réel et les meilleures pratiques grâce à des projets open‑source.

2. CodePen – Terrain de jeu de code interactif

• Lien : CodePen
• Description : Une plateforme pour partager et expérimenter du code JavaScript en temps réel.

8.4 Livres recommandés

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

• Aperçu : Une référence complète couvrant les fondamentaux de JavaScript jusqu’aux dernières fonctionnalités du langage.

2. Modern JavaScript Development Guide (Revised Edition)

• Aperçu : Un guide pratique axé sur la syntaxe moderne de JavaScript et les techniques de développement du monde réel.

8.5 Communautés et forums

1. Stack Overflow

• Lien : Stack Overflow
• Description : Une communauté mondiale de questions‑réponses pour les questions liées à la programmation et le dépannage.

2. Qiita

• Lien : Qiita
• Description : Une plateforme d’articles techniques japonaise présentant de nombreux exemples pratiques de JavaScript.

3. Teratail

• Lien : Teratail
• Description : Un site de questions‑réponses japonais où les développeurs peuvent poser des questions en japonais.

Résumé

Cette section a présenté les références officielles, les ressources d’apprentissage, les dépôts de code d’exemple et les communautés de développeurs liées à la manipulation des chaînes JavaScript.

Points clés :

1. Vérifiez les spécifications à l’aide de la documentation officielle :

• Prenez l’habitude de vérifier les dernières spécifications et les directives d’utilisation.

2. Renforcez les compétences pratiques grâce aux tutoriels et aux exemples de code :

• Le codage pratique renforce à la fois la compréhension théorique et l’application concrète.

3. Partagez vos connaissances au sein des communautés de développeurs :

• Participer aux discussions aide à élargir votre expertise et votre réseau professionnel.