Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

A présent que nous avons vu les bases des chaînes de caractères, avançons d'un cran et commençons à réfléchir quelles opérations nous pouvons faire sur les chaînes de caractères avec les méthodes intégrées, telles que trouver la taille d'une chaîne, rassembler et séparer des chaînes, remplacer un caractère dans une chaîne par une autre, et plus encore.

Prérequis: Une connaissance basique de l'informatique, une compréhension basique de HTML et CSS, une compréhension de ce qu'est JavaScript.
Objectif: Comprendre que les chaînes de caractères sont des objets, et apprendre à utiliser certaines méthodes basiques disponibles sur ces objets pour manipuler les chaînes.

Les chaînes de caractères sont des objets

Nous l'avons dit auparavant, et nous le dirons à nouveau — tout est un objet en JavaScript. Lorsque vous créez une chaine, par exemple en utilisant :

var string = 'Ceci est une chaîne';

votre variable devient une instance d'objet de chaine, et par conséquent a un grand nombre de propriétés et de méthodes disponibles. Vous pouvez voir cela si vous allez sur la page de l'objet String et que vous regardez la liste sur le côté de la page.

Avant que votre cerveau ne commence à fondre, ne paniquez pas ! Vous n'avez vraiment pas besoin de connaître tout cela au début de votre apprentissage. Mais il y en a quelques-uns que vous utilisez probablement souvent et que nous allons voir maintenant.

Entrez quelques examples dans une console fraîche. Nous vous en fournissons une ci-dessous (vous pouvez aussi ouvrir cette console dans un onglet ou une fenêtre séparée, ou utiliser la console de développement du navigateur si vous préférez).

Let's enter some examples into a fresh console. We've provided one below (you can also open this console in a separate tab or window, or use the browser developer console if you'd prefer).

Trouver la longueur d'une chaîne

C'est facile — il suffit d'utiliser la propriété length. Essayez d'entrer les lignes suivantes :

var browserType = 'mozilla';
browserType.length;

Cela devrait retourner le nombre 7, parce que "mozilla" est long de 7 charactères. Ceci est utile pour de nombreuses raisons ; par exemple vous pourriez avoir besoin de trouver les longueurs d'une séries de nom pour les afficher par ordre de longueur, ou faire savoir à un utilisateur qu'il a entré un nom dans un champ de formulaire qui est trop long s'il dépasse une certaine taille.

Retrouver un caractère spécifique dans une chaîne

Vous pouvez également retourner n'importe quel caractère d'une chaîne en utilisant la notation avec des crochets — c'est-à-dire en incluant des crochets ([]) à la fin du nom de votre variable. À l'intérieur des crochets, incluez le numéro du caractère que vous voulez retrouver, par exemple pour retrouver le premier caractère, vous écriveriez ceci :

browserType[0];

Les ordinateurs comptent à partir de 0, pas de 1 ! Pour retrouver le dernière caractère de n'importe quelle châine, on pourrait utiliser la ligne suivant, qui combine cette technique avec la propriété length  que nous avons vu plus tôt :

browserType[browserType.length-1];

La longueur de "mozilla" est 7, mais parce qu'on compte à partir de 0, la position du caractère est 6, d'où la nécessité d'écrire length-1. Vous pourrez utiliser ceci pour, par exemple, trouver la première lettre d'une série de chaîne et les ordonner alphabétiquement.

Trouver une sous-chaîne à l'intérieur d'une chaîne et l'extraire

  1. Parfois, vous aurez besoin de trouver si une chaîne est présente à l'intérieur d'une autre chaîne plus grande (on dit en général si une sous-chaîne est présente à l'intérieur d'une sous-chaîne). On peut faire ceci en utilisant la méthode indexOf(), qui prend un simple argument parameter — la sous-chaîne que vous recherchez. Essayez ceci :
    browserType.indexOf('zilla');
    Cela vous donner comme résultat 2, car la sous-chaîne "zilla" commence à la position 2 (0, 1, 2 — donc après 3 caractères) à l'intérieur de "mozilla". Un tel code peut être utilisé pour filtrer des chaînes. Par exemple, vous pourriez avoir une liste d'adresses web and vouloir n'afficher que celles qui contiennent "mozilla".
  1. Ceci peut être fait d'une autre manière, peut-être plus efficace encore. Essayez le code suivant :
    browserType.indexOf('vanilla');
    Cela vous donne le résultat de -1 — qui est retourné quand la sous-chaîne, en l'occurence 'vanilla', n'est pas trouvé dans la chaîne principale.

    Vous pourriez trouver toutes les instances de chaînes qui ne contiennent pas la sous-chaîne 'mozilla', ou bien celles qui la contiennent, si vous utilisez l'opération de négation logique, tel que montré ci-dessous. Vous pourriez faire quelque chose comme :
    if(browserType.indexOf('mozilla') !== -1) {
      // do stuff with the string
    }
  2. Lorsque vous savez où la sous-chaîne commence à l'intérieur de la chaîne, et savez à quel caractère elle prend fin, vous pouvez utiliser slice() pour l'extraire. Essayez le code suivant :
    browserType.slice(0,3);
    Cela retourne "moz" — le premier paramètre est la position du caractère où doit commencer l'extraction, et le second paramètre est la position du caractère se trouvant après le dernier devant être extrait. Ainsi, l'extraction se produit de la première position jusqu'à, sans l'inclure, la dernière position. On peut se dire que le second caractère est égal à la longueur de la chaîne qui doit être retournée.
     
  3. Par ailleurs, si vous souhaitez extraire tous les caractères restants après un certaine carctère, vous pouvez ne pas inclure le second paramètre ! Il suffit d'inclure la position du caractère à partir duquel vous voulez extraire les caractères restants dans la chaîne. Essayez la chose suivante :
    browserType.slice(2);
    Cela retourne "zilla" — ceci parce que le caractère à la position 2 est la lettre z, parce que nous n'avons pas inclus le second paramètre, la sous-chaîne qui a été retournée correspond aux caractères restant dans la chaîne.

Note : Le second paramètre de slice() est optionnel : si vous ne l'incluez pas, l'extraction prend fin à la fin de la chaîne originale. Il existe aussi d'autres options, étudiez la page slice() pour voir ce que vous pouvez trouver d'autre.

Changer la casse

Les méthodes de chaîne toLowerCase() et toUpperCase() prennent une chaîne et convertissent tous les caractères, respectivement en minuscule et en majuscule. Cela peut être utile si, par exemple, vous souhaitez normaliser toutes les données entrées par des utilisateurs avant de les stocker dans une base de données.

Essayons d'entrer les lignes suivantes et voyons ce qui se passe :

var radData = 'My NaMe Is MuD';
radData.toLowerCase();
radData.toUpperCase();

Mettre à jour les parties d'une chaîne

Vous pouvez remplacer une sous-chaîne à l'intérieur d'une chaîne avec une autre sous-chaîne à l'aide de la méthode replace(). Cela fonctionne très simplement à un niveau basique, bien qu'il soit possible de faire des choses plus avancées, mais nous ne y attarderons pas maintenant.

La méthode prend deux paramètres — la chaîne que vous voulez remplacer et la chaîne avec laquelle vous voulez la remplacer. Essayer avec cet exemple :

browserType.replace('moz','van');

Notez que pour véritablement obtenir la valeur mise à jour à partir de la variable browserType, il vous faudrait assigner à la valeur de la variable le résultat de l'opération ; cela ne met pas à jour automatiquement la valeur de la sous-chaîne. Il vous faudrait donc écrire : browserType = browserType.replace('moz','van');

Apprentissage actif par l'exemple

Dans cette section, vous allez pouvoir vous entraîner à écrire du code de manipulation de chaîne. Dans chaque exercice ci-dessous, nous avons un tableaux de chaînes, et une boucle qui traîte chaque valeur dans le tableau et l'affiche dans une liste à puces. Vous n'avez pas besoin de comprendre comment fonctionnent les tableaux ou les boucles dès maintenant — cela vous sera expliqué dans de prochains articles. Tout ce dont vous avez besoin de chaque cas est d'écrire le code qui va retourner les chaînes dans le format souhaité.

Chaque exemple est accomapgné d'un bouton "Réinitialiser", que vous pouvez utiliser pour réinitialiser le code si vous faites une erreur que vous ne parvenez pas à corriger, et un bouton "Montrer la solution" sur lequel vous pouvez cliquer pour afficher une réponse potentielle si jamais vous êtes vraiment coincé.

Filtering greeting messages

In the first exercise we'll start you off simple — we have an array of greeting card messages, but we want to sort them to list just the Christmas messages. We want you to fill in a conditional test inside the if( ... ) structure, to test each string and only print it in the list if it is a Christmas message.

  1. First think about how you could test whether the message in each case is a Christmas message. What string is present in all of those messages, and what method could you use to test whether it is present?
  2. You'll then need to write a conditional test of the form operand1 operator operand2. Is the thing on the left equal to the thing on the right? Or in this case, does the method call on the left return the result on the right?
  3. Hint: In this case it is probably more useful to test whether the method call isn't equal to a certain result.

Fixing capitalization

In this exercise we have the names of cities in the United Kingdom, but the capitalization is all messed up. We want you to change them so that they are all lower case, except for a capital first letter. A good way to do this is to:

  1. Convert the whole of the string contained in the input variable to lower case and store it in a new variable.
  2. Grab the first letter of the string in this new variable and store it in another variable.
  3. Using this latest variable as a substring, replace the first letter of the lowercase string with the first letter of the lowercase string changed to upper case. Store the result of this replace procedure in another new variable.
  4. Change the value of the result variable to equal to the final result, not the input.

Note: A hint — the parameters of the string methods don't have to be string literals; they can also be variables, or even variables with a method being invoked on them.

Making new strings from old parts

In this last exercise, the array contains a bunch of strings containing information about train stations in the North of England. The strings are data items that contain the three-letter station code, followed by some machine-readable data, followed by a semicolon, followed by the human-readable station name. For example:

MAN675847583748sjt567654;Manchester Piccadilly

We want to extract the station code and name, and put them together in a string with the following structure:

MAN: Manchester Piccadilly

We'd recommend doing it like this:

  1. Extract the three-letter station code and store it in a new variable.
  2. Find the character index number of the semicolon.
  3. Extract the human-readable station name using the semicolon character index number as a reference point, and store it in a new variable.
  4. Concatenate the two new variables and a string literal to make the final string.
  5. Change the value of the result variable to equal to the final string, not the input.

Conclusion

You can't escape the fact that being able to handle words and sentences in programming is very important — particularly in JavaScript, as websites are all about communicating with people. This article has given you the basics that you need to know about manipulating strings for now. This should serve you well as you go into more complex topics in the future. Next, we're going to look at the last major type of data we need to focus on in the short term — arrays.

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : Iwazaru, tonybengue
 Dernière mise à jour par : Iwazaru,