R

Strings & Template Literals

Les chaînes de caractères (strings) sont omniprésentes en JavaScript. Voyons comment les manipuler efficacement.

Strings basiques

Création de strings

Trois façons de créer des strings :

javascript
const simple = 'Hello';        // Guillemets simples
const double = "World";         // Guillemets doubles
const template = `Bonjour`;     // Backticks (template literals)

Astuce

  • Utilisez simple ou double pour les strings simples
  • Utilisez backticks pour l'interpolation (voir plus bas)
  • Soyez cohérent dans votre code (choisissez un style)

Échappement de caractères

javascript
const quote = 'L\'important c\'est d\'essayer';
const path = "C:\\Users\\Documents";
const multiline = "Ligne 1\nLigne 2";

Template Literals

La syntaxe pour insérer des variables dans les strings

Les template literals utilisent des backticks (`) et permettent :

  • L'interpolation de variables
  • Les expressions JavaScript
  • Les strings multi-lignes

Interpolation de variables

javascript
const name = 'Alice';
const age = 25;

// ❌ Ancien style (concaténation)
const message1 = 'Hello ' + name + ', you are ' + age + ' years old';

// ✅ Avec template literals
const message2 = `Hello ${name}, you are ${age} years old`;

console.log(message2); // "Hello Alice, you are 25 years old"

Avantages

  • Plus lisible
  • Moins d'erreurs (pas d'oubli de +)
  • Plus facile à maintenir

Expressions dans les template literals

Vous pouvez mettre n'importe quelle expression JavaScript dans ${} :

javascript
const price = 100;
const quantity = 3;
const tax = 0.2;

console.log(`Total: ${price * quantity} EUR`);
// "Total: 300 EUR"

console.log(`Total TTC: ${price * quantity * (1 + tax)} EUR`);
// "Total TTC: 360 EUR"

// Opérateur ternaire
const age = 25;
console.log(`Statut: ${age >= 18 ? 'Adulte' : 'Mineur'}`);
// "Statut: Adulte"

// Appel de fonction
const getName = () => 'Bob';
console.log(`Utilisateur: ${getName()}`);
// "Utilisateur: Bob"

Strings multi-lignes

Les template literals permettent d'écrire des strings sur plusieurs lignes sans échappement.

javascript
const user = {
  name: 'Alice',
  email: 'alice@example.com'
};

const message = `
Bonjour ${user.name},

Votre compte a été créé avec succès.

Informations du compte :
- Nom : ${user.name}
- Email : ${user.email}

Cordialement,
L'équipe
`;

console.log(message);

Quelle est la syntaxe recommandée pour insérer des variables dans une chaîne de caractères ?

Méthodes de strings

JavaScript fournit de nombreuses méthodes pour manipuler les strings.

Pas besoin de tout mémoriser !

Vous n'avez pas besoin d'apprendre toutes ces méthodes par cœur. L'important est de savoir qu'elles existent.

Quand vous avez besoin de manipuler un string (découper, transformer en majuscules, chercher un mot, etc.), demandez-vous : "Cette opération existe-t-elle déjà ?". La réponse est presque toujours oui !

Consultez la documentation (MDN) ou demandez à l'IA plutôt que de recoder une fonction qui existe déjà.

Les strings sont immuables

Important : En JavaScript, les strings sont immuables - elles ne peuvent pas être modifiées.

javascript
const text = 'Hello';

// ❌ Ceci ne fonctionne PAS (pas d'erreur, mais n'a aucun effet)
text[0] = 'J';
console.log(text); // Toujours "Hello"

// ✅ Pour "modifier" un string, créez-en un nouveau
const newText = 'J' + text.slice(1);
console.log(newText); // "Jello"

// ✅ Ou utilisez les méthodes qui retournent une nouvelle string
const replaced = text.replace('H', 'J');
console.log(replaced); // "Jello"

Toutes les méthodes de string retournent une nouvelle string sans modifier l'originale.

Longueur

javascript
const text = 'Hello';
console.log(text.length); // 5

Majuscules / Minuscules

javascript
const text = 'Hello World';

console.log(text.toUpperCase()); // "HELLO WORLD"
console.log(text.toLowerCase()); // "hello world"

Recherche

javascript
const text = 'Hello World';

console.log(text.includes('World')); // true
console.log(text.startsWith('Hello')); // true
console.log(text.endsWith('World')); // true
console.log(text.indexOf('o')); // 4 (première occurrence)

Extraction

javascript
const text = 'Hello World';

// Caractère à l'index
console.log(text[0]); // 'H'
console.log(text.charAt(0)); // 'H'

// Sous-chaîne
console.log(text.slice(0, 5)); // 'Hello'
console.log(text.slice(6)); // 'World'
console.log(text.substring(0, 5)); // 'Hello'

Remplacement

javascript
const text = 'Hello World';

console.log(text.replace('World', 'JavaScript'));
// "Hello JavaScript"

console.log(text.replaceAll('o', '0'));
// "Hell0 W0rld"

Découpage

javascript
const text = 'pomme,banane,orange';
const fruits = text.split(',');
console.log(fruits); // ['pomme', 'banane', 'orange']

// Fusionner un tableau en string
const joined = fruits.join(' - ');
console.log(joined); // "pomme - banane - orange"

Suppression des espaces

javascript
const text = '  Hello World  ';

console.log(text.trim()); // "Hello World"
console.log(text.trimStart()); // "Hello World  "
console.log(text.trimEnd()); // "  Hello World"

Que se passe-t-il avec ce code : const str = 'Hello'; str[0] = 'J'; ?

Cas d'usage pratiques

URL dynamique

javascript
const userId = 123;
const endpoint = `https://api.example.com/users/${userId}`;

fetch(endpoint)
  .then(response => response.json())
  .then(user => console.log(user));

Formatage de dates

javascript
const day = 14;
const month = 'Janvier';
const year = 2026;

const date = `${day} ${month} ${year}`;
console.log(date); // "14 Janvier 2026"

Messages dynamiques

javascript
const errors = ['Email requis', 'Mot de passe trop court'];

if (errors.length > 0) {
  const message = `${errors.length} erreur(s) détectée(s) : ${errors.join(', ')}`;
  console.log(message);
  // "2 erreur(s) détectée(s) : Email requis, Mot de passe trop court"
}

Que retourne : '5' + 3 + 2 ?

Exercice rapide

Exercice : Manipulation de strings

Facile

Avec cet objet utilisateur :

javascript
const user = {
firstName: 'Alice',
lastName: 'Martin',
age: 25,
city: 'Paris'
};

Utilisez les template literals et les méthodes de strings pour créer :

  1. Le nom complet : "Alice Martin"
  2. Un message de bienvenue : "Bienvenue Alice, vous avez 25 ans."
  3. Les initiales en majuscules : "AM"
  4. Un email : "alice.martin@example.com"