Comment indexer, diviser et manipuler des chaînes en JavaScript

Introduction

Une string est une séquence d’un ou plusieurs caractères qui peut être composée de lettres, de chiffres ou de symboles. Il est possible d’accéder à chaque caractère d’une chaîne JavaScript en utilisant un numéro d’index. Différentes méthodes et propriétés sont disponibles pour toutes les chaînes.

Au cours de ce tutoriel, nous allons apprendre à faire la différence entre les primitifs de chaînes et l’objet String. Ensuite, nous verrons de quelle manière les chaînes sont indexées et comment accéder aux caractères d’une chaîne. Pour finir, nous aborderons les propriétés et les méthodes couramment utilisées sur les chaînes de caractères.

Primitifs de chaînes et objets de chaînes

Tout d’abord, nous allons vous donner une explication sur ces deux types de chaînes de caractères. JavaScript fait la distinction entre la string primitive, un type de données immuable et l’objet String.

Afin de voir la différence entre les deux, nous allons initialiser un primitif de chaîne et un objet de chaîne.

// Initializing a new string primitive
const stringPrimitive = "A new string.";

// Initializing a new String object
const stringObject = new String("A new string.");  

Nous pouvons utiliser l’opérateur typeof pour déterminer le type d’une valeur. Dans le premier exemple, nous avons tout simplement attribué une chaîne à une variable.

typeof stringPrimitive;

Output
string

Dans le second exemple, nous avons utilisé new String() pour créer un objet de chaîne et l’affecter à une variable.

typeof stringObject;

Output
object

La plupart du temps, vous créerez des primitifs de chaîne. JavaScript peut accéder et utiliser les propriétés et méthodes intégrées de l’accès objet String sans réellement modifié le primitif de la chaîne que vous avez créée dans un objet.

Bien que ce concept soit un peu difficile à comprendre au début, vous devriez pouvoir faire la distinction entre un primitif et un objet. En résumé, vous pouvez utiliser des méthodes et des propriétés sur toutes les chaînes. En arrière-plan, JavaScript procèdera à une conversion en objet, puis de nouveau en primitif à chaque fois qu’une méthode ou une propriété sera appelée.

De quelle manière sont indexées les chaînes

Chaque caractère qui se trouve dans une chaîne correspond à un numéro d’index. La numérotation commence par 0.

Afin de le démontrer, nous allons créer une chaîne avec la valeur How are you?.

Le premier caractère de la chaîne est H auquel correspond l’index 0. Le dernier caractère est ?, qui correspond à 11. Les espaces sont également indexés, le 3 et le 7.

Le fait de pouvoir accéder à chaque caractère d’une chaîne nous donne plusieurs manières de travailler avec les chaînes et de les manipuler.

Accéder aux caractères

Nous allons vous montrer comment accéder aux caractères et index avec la chaîne How are you? .

"How are you?";

En utilisant des crochets, nous pouvons accéder à n’importe quel caractère de la chaîne.

"How are you?"[5];

Output
r

Nous pouvons également utiliser la méthode charAt() pour renvoyer le caractère en utilisant le numéro d’index comme paramètre.

"How are you?".charAt(5);

Output
r

Sinon, nous pouvons utiliser indexOf() pour renvoyer le numéro d’index par la première instance d’un caractère.

"How are you?".indexOf("o");

Output
1

Bien que « o » apparaisse deux fois dans la chaîne How are you? , indexOf() obtiendra la première instance.

lastIndexOf() permet de trouver la dernière instance.

"How are you?".lastIndexOf("o");

Output
9

Avec ces deux méthodes, vous pouvez également rechercher plusieurs caractères dans la chaîne. Elles renverront le numéro d’index du premier caractère dans l’instance.

"How are you?".indexOf("are");

Output
4

De son côté, la méthode slice() renvoie les caractères entre deux numéros d’index. Le premier paramètre correspondra au numéro d’index du début. Le second paramètre correspondra au numéro d’index où il devrait se terminer.

"How are you?".slice(8, 11);

Output
you

Notez que 11 correspond à ?, mais que ? ne fait pas partie de la sortie renvoyée. slice() renverra ce qui se trouve entre deux mais ne comprendra pas le dernier paramètre.

Si un second paramètre n’est pas inclus, slice() renverra tout ce qui se trouve entre le paramètre et la fin de la chaîne.

"How are you?".slice(8);

Output
you?

Pour résumer, charAt() et slice() vous aideront à renvoyer les valeurs de chaîne en fonction des numéros d’index. indexOf() et lastIndexOf() feront l’inverse. Ils renverront les numéros d’index en fonction des caractères de la chaîne fournis.

Déterminer la longueur d’une chaîne

En utilisant la propriété length, nous pouvons renvoyer le nombre de caractères dans une chaîne.

"How are you?".length;

Output
12

N’oubliez pas que la propriété length renvoie le nombre réel de caractères commençant par 1, ce qui résulte à 12 et non pas le numéro d’index final, qui commence par 0 et se termine par 11.

Convertir des majuscules en minuscules

Les deux méthodes intégrées toUpperCase() et toLowerCase() vous permettront de formater facilement un texte et de faire des comparaisons textuelles en JavaScript.

toUpperCase() convertira tous les caractères en majuscules.

"How are you?".toUpperCase();

Output
HOW ARE YOU?

toLowerCase() convertira tous les caractères en minuscules.

"How are you?".toLowerCase();

Output
how are you?

Ces deux méthodes de formatage n’utilisent aucun paramètre supplémentaire.

Il convient de noter que ces méthodes ne modifient pas la chaîne d’origine.

Diviser des chaînes

JavaScript intègre une méthode très utile qui permet de diviser une chaîne par caractère et de créer un nouveau tableau à partir des sections. Nous allons utiliser la méthode split() pour diviser le tableau par un caractère d’espacement, représenté par " ".

const originalString = "How are you?";

// Split string by whitespace character
const splitString = originalString.split(" ");

console.log(splitString);

Output
[ 'How', 'are', 'you?' ]

Maintenant que nous avons un nouveau tableau dans la variable splitString, nous pouvons accéder à chaque section en utilisant un numéro d’index.

splitString[1];

Output
are

Si un paramètre donné reste vide, split() créera un tableau séparé par des virgules avec chaque caractère dans la chaîne.

En divisant les chaînes, vous pouvez établir le nombre de mots qui se trouvent dans une phrase et utiliser la méthode pour déterminer quels sont les prénoms et noms de famille des personnes.

Retirer les espaces

La méthode trim() de JavaScript supprime les espaces qui se trouvent aux deux extrémités d’une chaîne, mais pas ceux qui se trouvent entre deux. Les espaces peuvent correspondre à des onglets ou des espaces.

const tooMuchWhitespace = "     How are you?     ";

const trimmed = tooMuchWhitespace.trim();

console.log(trimmed);

Output
How are you?

La méthode trim() est un moyen simple de procéder à la tâche courante qui consiste à supprimer les espaces excédentaires.

Trouver et remplacer les valeurs d’une chaîne

Vous pouvez recherche une valeur dans une chaîne et la remplacer avec une nouvelle en utilisant la méthode replace(). Le premier paramètre correspondra à la valeur à trouver et le second paramètre correspondra la valeur avec laquelle elle sera remplacée.

const originalString = "How are you?"

// Replace the first instance of "How" with "Where"
const newString = originalString.replace("How", "Where");

console.log(newString);

Output
Where are you?

Nous pouvons non seulement remplacer une valeur avec une autre valeur de chaîne, mais également utiliser des Regular Expressions pour rendre replace() plus puissant. Par exemple, replace() affecte uniquement la première valeur. Cependant, nous pouvons utiliser la balise g (global) pour récupérer toutes les instances d’une valeur et la balise i (sensible à la casse) pour ignorer la casse.

const originalString = "Javascript is a programming language. I'm learning javascript."

// Search string for "javascript" and replace with "JavaScript"
const newString = originalString.replace(/javascript/gi, "JavaScript");

console.log(newString);

Output
JavaScript is a programming language. I'm learning JavaScript.

Il s’agit d’une manière très commune d’utiliser des expressions régulières. Consultez Regexr pour vous faire la main sur d’autres exemples de RegEx.

Conclusion

Les chaînes sont l’un des types de données les plus fréquemment utilisés, avec lesquels nous pouvons faire un grand nombre de choses.

Au cours de ce tutoriel, nous avons appris à faire la différence entre la primitive d’une chaîne et l’objet String. Nous avons également vu de quelle manière les chaînes sont indexées. Enfin, nous avons appris à utiliser les méthodes et propriétés intégrées dans les chaînes pour accéder aux caractères, formater un texte et trouver et remplacer des valeurs.

Pour avoir un aperçu plus général sur les chaînes, lisez le tutoriel « Comment travailler avec des chaînes en JavaScript. »