Méthodes de chaîne à connaître en JavaScript

Manipuler des chaînes de caractères sans une connaissance approfondie des méthodes associées peut s'avérer un véritable défi pour tout développeur.

Afin de surmonter ces obstacles, il est crucial de maîtriser les propriétés et les fonctions fondamentales des chaînes en JavaScript.

Examinons-les en détail.

Propriété length

La propriété length retourne le nombre de caractères présents dans une chaîne.

const entreprise = "toptips.fr";

console.log(entreprise.length);

Méthode toUpperCase()

La méthode toUpperCase() convertit chaque caractère d'une chaîne en majuscule et renvoie la nouvelle chaîne. La chaîne d'origine reste inchangée.

const entreprise = "toptips.fr";

const entrepriseMajuscule = entreprise.toUpperCase();

console.log(entrepriseMajuscule);

Méthode toLowerCase()

À l'inverse, la méthode toLowerCase() transforme chaque caractère d'une chaîne en minuscule et renvoie la chaîne modifiée. La chaîne initiale n'est pas affectée.

const entreprise = "toptips.fr";

const entrepriseMinuscule = entreprise.toLowerCase();

console.log(entrepriseMinuscule);

Méthode trim()

La méthode trim() élimine les espaces (et autres caractères blancs) situés au début et à la fin d'une chaîne. Elle opère directement sur la chaîne, en la modifiant.

const entreprise = "         toptips.fr           ";

console.log(entreprise);
console.log(entreprise.trim());

Méthode charAt(index)

La méthode charAt(index) permet d'accéder au caractère situé à un index spécifique au sein de la chaîne. Si l'index n'est pas valide, elle retourne une chaîne vide.

const entreprise = "toptips.fr";

console.log(entreprise.charAt(2));
console.log(entreprise.charAt(10));

Méthode charCodeAt(index)

La méthode charCodeAt(index) retourne le code ASCII du caractère présent à l'index indiqué. Elle retourne NaN si l'index n'est pas valide.

const entreprise = "toptips.fr";

console.log(entreprise.charCodeAt(2));
console.log(entreprise.charCodeAt(10));

Méthode slice(startIndex, endIndex)

La méthode slice() extrait une sous-chaîne de la chaîne principale, en commençant à startIndex et en s'arrêtant juste avant endIndex. Par exemple, string.slice(0, 6) retourne la sous-chaîne allant de l'index 0 à l'index 5.

const entreprise = "toptips.fr";

console.log(entreprise.slice(0, 4));

Si on passe un seul argument à slice(), elle retourne la sous-chaîne allant de l'index donné jusqu'à la fin de la chaîne.

const entreprise = "toptips.fr";

console.log(entreprise.slice(4));

La méthode slice() accepte également des index négatifs. Ces index négatifs sont comptés à partir de la fin de la chaîne. Illustrons cela avec un exemple :

Pour la chaîne "toptips.fr", les index négatifs sont:

t = -10, o = -9, p = -8, t = -7, etc…

Ainsi, string.slice(-9, -5) renverrait "opti" dans cet exemple.

const entreprise = "toptips.fr";

console.log(entreprise.slice(-9, -5));

Et le code string.slice(-5) renverrait "ps.fr".

const entreprise = "toptips.fr";

console.log(entreprise.slice(-5));

Attention : l'indexation négative n'est pas supportée par Internet Explorer 8 et ses versions antérieures.

Méthode substr(startIndex, longueur)

La méthode substr() est similaire à slice(), à ceci près qu'elle prend en second argument la longueur de la sous-chaîne à extraire, au lieu de l'index de fin.

const entreprise = "toptips.fr";

console.log(entreprise.substr(4, 5));

Il existe une autre méthode, substring(), qui ressemble à slice(), mais qui ne prend pas en charge les index négatifs. N'hésitez pas à l'essayer par vous-même.

Méthode replace(sousChaîne, nouvelleSousChaîne)

La méthode replace() remplace la première occurrence de sousChaîne par nouvelleSousChaîne.

const phrase = "Visitez le site Google";

console.log(phrase.replace("Google", "toptips.fr"));

Méthode indexOf(sousChaîne)

La méthode indexOf() retourne l'index de départ de la première occurrence d'une sousChaîne dans une chaîne. Elle retourne -1 si la sousChaîne est introuvable.

const entreprise = "toptips.fr";

console.log(entreprise.indexOf("tips"));
console.log(entreprise.indexOf("z"));

La méthode indexOf() peut également prendre un second argument, qui indique l'index à partir duquel la recherche doit commencer.

const entreprise = "toptips.fr";

console.log(entreprise.indexOf("t"));
console.log(entreprise.indexOf("t", 3));

Il existe également la méthode lastIndexOf(), qui est similaire à indexOf(), à la différence qu'elle recherche la sousChaîne en partant de la fin de la chaîne, et retourne l'index de sa dernière occurrence. Testez-la avec entreprise.lastIndexOf('t').

Méthode split(séparateur)

La méthode split() divise une chaîne en fonction d'un séparateur et retourne un tableau contenant les différentes parties.

const phrase = "Visitez, le, site, toptips.fr";

console.log(phrase.split(" "));
console.log(phrase.split(", "));

Conclusion

Cette liste n'est pas exhaustive. Je vous encourage à explorer les autres méthodes disponibles dans la documentation de JavaScript. Vous y découvrirez peut-être des fonctions utiles pour des situations plus spécifiques.

N'hésitez pas à rechercher et à utiliser celles qui correspondent à vos besoins, si elles ne sont pas listées ici.

Bon codage ! 🙂

Pour la suite, explorez les frameworks JavaScript les plus populaires.