Chaînes de caractères en JavaScript

✂️ Le cours : manipuler du texte

Le texte (type string) est partout sur le web : saisies d'un formulaire, contenu d'une page, réponses d'un serveur. JavaScript offre une grande panoplie de méthodes ; l'essentiel est de se rappeler qu'un texte est immuable et que les indices commencent à 0.

Trois façons d'écrire un texte

Apostrophes et guillemets sont équivalents (choisis-en un et reste cohérent ; l'un permet d'écrire l'autre sans échappement : "l'ami"). Les accents graves créent une *chaîne modèle* : on y insère n'importe quelle expression avec ${ … }, et le texte peut occuper plusieurs lignes.

const nom = "Lina";
const note = 14.5;
const message = `Bonjour ${nom},
ta note : ${note}/20
(${note >= 10 ? "admise" : "ajournee"})`;

console.log(message);

Bonjour Lina,
ta note : 14.5/20
(admise)

Longueur, indices et caractères Unicode

length donne le nombre d'unités de 16 bits du texte, ce qui coïncide avec le nombre de caractères pour le texte courant (accents compris) mais pas pour les émojis, qui en occupent deux. [...texte] (ou Array.from(texte)) découpe en vrais caractères.

console.log("été".length, "😀".length, [..."😀"].length);

3 2 1

Un texte est immuable

Aucune méthode ne modifie le texte d'origine (et écrire mot[0] = "N" est sans effet, voire une erreur en mode strict). Pour « changer » un texte, on fabrique un nouveau texte et on le range dans la variable.

let mot = "nsi";

mot.toUpperCase();               // résultat ignoré : mot ne change pas
console.log(mot);
mot = mot.toUpperCase();         // on range le nouveau texte
console.log(mot);

nsi
NSI

Chercher et tester

Découper et assembler

split(séparateur) coupe un texte en tableau, join(séparateur) fait l'inverse. Avec split("") ou [...texte], on obtient les caractères : c'est ainsi qu'on inverse un texte (inverser le tableau, puis le rassembler). Un séparateur de un espace split(" ") produit des cases vides si les mots sont séparés par plusieurs espaces : une expression régulière comme /\s+/ règle ce cas.

const mot = "radar";
const inverse = [...mot].reverse().join("");

console.log(inverse, inverse === mot);
console.log("Un deux  trois".split(" ").length, "Un deux  trois".split(/\s+/).length);

radar true
4 3

Comparer des textes

=== compare le texte exactement (la casse compte). Pour ignorer la casse, convertis les deux côtés (a.toLowerCase() === b.toLowerCase()). Pour trier ou comparer dans l'ordre alphabétique du français, utilise a.localeCompare(b), qui gère les accents ; l'opérateur < compare les codes Unicode, où "é" vient après "z".

Textes et nombres

Number(texte) convertit (strict), parseInt(texte, base) lit un entier dans une base donnée, nombre.toString(base) écrit un nombre dans une base (2 pour le binaire, 16 pour l'hexadécimal : voir Conversions et Horner), toFixed(n) arrondit à n décimales. Attention à la virgule : Number("12,5") vaut NaN.

console.log((13).toString(2), parseInt("1101", 2), (255).toString(16));
console.log((3.14159).toFixed(2), Number("12,5"), Number("12.5"));

1101 13 ff
3.14 NaN 12.5

Aperçu des expressions régulières

Une expression régulière décrit un motif de texte entre barres obliques : \d un chiffre, \d+ un ou plusieurs, \s une espace, [a-z] une lettre minuscule, ^ et $ le début et la fin. La lettre g (*global*) fait agir match et replace sur toutes les occurrences. motif.test(texte) répond par vrai ou faux.

const texte = "Rendez-vous le 03/10/2026 à 14h30";

console.log(/\d{2}\/\d{2}\/\d{4}/.test(texte));
console.log(texte.match(/\d+/g).join(" "));
console.log(texte.replace(/\d/g, "#"));

true
03 10 2026 14 30
Rendez-vous le ##/##/#### à ##h##

⚠️ Erreurs fréquentes

Ignorer le résultat d'une méthode

nom.trim();             // nom est inchangé

nom = nom.trim();      // on garde le nouveau texte

replace ne remplace que la première occurrence

"a-b-c".replace("-", "+")        // "a+b-c"

"a-b-c".replaceAll("-", "+")     // "a+b+c"   (ou .replace(/-/g, "+"))

Additionner un texte et un nombre

"3" + 4 vaut "34". Les valeurs lues dans un champ de formulaire sont des textes : convertis-les avec Number(…) avant de calculer (voir Variables et types).

Confondre slice, substring et substr

slice(debut, fin) accepte les indices négatifs ("abc".slice(-2) donne "bc"). substring les traite comme 0 et échange les bornes si elles sont à l'envers. substr est obsolète. Retiens slice.

Une apostrophe qui coupe le texte

const phrase = 'l'ami de Lina';          // le texte s'arrête après « l »

const phrase = "l'ami de Lina";          // ou 'l\'ami de Lina'

Compter les « lettres » avec length

Les émojis et certaines lettres composées (un e suivi d'un accent combinant) comptent pour plusieurs unités. Pour du texte courant français avec accents précomposés, length convient ; en cas de doute, normalize() ou [...texte].length.

split(".") et les expressions régulières

split accepte un texte simple : "a.b".split(".") coupe bien sur le point. Mais replace et match avec un motif entre barres interprètent . comme « n'importe quel caractère » : échappe-le avec \..

📋 Aide-mémoire

• Un texte est immuable : s = s.trim(); ; length (propriété), s[i], s.at(-1), s.slice(debut, fin) (fin exclue).
• Chercher : includes, startsWith, endsWith, indexOf (-1 si absent) ; remplacer : replaceAll (ou /…/g).
• Découper / assembler : split(","), join("-"), [...texte], padStart, repeat, trim.
• Chaîne modèle : `Bonjour ${nom}` ; apostrophes et guillemets équivalents.
• Comparer : === (casse comprise), toLowerCase(), localeCompare pour l'alphabet français.
• Conversions : Number(…), parseInt(texte, base), n.toString(2), toFixed(2) ; innerHTML jamais avec un texte d'utilisateur.