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

introduction

Unstring est une séquence d'un ou plusieurs caractères qui peuvent être constitués de lettres, de chiffres ou de symboles. Chaque caractère d'une chaîne JavaScript est accessible par un numéro d'index. Toutes les chaînes disposent de méthodes et de propriétés.

Dans ce didacticiel, nous allons apprendre la différence entre les primitives de chaîne et l'objetString, comment les chaînes sont indexées, comment accéder aux caractères d'une chaîne et les propriétés et méthodes courantes utilisées sur les chaînes.

Primitives de chaîne et objets de chaîne

Tout d'abord, nous allons clarifier les deux types de chaînes. JavaScript fait la différence entre lestring primitive, un type de données immuable, et l'objetString.

Afin de tester la différence entre les deux, nous allons initialiser une primitive 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érateurtypeof pour déterminer le type d'une valeur. Dans le premier exemple, nous avons simplement assigné une chaîne à une variable.

typeof stringPrimitive;
Outputstring

Dans le deuxième exemple, nous avons utilisénew String() pour créer un objet chaîne et l'assigner à une variable.

typeof stringObject;
Outputobject

La plupart du temps, vous créerez des primitives de chaîne. JavaScript est capable d’accéder et d’utiliser les propriétés et méthodes intégrées du wrapper d’objetString sans changer réellement la chaîne primitive que vous avez créée en objet.

Bien que ce concept soit un peu difficile au début, vous devez être conscient de la distinction entre primitif et objet. Il existe essentiellement des méthodes et des propriétés disponibles pour toutes les chaînes, et en arrière-plan, JavaScript effectuera une conversion en objet et en primitif à chaque appel d'une méthode ou d'une propriété.

Comment les chaînes sont indexées

Chacun des caractères d'une chaîne correspond à un numéro d'index, commençant par0.

Pour démontrer, nous allons créer une chaîne avec la valeurHow 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 estH, ce qui correspond à l'index0. Le dernier caractère est?, ce qui correspond à11. Les caractères d'espacement ont également un index, à3 et7.

Pouvoir accéder à tous les caractères d'une chaîne nous donne un certain nombre de façons de travailler avec et de manipuler des chaînes.

Accéder aux personnages

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

"How are you?";

En utilisant la notation entre 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éthodecharAt() pour renvoyer le caractère en utilisant le numéro d'index comme paramètre.

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

Alternativement, nous pouvons utiliserindexOf() 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îneHow are you?,indexOf() obtiendra la première instance.

lastIndexOf() est utilisé pour trouver la dernière instance.

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

Pour ces deux méthodes, vous pouvez également rechercher plusieurs caractères dans la chaîne. Il renverra le numéro d'index du premier caractère de l'instance.

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

La méthodeslice(), d'autre part, renvoie les caractères entre deux numéros d'index. Le premier paramètre sera le numéro d'index de départ et le second, le numéro d'index auquel il doit se terminer.

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

Notez que11 est?, mais? ne fait pas partie de la sortie renvoyée. slice() retournera ce qui se trouve entre, mais non compris, le dernier paramètre.

Si un deuxième paramètre n'est pas inclus,slice() renverra tout du paramètre à la fin de la chaîne.

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

Pour résumer,charAt() etslice() aideront à renvoyer des valeurs de chaîne basées sur des numéros d'index, etindexOf() etlastIndexOf() feront le contraire, renvoyant des numéros d'index basés sur les caractères de chaîne fournis .

Trouver la longueur d'une ficelle

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

"How are you?".length;
Output12

Rappelez-vous que la propriétélength renvoie le nombre réel de caractères commençant par 1, qui sort à 12, et non le numéro d'index final, qui commence à0 et se termine à11.

Conversion en majuscules ou minuscules

Les deux méthodes intégréestoUpperCase() ettoLowerCase() sont des moyens utiles pour formater du texte et effectuer 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 caractères minuscules.

"How are you?".toLowerCase();
Outputhow are you?

Ces deux méthodes de formatage ne prennent aucun paramètre supplémentaire.

Il est à noter que ces méthodes ne modifient pas la chaîne d'origine.

Fractionnement des cordes

JavaScript a une méthode très utile pour diviser une chaîne par un caractère et créer un nouveauarray hors des sections. Nous utiliserons la méthodesplit() pour séparer 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 variablesplitString, nous pouvons accéder à chaque section avec un numéro d'index.

splitString[1];
Outputare

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

En scindant des chaînes, vous pouvez déterminer le nombre de mots d'une phrase et utiliser cette méthode pour déterminer le nom et le prénom d'une personne, par exemple.

Découper les espaces

La méthode JavaScripttrim() supprime les espaces blancs des deux extrémités d'une chaîne, mais pas n'importe où entre les deux. Les espaces peuvent être des tabulations ou des espaces.

const tooMuchWhitespace = "     How are you?     ";

const trimmed = tooMuchWhitespace.trim();

console.log(trimmed);
OutputHow are you?

La méthodetrim() est un moyen simple d'effectuer la tâche courante de suppression des espaces blancs en excès.

Recherche et remplacement de valeurs de chaîne

Nous pouvons rechercher une chaîne pour une valeur et la remplacer par une nouvelle valeur en utilisant la méthodereplace(). Le premier paramètre sera la valeur à trouver et le deuxième paramètre sera la valeur avec laquelle le remplacer.

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?

En plus de pouvoir remplacer une valeur par une autre valeur de chaîne, nous pouvons également utiliserRegular Expressions pour rendrereplace() plus puissant. Par exemple,replace() n'affecte que la première valeur, mais nous pouvons utiliser l'indicateurg (global) pour attraper toutes les instances d'une valeur et l'indicateuri (insensible à la casse) pour ignorer Cas.

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.

C'est une tâche très courante qui utilise des expressions régulières. VisitezRegexr pour pratiquer plus d'exemples de RegEx.

Conclusion

Les chaînes sont l'un des types de données les plus fréquemment utilisés, et nous pouvons en faire beaucoup.

Dans ce didacticiel, nous avons appris la différence entre la primitive de chaîne et l'objetString, comment les chaînes sont indexées et comment utiliser les méthodes intégrées et les propriétés des chaînes pour accéder aux caractères, mettre en forme le texte et rechercher et remplacer des valeurs .

Pour un aperçu plus général des chaînes, lisez le didacticiel «https://www.digitalocean.com/community/tutorials/how-to-work-with-strings-in-javascript[Comment utiliser des chaînes en JavaScript].»