Apprends Méthodes de chaînes de caractères

Les bases des chaînes de caractères

Les chaînes de caractères en JavaScript sont immuables — une fois créée, une chaîne de caractères ne peut pas être modifiée. Toute méthode qui semble modifier une chaîne retourne en réalité une toute nouvelle chaîne.

Tu peux créer des chaînes en utilisant des guillemets simples, des guillemets doubles, ou des backticks (littéraux de gabarit) :

javascript

const single = 'Hello';
const double = "Hello";
const template = `Hello, ${name}!`; // template literal with interpolation

Chaque chaîne a une propriété length :

javascript

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

Tu peux accéder aux caractères individuels en utilisant la notation entre crochets ou la méthode charAt() :

javascript

const word = 'JavaScript';
console.log(word[0]);        // 'J'
console.log(word.charAt(4)); // 'S'
console.log(word[word.length - 1]); // 't' (last character)

Les chaînes sont également itérables, ce qui signifie que tu peux les parcourir avec une boucle for...of :

javascript

for (const char of 'Hello') {
  console.log(char); // 'H', 'e', 'l', 'l', 'o'
}

Rechercher dans les chaînes

JavaScript fournit plusieurs méthodes pour trouver du contenu dans une chaîne de caractères.

indexOf(substring) retourne l'index de la première occurrence, ou -1 si elle n'est pas trouvée :

javascript

const text = 'Hello, World!';
console.log(text.indexOf('World')); // 7
console.log(text.indexOf('xyz'));   // -1

lastIndexOf(substring) fonctionne de la même manière mais recherche depuis la fin :

javascript

const path = 'folder/subfolder/file.txt';
console.log(path.lastIndexOf('/')); // 16

includes(substring) retourne un booléen — plus simple quand tu as juste besoin de savoir si la sous-chaîne existe :

javascript

console.log('JavaScript'.includes('Script')); // true
console.log('JavaScript'.includes('script')); // false (case-sensitive)

startsWith() et endsWith() vérifient le début ou la fin d'une chaîne :

javascript

const filename = 'report.pdf';
console.log(filename.startsWith('report')); // true
console.log(filename.endsWith('.pdf'));      // true

search(regex) fonctionne comme indexOf mais accepte une expression régulière :

javascript

const text = 'Hello World 123';
console.log(text.search(/\d+/)); // 12 (index where digits start)

Extraire et transformer

Extraire des sous-chaînes :

slice(start, end) extrait une section d'une chaîne. L'index end est exclusif. Les indices négatifs comptent depuis la fin :

javascript

const str = 'JavaScript';
console.log(str.slice(0, 4));  // 'Java'
console.log(str.slice(4));     // 'Script'
console.log(str.slice(-6));    // 'Script'

substring(start, end) est similaire à slice mais ne supporte pas les indices négatifs.

Changer la casse :

javascript

console.log('hello'.toUpperCase()); // 'HELLO'
console.log('HELLO'.toLowerCase()); // 'hello'

Supprimer les espaces :

javascript

const padded = '  Hello  ';
console.log(padded.trim());      // 'Hello'
console.log(padded.trimStart()); // 'Hello  '
console.log(padded.trimEnd());   // '  Hello'

Remplir des chaînes :

javascript

console.log('5'.padStart(3, '0'));  // '005'
console.log('Hi'.padEnd(10, '.')); // 'Hi........'

Répéter :

javascript

console.log('ha'.repeat(3)); // 'hahaha'

Diviser et joindre

split(separator) divise une chaîne en un tableau de sous-chaînes :

javascript

const csv = 'apple,banana,cherry';
const fruits = csv.split(',');
console.log(fruits); // ['apple', 'banana', 'cherry']

const words = 'Hello World'.split(' ');
console.log(words); // ['Hello', 'World']

Array.join(separator) est l'inverse — il combine les éléments d'un tableau en une chaîne :

javascript

const parts = ['2024', '01', '15'];
console.log(parts.join('-')); // '2024-01-15'

replace(search, replacement) remplace la première occurrence :

javascript

const text = 'Hello World World';
console.log(text.replace('World', 'JS')); // 'Hello JS World'

replaceAll(search, replacement) remplace toutes les occurrences :

javascript

console.log(text.replaceAll('World', 'JS')); // 'Hello JS JS'

Ces méthodes sont fréquemment enchaînées pour des transformations de texte puissantes :

javascript

const input = '  hello, world!  ';
const result = input.trim().toUpperCase().replace('WORLD', 'JS');
console.log(result); // 'HELLO, JS!'

Méthodes de chaînes en action

html

<div id="output"></div>

<script>
  const original = "  JavaScript is Awesome!  ";

  // Trimming and transforming
  const trimmed = original.trim();
  const upper = trimmed.toUpperCase();
  const replaced = upper.replace('AWESOME', 'POWERFUL');

  // Searching
  const hasJS = trimmed.includes('JavaScript');
  const position = trimmed.indexOf('is');

  // Splitting and joining
  const words = trimmed.split(' ');
  const reversed = words.reverse().join(' ');

  const output = document.getElementById('output');
  output.innerHTML = `
    <p>Original: "${original}"</p>
    <p>Trimmed: "${trimmed}"</p>
    <p>Uppercase: "${upper}"</p>
    <p>Replaced: "${replaced}"</p>
    <p>Includes "JavaScript": ${hasJS}</p>
    <p>Index of "is": ${position}</p>
    <p>Words reversed: "${reversed}"</p>
  `;
</script>

Que retourne 'hello'.indexOf('z') ?

Méthodes de chaînes de caractères

Les bases des chaînes de caractères

Rechercher dans les chaînes

Extraire et transformer

Diviser et joindre

Méthodes de chaînes en action

Prêt à pratiquer ?