JavaScript substring : la méthode substring() expliquée avec exemples

La méthode JavaScript substring, String.prototype.substring(), retourne la partie d'une chaîne comprise entre un index de début et un index de fin optionnel. La chaîne d'origine n'est jamais modifiée :

const text = 'Hello, world!';

text.substring(0, 5); // 'Hello'
text.substring(7);    // 'world!'

Cela couvre la plupart des usages, mais substring() a quelques particularités qui piègent souvent : elle ignore les index négatifs, elle inverse ses arguments sans prévenir, et on la confond facilement avec slice() et l'ancienne substr(). Ce guide explique précisément son comportement, quand préférer une autre méthode, et détaille des cas d'usage concrets à reprendre dans votre code. Chaque exemple et chaque résultat ci-dessous a été vérifié dans Node.js.

Syntaxe de substring()

str.substring(indexStart)
str.substring(indexStart, indexEnd)

• indexStart : l'index du premier caractère à inclure.
• indexEnd (optionnel) : l'index du premier caractère à exclure. S'il est omis, l'extraction va jusqu'à la fin de la chaîne.
• Valeur de retour : une nouvelle chaîne contenant la partie extraite.

Les index commencent à 0 et l'index de fin est exclu, donc la longueur du résultat est toujours indexEnd - indexStart. Pour récupérer les caractères aux positions 1 et 2 de 'Hello', on écrit 'Hello'.substring(1, 3), qui retourne 'el', une chaîne de longueur 2.

Comment substring() traite ses arguments

substring() ne lève jamais d'erreur à cause de ses arguments. Elle les normalise selon quelques règles :

• Si indexEnd est omis ou vaut undefined, il prend la longueur de la chaîne.
• Si indexStart est égal à indexEnd, le résultat est une chaîne vide.
• Si indexStart est plus grand qu'indexEnd, les deux arguments sont inversés.
• Toute valeur négative ou NaN est traitée comme 0.
• Toute valeur supérieure à la longueur est ramenée à la longueur de la chaîne.
• Les décimales et les chaînes sont converties en entiers (les décimales sont tronquées, pas arrondies).

const word = 'JavaScript';

word.substring(4);        // 'Script'
word.substring(0, 4);     // 'Java'
word.substring(4, 4);     // ''
word.substring(4, 0);     // 'Java'  (arguments inversés en 0, 4)
word.substring(-3);       // 'JavaScript'  (-3 devient 0)
word.substring(-3, 4);    // 'Java'  (-3 devient 0)
word.substring(NaN, 4);   // 'Java'  (NaN devient 0)
word.substring(4, 100);   // 'Script'  (100 devient 10)
word.substring(1.9, 4.2); // 'ava'  (tronqués en 1, 4)
word.substring('4');      // 'Script'  ('4' converti en 4)

Ce comportement tolérant est pratique, mais il masque aussi des bugs. Un index négatif censé compter depuis la fin de la chaîne retourne silencieusement la chaîne entière. Si vous avez besoin d'index négatifs, utilisez slice(), présentée juste après.

substring() vs slice() vs substr()

JavaScript propose trois méthodes pour extraire une partie de chaîne. Elles se ressemblent, mais traitent leurs arguments différemment :

const word = 'JavaScript';

// Index négatifs
word.slice(-6);        // 'Script'
word.substring(-6);    // 'JavaScript'

// Début plus grand que la fin
word.slice(4, 0);      // ''
word.substring(4, 0);  // 'Java'

// Second argument : longueur vs index de fin
word.substr(4, 3);     // 'Scr'
word.substring(4, 3);  // 'a'  (inversés en 3, 4)
word.substr(-6, 3);    // 'Scr'

Choisissez slice() quand vous voulez compter depuis la fin de la chaîne : c'est la seule méthode standard qui comprend les index négatifs. C'est aussi la méthode partagée avec les tableaux, donc slice() se lit de la même façon sur les chaînes et les tableaux. Choisissez substring() quand vos index viennent de calculs qui peuvent arriver dans le désordre ou passer sous zéro, et que vous préférez qu'ils soient bornés plutôt que d'obtenir une chaîne vide.

Pourquoi arrêter d'utiliser substr()

Beaucoup de développeurs tapent js substr dans un moteur de recherche alors qu'ils cherchent substring(), et beaucoup de code ancien appelle encore substr(). Elle fonctionne dans tous les navigateurs et dans Node.js, mais elle ne fait pas partie de la spécification ECMAScript principale. Elle est définie dans l'annexe B, la section réservée aux fonctionnalités héritées conservées pour la compatibilité web, et MDN la marque comme dépréciée. Le nouveau code ne devrait pas l'utiliser.

La remplacer demande un peu d'attention, car la réécriture évidente est fausse pour un début négatif :

const name = 'Mozilla';

name.substr(-3, 3);                // 'lla'
name.slice(-3, -3 + 3);            // ''  (slice(-3, 0), faux)
name.slice(-3).substring(0, 3);    // 'lla'

Voici des remplacements qui se comportent exactement comme l'ancien appel :

// Avant
str.substr(start, length);

// Après, quand start n'est jamais négatif
str.substring(start, start + length);

// Après, pour n'importe quelle valeur de start, négatives comprises
str.slice(start).substring(0, length);

La dernière forme fonctionne parce que slice() gère le début négatif, puis substring(0, length) garde length caractères, et une longueur négative est ramenée à 0, exactement comme avec substr(). Nous l'avons comparée à substr() sur des centaines de combinaisons de début et de longueur (négatives, hors limites, décimales, NaN et undefined) et les deux ont toujours retourné le même résultat.

10 cas d'usage concrets de substring()

Connaître la syntaxe est une chose. Voici comment la méthode JavaScript substring est réellement utilisée dans des projets. La plupart de ces exemples l'associent à indexOf() ou lastIndexOf() pour savoir où couper.

1. Tronquer un texte avec des points de suspension

Les titres de cartes, les aperçus et les notifications ont souvent une longueur maximale. Gardez de la place pour les trois points afin que la chaîne finale ne dépasse jamais la limite :

function truncate(text, maxLength) {
  if (text.length > maxLength) {
    return text.substring(0, maxLength - 3) + '...';
  }
  return text;
}

truncate('Axentix is a CSS framework', 18); // 'Axentix is a CS...'
truncate('Short title', 18);                // 'Short title'

2. Tronquer sans couper les mots

Couper au milieu d'un mot fait négligé. Coupez d'abord, puis revenez au dernier espace :

function truncateWords(text, maxLength) {
  if (text.length > maxLength) {
    const cut = text.substring(0, maxLength);
    const lastSpace = cut.lastIndexOf(' ');
    return (lastSpace > 0 ? cut.substring(0, lastSpace) : cut) + '...';
  }
  return text;
}

truncateWords('Axentix is a CSS framework', 18); // 'Axentix is a CSS...'

3. Récupérer l'extension d'un fichier

Utilisez lastIndexOf() pour gérer les noms qui contiennent plusieurs points, et vérifiez le résultat avant de couper :

function getExtension(filename) {
  const dot = filename.lastIndexOf('.');
  return dot > 0 ? filename.substring(dot + 1) : '';
}

getExtension('report.final.pdf'); // 'pdf'
getExtension('README');           // ''
getExtension('.gitignore');       // ''  (fichier caché, pas d'extension)

La vérification compte. Sans elle, lastIndexOf() retourne -1 pour 'README', et 'README'.substring(-1 + 1) retourne le nom de fichier entier comme s'il s'agissait de l'extension.

4. Découper une adresse email

const email = '[email protected]';
const at = email.indexOf('@');

const username = email.substring(0, at); // 'jane.doe'
const domain = email.substring(at + 1);  // 'example.com'

5. Masquer des données sensibles

N'afficher que les quatre derniers chiffres d'un numéro de carte ou de compte :

function maskCard(number) {
  const last4 = number.substring(number.length - 4);
  return '*'.repeat(number.length - 4) + last4;
}

maskCard('4242424242424242'); // '************4242'

6. Extraire le texte entre deux délimiteurs

Extraire un identifiant entre crochets, une valeur dans une balise ou un token dans une ligne de log suit toujours le même principe :

function between(text, start, end) {
  const from = text.indexOf(start);
  if (from === -1) return '';

  const to = text.indexOf(end, from + start.length);
  if (to === -1) return '';

  return text.substring(from + start.length, to);
}

between('Order [A-1042] shipped', '[', ']'); // 'A-1042'
between('No brackets here', '[', ']');       // ''

Passer from + start.length en second argument d'indexOf() fait démarrer la recherche après le délimiteur ouvrant, ce qui est indispensable quand les deux délimiteurs sont identiques, comme des guillemets.

7. Mettre la première lettre en majuscule

const capitalize = (str) => str.charAt(0).toUpperCase() + str.substring(1);

capitalize('axentix'); // 'Axentix'
capitalize('');        // ''

Utiliser charAt(0) plutôt que str[0] protège les chaînes vides : ''.charAt(0) retourne '', alors que ''[0] vaut undefined et appeler toUpperCase() dessus lève une erreur.

8. Parser des chaînes à format fixe

Quand un format a des positions fixes, comme les dates ISO, les codes produit ou les références bancaires, substring() lit chaque champ directement :

const date = '2026-10-28';

const year = date.substring(0, 4);  // '2026'
const month = date.substring(5, 7); // '10'
const day = date.substring(8);      // '28'

9. Supprimer un caractère final

const url = 'https://example.com/docs/';

const clean = url.endsWith('/') ? url.substring(0, url.length - 1) : url;
// 'https://example.com/docs'

10. Récupérer les N derniers caractères

substring(str.length - n) et slice(-n) fonctionnent tous les deux, mais ils divergent quand n vaut 0 :

const code = 'AX-2026-0042';

code.substring(code.length - 4); // '0042'
code.slice(-4);                  // '0042'

// Quand n vaut 0
code.substring(code.length - 0); // ''
code.slice(-0);                  // 'AX-2026-0042'  (-0 vaut 0, donc slice part du début)

Si n vient d'une saisie utilisateur ou d'un calcul qui peut atteindre 0, substring() donne le résultat attendu.

Erreurs courantes

S'attendre à ce que la chaîne d'origine change

Les chaînes sont immuables en JavaScript. substring() retourne une nouvelle chaîne et ne touche pas à l'originale, il faut donc stocker le résultat :

let greeting = 'Hello world';

greeting.substring(0, 5);
console.log(greeting); // 'Hello world'

greeting = greeting.substring(0, 5);
console.log(greeting); // 'Hello'

Passer une longueur en second argument

C'est l'erreur classique en venant de substr(). Le second argument est un index de fin, pas une longueur. 'JavaScript'.substring(4, 3) ne retourne pas 3 caractères à partir de l'index 4 : elle inverse les arguments et retourne 'a'. Pour prendre n caractères à partir de start, écrivez substring(start, start + n).

Couper un emoji en deux

substring() compte des unités de code UTF-16, pas des caractères visibles. Les emojis et de nombreux autres symboles utilisent deux unités de code, un index peut donc tomber au milieu de l'un d'eux :

const msg = 'Hi 👋!';

msg.length;          // 6, pas 5
msg.substring(0, 4); // 'Hi \uD83D'  (un demi-emoji, affiché comme �)

Array.from(msg).slice(0, 4).join(''); // 'Hi 👋'

Array.from() découpe une chaîne par point de code, ce qui règle le cas de la plupart des emojis. Les emojis composés de plusieurs points de code, comme les emojis famille ou drapeau, nécessitent Intl.Segmenter, qui découpe une chaîne selon les caractères réellement vus par l'utilisateur :

const family = '👨‍👩‍👧 family';

Array.from(family)[0]; // '👨'  (seulement la première personne)

const graphemes = [...new Intl.Segmenter().segment(family)].map((s) => s.segment);
graphemes[0];          // '👨‍👩‍👧'

Appeler substring() sur undefined ou null

Si une valeur peut être absente, comme un champ optionnel d'API, appeler substring() dessus lève TypeError: Cannot read properties of undefined (reading 'substring'). Le chaînage optionnel retourne undefined à la place :

const user = { name: undefined };

user.name?.substring(0, 3);              // undefined
(user.name ?? 'Guest').substring(0, 3); // 'Gue'

Compatibilité navigateurs

substring() fait partie de JavaScript depuis la première édition d'ECMAScript et fonctionne dans tous les navigateurs et toutes les versions de Node.js. slice() est tout aussi bien supportée. substr() fonctionne aussi partout, mais uniquement parce que les navigateurs la conservent pour la rétrocompatibilité. Intl.Segmenter est plus récent et disponible dans les versions actuelles de tous les grands navigateurs et dans Node.js.

Questions fréquentes

L'index de fin est-il inclus dans substring() ?

Non. Le caractère à indexStart est inclus et le caractère à indexEnd est exclu. 'Hello'.substring(1, 3) retourne 'el'.

substring() modifie-t-elle la chaîne d'origine ?

Non. Les chaînes ne peuvent pas être modifiées sur place en JavaScript. substring() retourne toujours une nouvelle chaîne.

substring() accepte-t-elle les index négatifs ?

Elle les accepte mais les traite comme 0, donc 'JavaScript'.substring(-6) retourne la chaîne entière. Utilisez slice(-6) pour compter depuis la fin.

js substr est-elle dépréciée ?

Oui. substr() n'est définie que dans l'annexe B de la spécification ECMAScript pour la compatibilité héritée, et MDN la marque comme dépréciée. Elle fonctionne encore, mais utilisez substring() ou slice() dans le nouveau code. Le remplacement str.slice(start).substring(0, length) se comporte exactement comme str.substr(start, length).

Que retourne substring() sans argument ?

Une copie de la chaîne entière. indexStart devient 0 et indexEnd prend la longueur de la chaîne, donc 'abc'.substring() retourne 'abc'.

Conclusion

La méthode JavaScript substring extrait les caractères compris entre un index de début et un index de fin exclu. Elle borne les valeurs négatives et hors limites, inverse les arguments donnés dans le désordre et ne modifie jamais la chaîne d'origine. Préférez slice() quand vous devez compter depuis la fin, et remplacez chaque appel js substr restant par substring() ou slice() la prochaine fois que vous touchez ce code.

Associée à indexOf() et lastIndexOf(), substring() couvre l'essentiel du travail quotidien sur les chaînes : tronquer des titres, lire des extensions de fichiers, masquer des données et parser des formats fixes. Pour tous les détails de la spécification, consultez la référence MDN de substring(). Pour continuer avec les chaînes, lisez nos guides pour concaténer des chaînes en JavaScript et corriger l'erreur "replaceAll is not a function".