Chargement...

Chaînes de caractères

Vous savez déjà qu’une valeur peut être une string. Cette leçon reste sur le texte : l’écrire entre guillemets, compter les caractères, coller des morceaux, mettre un guillemet à l’intérieur, et afficher un message sur la page. Des outils comme slice et toUpperCase viennent ensuite.

Comment fonctionnent les chaînes en JavaScript ?

Une chaîne est du texte que le moteur traite comme une seule valeur. On l’écrit avec des guillemets simples, doubles ou des backticks (`). "Bonjour" et 'Bonjour' sont des chaînes ; 42 sans guillemets est un nombre. La propriété length donne le nombre de caractères (les espaces comptent). Collez avec +, ou construisez une ligne avec un template literal et ${…}. Un antislash (\) permet le même guillemet à l’intérieur. Pour l’affichage utilisateur, utilisez textContent.

Boîte à outils des chaînes

📊 Outils texte que le débutant utilise d’abord

Idée Exemple Résultat / note
Guillemets doubles let s = "Hi"; Type string
Guillemets simples let s = 'Hi'; Même type string
length "Hi".length 2 (caractères)
Coller avec + "Hi" + "!" "Hi!"
Échappement "Say \"hi\"" Guillemet dans le même style
Template ` Hi, ${name} ` Insère la valeur de name

Écrire du texte entre guillemets

Choisissez un style et fermez pareil. "" est une chaîne vide valide.

Chaînes en guillemets simples et doubles

javascript 
let greeting = "Hello";
let city = 'Tehran';
console.log(greeting);
console.log(city);
console.log(typeof greeting);

Compter les caractères avec length

length est une propriété, pas une fonction — écrivez .length, pas .length(). Les espaces comptent.

Longueur de chaîne

javascript 
let word = "JavaScript";
console.log(word.length);
console.log("Hi there".length);

Coller des chaînes avec +

L’opérateur + assemble le texte. Si un côté est une chaîne, l’autre devient souvent du texte : "Score: " + 10 donne "Score: 10". Gardez-le en tête en mélangeant nombres et texte.

Concaténer avec +

javascript 
let first = "Ada";
let last = "Lovelace";
let full = first + " " + last;
console.log(full);
console.log("Score: " + 10);

Mettre un guillemet dans la chaîne

Deux options simples : changer de style de guillemets, ou échapper avec un antislash.

Guillemets dans une chaîne

javascript 
let a = "She said \"hello\"";
let b = 'It\'s ready';
console.log(a);
console.log(b);

Template literals (backticks)

Les backticks permettent d’écrire une chaîne et d’insérer des valeurs avec ${…} — pratique pour les messages qui mêlent mots et variables.

Template literal avec un placeholder

javascript 
let name = "Sam";
let line = `Hello, ${name}!`;
console.log(line);

Afficher une chaîne sur la page

Construisez le message, puis assignez-le avec textContent pour que le paragraphe montre du texte brut.

La page affiche une salutation en chaîne

html 
<!DOCTYPE html>
<html>
<head>
<title>Strings — greeting on page</title>
</head>
<body>
<p id="out">…</p>
<script>
let user = "guest";
let msg = `Welcome, ${user}!`;
document.getElementById("out").textContent = msg;
</script>
</body>
</html>

Le paragraphe montre la salutation. Changez seulement user, rechargez, et vérifiez la nouvelle ligne.

À vous de jouer

  1. Créez un let en guillemets doubles et un en simples ; journalisez les deux et typeof.
  2. Journalisez .length pour "JavaScript" et pour une courte phrase avec espace.
  3. Collez prénom et nom avec + et un espace ; journalisez le résultat.
  4. Écrivez une chaîne avec une apostrophe ou un guillemet double (échappement ou changement de style).
  5. Construisez `Hello, ${name}!` avec un let name et journalisez-le.
  6. Dans la démo HTML, changez seulement user, rechargez, et lisez la nouvelle salutation.

Erreurs fréquentes

  • Écrire let s = Hello; sans guillemets — le moteur cherche une variable Hello
  • Ouvrir avec " et fermer avec ' (ou l’inverse)
  • Appeler length() comme une fonction — utilisez .length
  • S’attendre à ce que "5" + 5 soit toujours une addition numérique — avec une chaîne, + concatène souvent
  • Sauter trop tôt vers beaucoup de méthodes de chaîne (elles viennent ensuite)

Résumé

  • Les chaînes sont du texte dans '…', "…" ou `…`
  • length compte les caractères ; c’est une propriété
  • Collez avec +, ou utilisez les template literals avec ${…}
  • Échappez les guillemets du même style avec \, ou changez de style
  • Ensuite : méthodes de chaîne — comme slice, replace et la casse

🧠 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 10 de 16
Javascript Tutoriel