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.
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;
Outputstring
Dans le second exemple, nous avons utilisé new String()
pour créer un objet de chaîne et l’affecter à une variable.
typeof stringObject;
Outputobject
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.
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?
.
H | o | w | a | r | e | y | o | u | ? | ||
---|---|---|---|---|---|---|---|---|---|---|---|
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
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.
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];
Outputr
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);
Outputr
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");
Output1
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");
Output9
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");
Output4
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);
Outputyou
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);
Outputyou?
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.
En utilisant la propriété length
, nous pouvons renvoyer le nombre de caractères dans une chaîne.
"How are you?".length;
Output12
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
.
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();
OutputHOW ARE YOU?
toLowerCase()
convertira tous les caractères en minuscules.
"How are you?".toLowerCase();
Outputhow 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.
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];
Outputare
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.
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);
OutputHow are you?
La méthode trim()
est un moyen simple de procéder à la tâche courante qui consiste à supprimer les espaces excédentaires.
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);
OutputWhere 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);
OutputJavaScript 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.
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. »
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
Click here to Sign up and get $200 of credit to try our products over 60 days!