Chargement...

Méthodes des chaînes

Vous savez déjà écrire une chaîne. Ici, place aux méthodes : des outils appelés sur le texte pour changer la casse, découper un morceau, nettoyer les espaces, remplacer un mot ou demander « cette phrase est-elle dedans ? ». Pas besoin d’apprendre toutes les méthodes du langage — commencez par un petit jeu utile.

Comment fonctionnent les méthodes des chaînes en JavaScript ?

Une méthode de chaîne s’appelle avec un point, un nom et des parenthèses : "hi".toUpperCase(). La plupart renvoient une nouvelle chaîne. L’original ne change que si vous stockez le résultat (let clean = raw.trim()). Pour démarrer : toUpperCase / toLowerCase, slice, trim, replace (première occurrence), includes (oui/non) et indexOf (position ou -1).

Boîte à outils des méthodes

📊 Méthodes de texte que le débutant utilise d’abord

Idée Exemple Résultat / note
Majuscules "hi".toUpperCase() "HI"
slice "JavaScript".slice(0, 4) "Java" (l’index de fin est exclu)
trim " hi ".trim() "hi"
replace "a-a".replace("-", "/") "a/a" (première occurrence seulement)
includes "hello".includes("ell") true
indexOf "hello".indexOf("l") 2 (premier index ; absent = -1)

Changer la casse

toUpperCase() et toLowerCase() construisent une nouvelle chaîne avec des lettres uniformes — pratique avant de comparer une saisie.

Majuscules et minuscules

javascript 
let city = "Tehran";
console.log(city.toUpperCase());
console.log(city.toLowerCase());
console.log(city);

Découper avec slice

slice(start, end) copie depuis start jusqu’avant end. Sans end, on va jusqu’au dernier caractère. Les index commencent à 0.

Découper une chaîne avec slice

javascript 
let word = "JavaScript";
console.log(word.slice(0, 4));
console.log(word.slice(4));
console.log(word);

Nettoyer les espaces des bords avec trim

La saisie utilisateur a souvent des espaces au début ou à la fin. trim() les enlève ; ceux du milieu restent.

Nettoyer les espaces avec trim

javascript 
let raw = "  hello  ";
let clean = raw.trim();
console.log(raw.length);
console.log(clean.length);
console.log(clean);

Remplacer du texte avec replace

replace(old, new) remplace la première occurrence de old par new. Le reste ne bouge pas. (Tout remplacer vient plus tard.)

Remplacer la première occurrence

javascript 
let line = "red-blue-red";
console.log(line.replace("-", "/"));
console.log(line);

Chercher avec includes et indexOf

includes(piece) répond oui/non (true / false). indexOf(piece) renvoie l’index de la première occurrence, ou -1 si elle manque.

includes et indexOf

javascript 
let msg = "Welcome guest";
console.log(msg.includes("guest"));
console.log(msg.includes("admin"));
console.log(msg.indexOf("come"));
console.log(msg.indexOf("x"));

Titre propre sur la page

Faites un trim, unifiez la casse, puis affichez avec textContent.

La page affiche un titre nettoyé

html 
<!DOCTYPE html>
<html>
<head>
<title>String methods — clean title</title>
</head>
<body>
<p id="out">…</p>
<script>
let raw = "  javaScript methods  ";
let title = raw.trim().toUpperCase();
document.getElementById("out").textContent = title;
</script>
</body>
</html>

Le paragraphe montre le titre nettoyé. Changez seulement raw, rechargez, et vérifiez trim + majuscules.

À vous de jouer

  1. Affichez "Tehran".toUpperCase() et "Tehran".toLowerCase() ; si vous stockez d’abord, regardez aussi l’original.
  2. Sur "JavaScript", slice les quatre premiers caractères, puis depuis l’index 4 jusqu’à la fin.
  3. Trimmez " hi " et comparez .length avant/après.
  4. Sur "a-b-c", remplacez le premier "-" par "/" ; journalisez résultat et original.
  5. Sur une courte phrase, testez includes pour un mot présent et un absent ; journalisez indexOf d’une lettre.
  6. Dans la démo HTML, changez seulement raw, rechargez, lisez le nouveau titre.

Erreurs fréquentes

  • Écrire toUpperCase sans () — il faut l’appel : .toUpperCase()
  • Croire que "hi".toUpperCase() modifie l’original — une nouvelle valeur est renvoyée ; assignez-la si besoin
  • Penser que slice(0, 4) inclut l’index 4 — la fin est exclue
  • Supposer que replace change toutes les occurrences — par défaut seulement la première
  • N’utiliser que indexOf pour un oui/non clair — includes se lit mieux

Résumé

  • Appelez les méthodes avec . + nom + ()
  • toUpperCase / toLowerCase changent la casse ; slice découpe ; trim nettoie les bords
  • replace remplace la première occurrence ; includes / indexOf cherchent dans la chaîne
  • Elles renvoient souvent une valeur nouvelle — stockez-la pour la garder
  • Ensuite : les booléens — true et false pour les décisions oui/non

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
8
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 11 de 16
Javascript Tutoriel