Cordes

En JavaScript, les données textuelles sont stockées sous forme de chaînes. Il n'existe pas de type distinct pour un seul caractère.

Le format interne des chaînes est toujours UTF-16, il n'est pas lié à l'encodage de la page.

Citations

Rappelons les types de citations.

Les chaînes peuvent être placées entre guillemets simples, guillemets doubles ou guillemets :

 let single = 'entre guillemets simples';
let double = "entre guillemets" ;

let backticks = `backticks`;

Les guillemets simples et doubles sont essentiellement les mêmes. Les backticks, cependant, nous permettent d'intégrer n'importe quelle expression dans la chaîne, en l'enveloppant dans ${…} :

 fonction somme(a, b) {
  renvoyer a + b ;
}

alert(`1 + 2 = ${somme(1, 2)}.`); // 1 + 2 = 3.

Un autre avantage de l'utilisation des backticks est qu'ils permettent à une chaîne de s'étendre sur plusieurs lignes :

 let guestList = `Invités :
 * John
 * Pierre
 * Marie
`;

alerte (liste d'invités); // une liste d'invités, plusieurs lignes

Ça a l’air naturel, non ? Mais les guillemets simples ou doubles ne fonctionnent pas de cette façon.

Si nous les utilisons et essayons d'utiliser plusieurs lignes, il y aura une erreur :

 let guestList = "Invités : // Erreur : jeton inattendu ILLEGAL
  * John";

Les guillemets simples et doubles proviennent des temps anciens de la création de langages, lorsque le besoin de chaînes multilignes n'était pas pris en compte. Les backticks sont apparus beaucoup plus tard et sont donc plus polyvalents.

Les backticks nous permettent également de spécifier une « fonction modèle » avant le premier backtick. La syntaxe est : func`string` . La fonction func est appelée automatiquement, reçoit la chaîne et les expressions intégrées et peut les traiter. Cette fonctionnalité est appelée « modèles balisés », elle est rarement vue, mais vous pouvez en savoir plus à ce sujet dans le MDN : Littéraux de modèles.

Caractères spéciaux

Il est toujours possible de créer des chaînes multilignes avec des guillemets simples et doubles en utilisant ce que l'on appelle un « caractère de nouvelle ligne », écrit sous la forme n , qui désigne un saut de ligne :

 let guestList = "Invités :n * Johnn * Peten * Mary";

alerte (liste d'invités); // une liste multiligne d'invités, comme ci-dessus

À titre d'exemple plus simple, ces deux lignes sont égales, mais écrites différemment :

 let str1 = "BonjournMonde" ; // deux lignes utilisant un "symbole de nouvelle ligne"

// deux lignes utilisant une nouvelle ligne normale et des backticks
let str2 = `Bonjour
Monde » ;

alerte(str1 == str2); // vrai

Il existe d'autres caractères spéciaux moins courants :

Comme vous pouvez le constater, tous les caractères spéciaux commencent par une barre oblique inverse . On l’appelle aussi « caractère d’évasion ».

Parce que c'est si spécial, si nous devons afficher une véritable barre oblique inverse dans la chaîne, nous devons la doubler :

 alert( `La barre oblique inverse : \` ); // La barre oblique inverse : 

Les guillemets dits « échappés » ' , " , ` sont utilisés pour insérer un guillemet dans la même chaîne.

Par exemple:

 alert( 'Je suis le morse !' ); // Je suis le morse !

Comme vous pouvez le voir, nous devons faire précéder le guillemet interne de la barre oblique inverse ' , car sinon cela indiquerait la fin de la chaîne.

Bien entendu, seuls les guillemets identiques à ceux qui les entourent doivent être échappés. Ainsi, comme solution plus élégante, nous pourrions plutôt passer aux guillemets doubles ou aux backticks :

 alert( "Je suis le morse !" ); // Je suis le morse !

Outre ces caractères spéciaux, il existe également une notation spéciale pour les codes Unicode u… , elle est rarement utilisée et est traitée dans le chapitre facultatif sur Unicode.

Longueur de chaîne

La propriété length a la longueur de la chaîne :

 alert( `Monn`.length ); // 3

Notez que n est un seul caractère « spécial », donc la longueur est bien 3 .

length est une propriété

Les personnes ayant une expérience dans d'autres langues font parfois des fautes de frappe en appelant str.length() au lieu de simplement str.length . Cela ne fonctionne pas.

Veuillez noter que str.length est une propriété numérique, pas une fonction. Il n’est pas nécessaire d’ajouter des parenthèses après. Pas .length() , mais .length .

Accéder aux personnages

Pour obtenir un caractère à la position pos , utilisez des crochets [pos] ou appelez la méthode str.at(pos). Le premier caractère part de la position zéro :

 let str = `Bonjour` ;

// le premier caractère
alerte( str[0] ); //H
alerte( str.at(0) ); //H

// le dernier caractère
alert( str[str.length - 1] ); //o
alert( str.at(-1) );

Comme vous pouvez le constater, la méthode .at(pos) a l'avantage d'autoriser une position négative. Si pos est négatif, alors il est compté à partir de la fin de la chaîne.

Donc .at(-1) signifie le dernier caractère, et .at(-2) est celui qui le précède, etc.

Les crochets renvoient toujours undefined pour les index négatifs, par exemple :

 let str = `Bonjour` ;

alerte( str[-2] ); // non défini
alert( str.at(-2) ); // je

Nous pouvons également parcourir les caractères en utilisant for..of :

 for (laisser char de "Bonjour") {
  alerte(caractère); // H,e,l,l,o (char devient "H", puis "e", puis "l" etc)
}

Les chaînes sont immuables

Les chaînes ne peuvent pas être modifiées en JavaScript. Il est impossible de changer un personnage.

Essayons de montrer que cela ne fonctionne pas :

 let str = 'Salut';

str[0] = 'h'; // erreur
alerte( str[0] ); // ne marche pas

La solution de contournement habituelle consiste à créer une toute nouvelle chaîne et à l'attribuer à str au lieu de l'ancienne.

Par exemple:

 let str = 'Salut';

str = 'h' + str[1]; // remplace la chaîne

alerte( str ); // Salut

Dans les sections suivantes, nous en verrons plus d’exemples.

Changer de cas

Les méthodes toLowerCase() et toUpperCase() changent la casse :

 alert( 'Interface'.toUpperCase() ); //INTERFACE
alert( 'Interface'.toLowerCase() ); //interface

Ou, si nous voulons un seul caractère en minuscule :

 alert( 'Interface'[0].toLowerCase() ); // 'je'

Recherche d'une sous-chaîne

Il existe plusieurs façons de rechercher une sous-chaîne dans une chaîne.

str.indexOf

La première méthode est str.indexOf(substr, pos).

Il recherche le substr dans str , à partir de la position donnée pos , et renvoie la position où la correspondance a été trouvée ou -1 si rien ne peut être trouvé.

Par exemple:

 let str = 'Widget avec identifiant';

alert( str.indexOf('Widget') ); // 0, car 'Widget' se trouve au début
alert( str.indexOf('widget') ); // -1, introuvable, la recherche est sensible à la casse

alert( str.indexOf("id") ); // 1, "id" est trouvé à la position 1 (..idget avec id)

Le deuxième paramètre facultatif nous permet de commencer la recherche à partir d'une position donnée.

Par exemple, la première occurrence de "id" est en position 1 . Pour rechercher l'occurrence suivante, commençons la recherche à partir de la position 2 :

 let str = 'Widget avec identifiant';

alerte( str.indexOf('id', 2) ) // 12

Si nous sommes intéressés par toutes les occurrences, nous pouvons exécuter indexOf en boucle. Chaque nouvel appel est effectué avec la position après le match précédent :

 let str = 'Aussi sournois qu'un renard, aussi fort qu'un bœuf';

laissez target = 'comme'; // cherchons-le

soit pos = 0 ;
tandis que (vrai) {
  laissez foundPos = str.indexOf(target, pos);
  if (foundPos == -1) pause ;

  alert( `Trouvé à ${foundPos}` );
  pos = trouvéPos + 1 ; // continue la recherche à partir de la position suivante
}

Le même algorithme peut être présenté plus court :

 let str = "Aussi sournois qu'un renard, aussi fort qu'un bœuf";
laissez target = "comme" ;

soit pos = -1 ;
while ((pos = str.indexOf(target, pos + 1)) != -1) {
  alerte( pos );
}

str.lastIndexOf(substr, position)

Il existe également une méthode similaire str.lastIndexOf(substr, position) qui recherche de la fin d'une chaîne jusqu'à son début.

Il listerait les occurrences dans l'ordre inverse.

Il y a un léger inconvénient avec indexOf dans le test if . Nous ne pouvons pas le mettre dans le if comme ceci :

 let str = "Widget avec identifiant";

if (str.indexOf("Widget")) {
    alert("Nous l'avons trouvé"); // ça ne marche pas !
}

L' alert dans l'exemple ci-dessus ne s'affiche pas car str.indexOf("Widget") renvoie 0 (ce qui signifie qu'il a trouvé la correspondance à la position de départ). C'est vrai, mais if considère 0 comme false .

Nous devrions donc vérifier -1 , comme ceci :

 let str = "Widget avec identifiant";

if (str.indexOf("Widget") != -1) {
    alert("Nous l'avons trouvé"); // fonctionne maintenant !
}

inclut, commence par, se termine par

La méthode plus moderne str.includes(substr, pos) renvoie true/false selon que str contient ou non substr .

C'est le bon choix si nous avons besoin de tester le match, mais que nous n'avons pas besoin de sa position :

 alert( "Widget avec identifiant".includes("Widget") ); // vrai

alert( "Bonjour".includes("Au revoir") ); // FAUX

Le deuxième argument facultatif de str.includes est la position à partir de laquelle commencer la recherche :

 alert( "Widget".includes("id") ); // vrai
alert( "Widget".includes("id", 3) ); // faux, à partir de la position 3 il n'y a pas d'"id"

Les méthodes str.startsWith et str.endsWith font exactement ce qu'elles disent :

 alert( "Widget".startsWith("Wid") ); // vrai, "Widget" commence par "Wid"
alert( "Widget".endsWith("get") ); // vrai, "Widget" se termine par "get"

Obtenir une sous-chaîne

Il existe 3 méthodes en JavaScript pour obtenir une sous-chaîne : substring , substr et slice .

• str.slice(start [, end])

• Renvoie la partie de la chaîne du start à end (mais non incluse).

  Par exemple:

   let str = "stringifier";
  alert( str.slice(0, 5) ); // 'string', la sous-chaîne de 0 à 5 (sans compter 5)
  alert( str.slice(0, 1) ); // 's', de 0 à 1, mais sans 1, donc seul caractère à 0

  S'il n'y a pas de deuxième argument, alors slice va jusqu'à la fin de la chaîne :

   let str = "stringifier";
  alert( str.slice(2) ); // 'ringify', de la 2ème position jusqu'à la fin

  Des valeurs négatives pour start/end sont également possibles. Cela signifie que la position est comptée à partir de la fin de la chaîne :

   let str = "stringifier";
  
  // commencer à la 4ème position en partant de la droite, terminer à la 1ère en partant de la droite
  alert( str.slice(-4, -1) ); // 'gif'

• str.substring(start [, end])

• Renvoie la partie de la chaîne entre start et end (sans compter end ).

  C'est presque la même chose que slice , mais cela permet start d'être supérieur à end (dans ce cas, il échange simplement les valeurs start et end ).

  Par exemple:

   let str = "stringifier";
  
  // ce sont les mêmes pour la sous-chaîne
  alert( str.substring(2, 6) ); // "anneau"
  alert( str.substring(6, 2) ); // "anneau"
  
  // ...mais pas pour slice :
  alert( str.slice(2, 6) ); // "ring" (le même)
  alert( str.slice(6, 2) ); // "" (une chaîne vide)

  Les arguments négatifs ne sont pas pris en charge (contrairement à slice), ils sont traités comme 0 .

• str.substr(start [, length])

• Renvoie la partie de la chaîne depuis start , avec la length donnée.

  Contrairement aux méthodes précédentes, celle-ci nous permet de spécifier la length au lieu de la position finale :

   let str = "stringifier";
  alert( str.substr(2, 4) ); // 'ring', à partir de la 2ème position, obtenez 4 caractères

  Le premier argument peut être négatif, pour compter à partir de la fin :

   let str = "stringifier";
  alert( str.substr(-4, 2) ); // 'gi', à partir de la 4ème position, obtenez 2 caractères

  Cette méthode réside dans l’Annexe B de la spécification du langage. Cela signifie que seuls les moteurs Javascript hébergés par le navigateur doivent le prendre en charge et qu'il n'est pas recommandé de l'utiliser. En pratique, il est pris en charge partout.

Récapitulons ces méthodes pour éviter toute confusion :

Lequel choisir ?

Tous peuvent faire le travail. Formellement, substr présente un inconvénient mineur : il n'est pas décrit dans la spécification JavaScript principale, mais dans l'Annexe B, qui couvre les fonctionnalités réservées au navigateur qui existent principalement pour des raisons historiques. Ainsi, les environnements autres que les navigateurs peuvent ne pas le prendre en charge. Mais en pratique, ça marche partout.

Parmi les deux autres variantes, slice est un peu plus flexible, elle permet des arguments négatifs et est plus courte à écrire.

Donc, pour une utilisation pratique, il suffit de se souvenir uniquement slice .

Comparaison de chaînes

Comme nous le savons dans le chapitre Comparaisons, les chaînes sont comparées caractère par caractère par ordre alphabétique.

Cependant, il y a quelques bizarreries.

1. Une lettre minuscule est toujours plus grande qu'une majuscule :

    alerte( 'a' > 'Z' ); // vrai

2. Les lettres avec des signes diacritiques sont « dans le désordre » :

    alert( 'Österreich' > 'Zélande' ); // vrai

   Cela peut conduire à des résultats étranges si nous trions ces noms de pays. Habituellement, les gens s’attendent à ce que Zealand arrive après Österreich dans la liste.

Pour comprendre ce qui se passe, il faut savoir que les chaînes en Javascript sont codées en UTF-16. Autrement dit : chaque caractère a un code numérique correspondant.

Il existe des méthodes spéciales qui permettent d'obtenir le caractère du code et inversement :

• str.codePointAt(pos)

• Renvoie un nombre décimal représentant le code du caractère en position pos :

   // différentes lettres de casse ont des codes différents
  alerte( "Z".codePointAt(0) ); // 90
  alert( "z".codePointAt(0) ); // 122
  alert( "z".codePointAt(0).toString(16) ); // 7a (si nous avons besoin d'une valeur hexadécimale)

• String.fromCodePoint(code)

• Crée un caractère par son code numérique

   alerte( String.fromCodePoint(90) ); //Z
  alerte( String.fromCodePoint(0x5a) ); // Z (on peut aussi utiliser une valeur hexadécimale comme argument)

Voyons maintenant les caractères avec les codes 65..220 (l'alphabet latin et un petit plus) en en faisant une chaîne :

 laissez str = '';

pour (soit i = 65; i <= 220; i++) {
  str += String.fromCodePoint(i);
}
alerte( str );
// Sortir:
// ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~ € ‚ƒ„
// ¡¢£¤¥¦§¨©ª«¬®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜ

Voir? Les caractères majuscules apparaissent en premier, puis quelques caractères spéciaux, puis les caractères minuscules et Ö vers la fin de la sortie.

Il devient maintenant évident pourquoi a > Z .

Les caractères sont comparés par leur code numérique. Le code plus grand signifie que le caractère est plus grand. Le code pour a (97) est supérieur au code pour Z (90).

• Toutes les lettres minuscules suivent les lettres majuscules car leurs codes sont plus grands.

• Certaines lettres comme Ö se démarquent de l'alphabet principal. Ici, son code est supérieur à tout ce qui va de a à z .

Comparaisons correctes

Le « bon » algorithme pour effectuer des comparaisons de chaînes est plus complexe qu’il n’y paraît, car les alphabets sont différents selon les langues.

Le navigateur doit donc connaître la langue pour comparer.

Heureusement, les navigateurs modernes prennent en charge la norme d'internationalisation ECMA-402.

Il fournit une méthode spéciale pour comparer des chaînes dans différentes langues, en suivant leurs règles.

L'appel str.localeCompare(str2) renvoie un entier indiquant si str est inférieur, égal ou supérieur à str2 selon les règles du langage :

• Renvoie un nombre négatif si str est inférieur à str2 .

• Renvoie un nombre positif si str est supérieur à str2 .

• Renvoie 0 s'ils sont équivalents.

Par exemple:

 alert( 'Österreich'.localeCompare('Zélande') ); // -1

Cette méthode a en fait deux arguments supplémentaires spécifiés dans la documentation, ce qui lui permet de spécifier la langue (par défaut extraite de l'environnement, l'ordre des lettres dépend de la langue) et de configurer des règles supplémentaires comme le respect de la casse ou "a" et "á" être traité de la même manière, etc.

Résumé

• Il existe 3 types de devis. Les backticks permettent à une chaîne de s'étendre sur plusieurs lignes et d'intégrer des expressions ${…} .

• Nous pouvons utiliser des caractères spéciaux, comme un saut de ligne n .

• Pour obtenir un caractère, utilisez : [] ou la méthode at .

• Pour obtenir une sous-chaîne, utilisez : slice ou substring .

• Pour mettre en minuscules/majuscules une chaîne, utilisez : toLowerCase/toUpperCase .

• Pour rechercher une sous-chaîne, utilisez : indexOf ou includes/startsWith/endsWith pour des vérifications simples.

• Pour comparer des chaînes selon la langue, utilisez : localeCompare , sinon elles sont comparées par codes de caractères.

Il existe plusieurs autres méthodes utiles dans les chaînes :

• str.trim() – supprime (« coupe ») les espaces du début et de la fin de la chaîne.

• str.repeat(n) – répète la chaîne n fois.

• …et bien plus encore dans le manuel.

Les chaînes ont également des méthodes pour effectuer une recherche/remplacement avec des expressions régulières. Mais c'est un vaste sujet, c'est pourquoi il est expliqué dans une section distincte du didacticiel, Expressions régulières.

De plus, il est désormais important de savoir que les chaînes sont basées sur le codage Unicode et qu'il existe donc des problèmes de comparaison. Vous en apprendrez davantage sur Unicode dans le chapitre Unicode, Éléments internes de String.

Tâches

Mettre le premier caractère en majuscule

importance : 5

Écrivez une fonction ucFirst(str) qui renvoie la chaîne str avec le premier caractère en majuscule, par exemple :

 ucFirst("Jean") == "Jean";

Ouvrez un bac à sable avec des tests.

solution

Nous ne pouvons pas « remplacer » le premier caractère, car les chaînes en JavaScript sont immuables.

Mais nous pouvons créer une nouvelle chaîne basée sur la chaîne existante, avec le premier caractère en majuscule :

 laissez newStr = str[0].toUpperCase() + str.slice(1);

Il y a cependant un petit problème. Si str est vide, alors str[0] est undefined , et comme undefined n'a pas la méthode toUpperCase() , nous aurons une erreur.

La solution la plus simple consiste à ajouter un test pour une chaîne vide, comme ceci :

 fonction ucFirst(str) {
  if (!str) renvoie str ;

  return str[0].toUpperCase() + str.slice(1);
}

alerte( ucFirst("john") ); // John

Ouvrez la solution avec des tests dans un bac à sable.

Vérifier le spam

importance : 5

Écrivez une fonction checkSpam(str) qui renvoie true si str contient 'viagra' ou 'XXX', sinon false .

La fonction doit être insensible à la casse :

 checkSpam('acheter ViAgRA maintenant') == true
checkSpam('xxxxx gratuit') == vrai
checkSpam("lapin innocent") == false

Ouvrez un bac à sable avec des tests.

solution

Pour rendre la recherche insensible à la casse, mettons la chaîne en minuscules, puis recherchons :

 fonction checkSpam(str) {
  laissez lowerStr = str.toLowerCase();

  return lowerStr.includes('viagra') || lowerStr.includes('xxx');
}

alert( checkSpam('acheter ViAgRA maintenant') );
alert( checkSpam('free xxxxx') );
alert( checkSpam("lapin innocent") );

Ouvrez la solution avec des tests dans un bac à sable.

Tronquer le texte

importance : 5

Créez une fonction truncate(str, maxlength) qui vérifie la longueur de la str et, si elle dépasse maxlength – remplace la fin de str par le caractère points de suspension "…" , pour rendre sa longueur égale à maxlength .

Le résultat de la fonction doit être la chaîne tronquée (si nécessaire).

Par exemple:

 truncate("Ce que j'aimerais dire sur ce sujet est :", 20) == "Ce que j'aimerais dire…"

truncate("Salut tout le monde !", 20) == "Salut tout le monde !"

Ouvrez un bac à sable avec des tests.

solution

La longueur maximale doit être maxlength , nous devons donc la couper un peu plus courte, pour laisser de la place aux points de suspension.

Notez qu’il existe en fait un seul caractère Unicode pour les points de suspension. Ce ne sont pas trois points.

 fonction tronquer(str, longueurmax) {
  return (str.length > maxlength) ?
    str.slice(0, maxlength - 1) + '…' : str;
}

Ouvrez la solution avec des tests dans un bac à sable.

Extraire l'argent

importance : 4

Nous avons un coût sous la forme "$120" . Autrement dit : le signe dollar apparaît en premier, puis le chiffre.

Créez une fonction extractCurrencyValue(str) qui extrairait la valeur numérique d'une telle chaîne et la renverrait.

L'exemple :

 alerte( extractCurrencyValue('$120') === 120 ); // vrai

Ouvrez un bac à sable avec des tests.

solution

 fonction extractCurrencyValue(str) {
  return +str.slice(1);
}

Ouvrez la solution avec des tests dans un bac à sable.