Chaînes et littéraux de gabarit

Du texte que tu affiches à l'écran, une saisie venant d'un formulaire, un nom de produit qui revient d'une API — une grande partie des valeurs qu'une appli web manipule sont des chaînes (une valeur formée d'une suite de caractères).

Cet article couvre la construction de chaînes avec les 3 styles de guillemets et les littéraux de gabarit, puis des méthodes pour nettoyer une saisie en une forme affichable : rogner les espaces, vérifier si quelque chose est contenu, découper et rejoindre, et aligner les chiffres.

Construire et nettoyer des chaînes — 3 styles de guillemets et littéraux de gabarit

Disons que tu veux que l'écran de confirmation de commande affiche « Mug isotherme x 3 / Total 3600 » — le nom du produit, la quantité, et le montant vivent chacun dans leur propre variable. Les assembler en une seule phrase, c'est à ça que sert la construction de chaînes. Commençons par comment écrire une chaîne au départ.

Une chaîne s'écrit entourée de guillemets simples ', doubles ", ou de backticks. Si le même caractère de guillemet qui t'a servi à l'entourer apparaît à l'intérieur, c'est lu comme la fin de la chaîne, donc pour inclure un caractère guillemet à l'intérieur, entoure-la soit avec un style de guillemet différent, soit place un \ devant pour annuler son sens spécial.

Tu vas voir un vrai backtick dans l'exemple de code qui arrive.

const productName = "Mug isotherme";   // entouré de guillemets doubles
const categoryName = 'Articles de cuisine';   // entouré de guillemets simples

// Échappe avec \ pour inclure le même type de guillemet que celui qui entoure
const notice = "Coup de cœur \"staff\"";

// Entoure avec un type de guillemet différent et aucun échappement n'est nécessaire
const notice2 = 'Coup de cœur "staff"';

console.log(productName.length);   // 13  le nombre de caractères revient sous forme de nombre
console.log(notice);               // Coup de cœur "staff"
console.log(notice2);              // Coup de cœur "staff"

length, qui renvoie le nombre de caractères, est une propriété (une information attachée à une valeur, lue par son nom sans parenthèses). Contrairement à une méthode comme toFixed de l'article précédent, tu n'écris pas de parenthèses — ce n'est pas productName.length().

Les chaînes peuvent être jointes avec +, mais plus tu ajoutes de variables, plus les guillemets et les signes + s'accumulent et deviennent difficiles à lire. C'est à ça que servent les littéraux de gabarit (entoure une chaîne de backticks, et toute valeur écrite dans ${ } s'y intègre).

Dans ${ } tu peux écrire non seulement une variable mais une expression comme unitPrice * quantity, et le résultat calculé s'y intègre.

const productName = "Mug isotherme";
const unitPrice = 1200;
const quantity = 3;

// Joindre avec + mélange guillemets et + ensemble
console.log(productName + " x " + quantity + " / Total " + unitPrice * quantity);

// Avec ${ }, valeurs et expressions s'écrivent telles quelles
console.log(`${productName} x ${quantity} / Total ${unitPrice * quantity}`);
// Les deux affichent : Mug isotherme x 3 / Total 3600

Nettoyer pour l'affichage — trim / slice / toUpperCase

Un nom tapé dans un formulaire peut avoir des espaces parasites autour, ou une casse incohérente. L'afficher tel quel peut sembler cassé, donc tu nettoies sa forme juste avant de l'afficher.

trim supprime les espaces environnants, toUpperCase normalise en majuscules, et slice découpe une partie de la chaîne.

slice prend une position de début et une position de fin. Les positions sont comptées à partir de 0, et le caractère à la position de fin n'est pas inclus.

slice(0, 1) te donne le premier caractère ; omets la fin, comme dans slice(1), et tu obtiens tout depuis là jusqu'à la fin.

const rawInput = "  Camille  ";   // valeur reçue d'un champ de saisie

console.log(rawInput.trim());               // Camille
console.log(rawInput.trim().length);        // 7
console.log(rawInput.trim().toUpperCase()); // CAMILLE
console.log(rawInput.trim().slice(0, 3));   // Cam  3 premiers caractères

// Tu peux enchaîner des résultats découpés avec +
console.log(rawInput.trim().slice(0, 1).toUpperCase() + "…");  // C…

console.log(rawInput.length);               // 11  l'original a encore ses espaces

Les méthodes ne changent pas la chaîne d'origine

trim et toUpperCase renvoient seulement le résultat nettoyé sous forme de nouvelle chaîne — la variable sur laquelle tu les appelles reste exactement la même. Pour utiliser le résultat, soit tu le stockes dans une variable, soit tu l'enchaînes vers l'appel de méthode suivant, comme dans l'exemple ci-dessus.

Nettoie un nom d'affichage venant d'un champ de saisie en quelque chose d'affichable à l'écran. Le nom d'affichage rawName et l'ID membre memberId sont déjà déclarés.

① Affiche le nom avec les espaces de début et de fin supprimés.

② Affiche ce même nom avec seulement sa première lettre en majuscule.

③ Combine l'ID membre et le nom de ② en une seule salutation. Formate-la comme « Bienvenue, Léa ! (membre n°1042) ».

(Si tout s'exécute correctement, une explication apparaîtra.)

Chercher à l'intérieur d'une chaîne — includes / startsWith / indexOf

Si une adresse e-mail tapée par l'utilisateur n'a pas de @, tu voudrais la rejeter avant de l'enregistrer. Ou peut-être veux-tu traiter un code de commande différemment selon qu'il commence par ORD-. Des vérifications comme celles-ci utilisent des méthodes qui cherchent à l'intérieur d'une chaîne.

includes renvoie true ou false pour savoir si une chaîne donnée apparaît quelque part, et startsWith pour savoir si la chaîne commence par elle.

Quand tu as besoin de la position réelle, utilise indexOf, qui renvoie la position, sous forme de nombre, de la première correspondance. Si rien ne correspond, elle renvoie -1, donc ça sert aussi de moyen de vérifier si quelque chose est contenu du tout.

const orderCode = "ORD-2026-0042";

console.log(orderCode.includes("2026"));    // true   contenu quelque part
console.log(orderCode.startsWith("ORD-"));  // true   le début correspond

console.log(orderCode.indexOf("-"));        // 3      position, comptée à partir de 0
console.log(orderCode.indexOf("SHIP"));     // -1     non trouvé

console.log(orderCode.slice(4));            // 2026-0042  de la position 4 à la fin

Combine la position que renvoie indexOf avec slice, et tu peux extraire juste ce qui vient après un caractère séparateur. Une fois que tu sais où est le @, passer à slice la position juste après te donne la partie domaine d'une adresse e-mail.

Vérifie une adresse e-mail tapée dans un formulaire d'inscription. Le contact enregistré contactEmail et la chaîne tapée dans le champ, typedEmail, sont déjà déclarés.

① Affiche si typedEmail contient un signe @.

② Affiche la partie domaine de contactEmail — tout ce qui suit le signe @.

③ Affiche si contactEmail commence par nadia.

Découper et rejoindre — split et join

Parfois, comme une ligne CSV ou un champ de saisie de tags, une seule chaîne contient plusieurs valeurs. Traiter chaque élément séparément veut dire découper sur un séparateur, et faire l'inverse — pour l'affichage — veut dire les rejoindre en une seule. split fait le découpage ; join fait le rejoint.

split prend le caractère sur lequel découper. split(",") découpe à chaque virgule, et le résultat revient sous forme de tableau (plusieurs valeurs rangées dans l'ordre et regroupées en une seule valeur). join fonctionne dans l'autre sens — passe-lui le caractère à placer entre les éléments, et il les rejoint en une seule chaîne.

const tagLine = "Cuisine,Isotherme,Cadeau";   // contenu d'un champ de saisie de tags

const tags = tagLine.split(",");   // découpe à chaque virgule
console.log(tags.length);          // 3   le nombre de morceaux
console.log(tags[0]);              // Cuisine    position 0 = la première valeur
console.log(tags[2]);              // Cadeau     position 2 = la troisième valeur

console.log(tags.join(" / "));     // Cuisine / Isotherme / Cadeau
console.log("2026-09-02".split("-").join("/"));  // 2026/09/02

Extraire les valeurs découpées par position

Depuis le tableau que renvoie split, extrais les éléments un par un en écrivant leur position, comptée à partir de 0, entre crochets — comme dans tags[0]. Les opérations sur le tableau lui-même, comme ajouter ou retirer des éléments, sont couvertes à nouveau dans l'article sur les tableaux.

Tu as reçu les lignes d'une commande sous forme d'une seule ligne CSV. csvLine, une chaîne avec l'ID membre, le nom du produit, le prix unitaire, et la quantité séparés par des virgules, est déjà déclarée.

① Affiche combien de champs tu obtiens après découpage sur les virgules.

② Affiche juste le nom du produit à partir des champs découpés.

③ Rejoins tous les champs avec « | » entre eux et affiche-les sur une ligne.

Remplacer et compléter — replaceAll et padStart

Peut-être veux-tu retirer les tirets d'un numéro de téléphone avant de l'enregistrer, ou compléter un numéro de commande à 6 chiffres avec des zéros de tête pour l'affichage. Pour des tâches comme « remettre en forme une chaîne reçue en un format fixe », utilise replaceAll et padStart.

replaceAll prend la chaîne à chercher et la chaîne de remplacement. Remplace par une chaîne vide "" (une chaîne de longueur zéro sans rien entre les guillemets), et ça a le même effet que de supprimer le caractère.

padStart prend la longueur cible et le caractère de remplissage (par défaut un espace si tu l'omets), et ajoute ce caractère de remplissage devant pour toute la longueur manquante. Si la chaîne d'origine fait déjà au moins cette longueur, rien n'est ajouté — elle est renvoyée telle quelle.

const rawCode = "ord 2026 0042";   // code de commande tapé avec des espaces

console.log(rawCode.replaceAll(" ", "-"));  // ord-2026-0042
console.log("06-12-34-56-78".replaceAll("-", ""));  // 0612345678

console.log("42".padStart(6, "0"));   // 000042  complète avec des 0 jusqu'à 6 chiffres
console.log("42".padStart(6));        //     42  pas de caractère de remplissage = un espace
console.log("1200".padStart(3, "0")); // 1200    déjà 3+ chiffres, donc inchangé

Remets en forme un numéro de commande attribué et un numéro de téléphone tapé en une forme que tu peux enregistrer. Le numéro de commande orderNumber et le numéro de téléphone rawPhone sont déjà déclarés.

① Affiche le numéro de commande complété à 6 chiffres avec des zéros de tête.

② Affiche un code de commande qui ajoute ORD- devant le résultat de ①.

③ Affiche le numéro de téléphone avec tous les tirets supprimés.