Strings

En JavaScript, les donnes de type texte sont stockes sous forme de chanes de caractres. Il ny a pas de type spar pour un seul caractre.

Le format interne des chanes de caractres est toujours UTF-16, il nest pas li au codage de la page.

Quotes

Rappelons les types de quotes.

Les chanes de caractres peuvent tre places entre guillemets simples, doubles ou backticks :

let single = 'single-quoted';
let double = "double-quoted";

let backticks = `backticks`;

Les guillemets simples et doubles sont essentiellement les mmes. Les backticks nous permettent toutefois dincorporer nimporte quelle expression dans la chane de caractres, en lenveloppant dans ${} :

function sum(a, b) {
  return a + b;
}

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

Lutilisation des backticks prsente galement lavantage de permettre une chane de caractres de couvrir plusieurs lignes :

let guestList = `Guests:
 * John
 * Pete
 * Mary
`;

alert(guestList); // une liste d'invits sur plusieurs lignes

a a lair naturel, non? Mais les guillemets simples ou doubles ne fonctionnent pas de cette faon.

Si nous les utilisons et essayons dutiliser plusieurs lignes, il y aura une erreur :

let guestList = "Guests: // Error: Unexpected token ILLEGAL
  * John";

Les guillemets simples et doubles proviennent danciens temps de la cration linguistique lorsque la ncessit de chanes multilignes ntait pas prise en compte. Les backticks sont apparus beaucoup plus tard et sont donc plus polyvalents.

Les backticks nous permettent galement de spcifier un modle de fonction avant le premier backtick. La syntaxe est la suivante : func`string`. La fonction func est appele automatiquement, elle reoit la chane de caractres et les expressions incorpores et peut les traiter. Cette fonctionnalit est appele tagged templates, elle est rarement vue, mais vous pouvez en savoir plus ce sujet dans la doc MDN : Template literals.

Caractres spciaux

Il est encore possible de crer des chanes de caractres multilignes avec des guillemets simples et doubles en utilisant un caractre de nouvelle ligne, crit comme ceci \n, qui spcifie un saut de ligne :

let guestList = "Guests:\n * John\n * Pete\n * Mary";

alert(guestList); // une liste d'invits multiligne, pareil qu'au dessus

Comme exemple plus simple, ces deux lignes sont gales, juste crites diffremment :

let str1 = "Hello\nWorld"; // deux lignes utilisant un "symbole de nouvelle ligne"

// deux lignes utilisant une nouvelle ligne normale et des backticks
let str2 = `Hello
World`;

alert(str1 == str2); // true

Il existe dautres caractres spciaux moins courants.

Voici la liste complte :

Comme vous pouvez le voir, tous les caractres spciaux commencent par un backslash (barre oblique inverse) \. On lappelle aussi caractre dchappement.

Parce que cest si spcial, si nous devons afficher une vritable barre oblique inverse \ dans la chane, nous devons la doubler:

alert( `The backslash: \\` ); // The backslash: \

Les guillemets dits chapps \', \", \` sont utiliss pour insrer un guillemet dans la mme chane entre guillemets.

Par exemple :

alert( 'I\'m the Walrus!' ); // I'm the Walrus!

Comme vous pouvez le constater, nous devons prcder le simple quote intrieure du backslash \', sinon, cela indiquerait la fin de la chane de caractres.

Bien sr, il ne faut chapper que les guillemets identiques ceux qui les entourent. Donc, comme solution plus lgante, nous pourrions passer aux guillemets doubles ou aux backticks :

alert( "I'm the Walrus!" ); // I'm the Walrus!

Outre ces caractres spciaux, il existe galement une notation spciale pour les codes Unicode \u, elle est rarement utilise et est couverte dans le chapitre facultatif sur Unicode.

Longueur de chane de caractres

La proprit length indique la longueur de la chane de caractres :

alert( `My\n`.length ); // 3

Notez que \n est un seul caractre spcial, la longueur est donc bien 3.

Accder aux caractres

Pour obtenir un caractre la position pos, utilisez des crochets [pos] ou appelez la mthode str.at(pos). Le premier caractre commence la position zro :

let str = `Hello`;

// le premier caractre
alert( str[0] ); // H
alert( str.at(0) ); // H

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

Comme vous pouvez le voir, la mthode .at(pos) a lavantage de permettre une position ngative. Si pos est ngatif, alors il est compt partir de la fin de la chane de caractres.

Donc .at(-1) signifie le dernier caractre, et .at(-2) est celui qui le prcde, etc.

Les crochets renvoient toujours undefined pour les index ngatifs, par exemple:

let str = `Hello`;

alert( str[-2] ); // undefined
alert( str.at(-2) ); // l

Nous pouvons galement parcourir les caractres en utilisant un for..of :

for (let char of "Hello") {
  alert(char); // H,e,l,l,o (char devient "H", ensuite "e", ensuite "l", etc.)
}

Les chanes de caractres sont immuables

Les chanes de caractres ne peuvent pas tre changes en JavaScript. Il est impossible de modifier un caractre.

Essayons de dmontrer que cela ne fonctionne pas :

let str = 'Hi';

str[0] = 'h'; // error
alert( str[0] ); // ne fonctionne pas

La solution habituelle consiste crer une nouvelle chane et laffecter str au lieu de lancienne.

Par exemple :

let str = 'Hi';

str = 'h' + str[1];  // remplace la haine de caractres

alert( str ); // hi

Nous verrons plus dexemples dans les sections suivantes.

Modifier la casse

Les mthodes toLowerCase() et toUpperCase() modifient la casse :

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

Ou, si nous voulons un seul caractre minuscule :

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

Rechercher un substring (partie de la chane de caractres)

Il existe plusieurs faons de rechercher une partie dune chane de caractres.

str.indexOf

La premire mthode est str.indexOf(substr, pos).

Il cherche le substr dans str, en partant de la position donne pos, et retourne la position o la correspondance a t trouve ou -1 si rien ne peut tre trouv.

Par exemple :

let str = 'Widget with id';

alert( str.indexOf('Widget') ); // 0, parce que 'Widget' est trouv au dbut
alert( str.indexOf('widget') ); // -1, pas trouv, la recherche est sensible  la casse

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

Le second paramtre optionnel nous permet de rechercher partir de la position donne.

Par exemple, la premire occurrence de "id" est la position 1. Pour rechercher loccurrence suivante, commenons la recherche partir de la position 2 :

let str = 'Widget with id';

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

Si toutes les occurrences nous intressent, nous pouvons excuter indexOf dans une boucle. Chaque nouvel appel est pass avec la position aprs le match prcdent :

let str = 'As sly as a fox, as strong as an ox';

let target = 'as'; // cherchons le

let pos = 0;
while (true) {
  let foundPos = str.indexOf(target, pos);
  if (foundPos == -1) break;

  alert( `Found at ${foundPos}` );
  pos = foundPos + 1; // continue la recherche  partir de la position suivante
}

Le mme algorithme peut tre raccourci :

let str = "As sly as a fox, as strong as an ox";
let target = "as";

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

Il y a un lger inconvnient avec indexOf dans le test if. On ne peut pas le mettre dans le if comme ceci :

let str = "Widget with id";

if (str.indexOf("Widget")) {
    alert("We found it"); // ne fonctionne pas !
}

Lalert dans lexemple ci-dessus ne saffiche pas parce que str.indexOf("Widget") retourne 0 (ce qui signifie quil a trouv la correspondance la position de dpart). Oui, mais if considre que 0 est false.

Nous devrions donc effectuer la vrification avec -1, comme ceci :

let str = "Widget with id";

if (str.indexOf("Widget") != -1) {
    alert("We found it"); // fonctionne maintenant !
}

includes, startsWith, endsWith

La mthode plus moderne str.includes(substr, pos) retourne true/false en fonction de si str contient substr.

Cest le bon choix si nous devons tester la prsence, mais navons pas besoin de sa position :

alert( "Widget with id".includes("Widget") ); // true

alert( "Hello".includes("Bye") ); // false

Le deuxime argument optionnel de str.includes est la position de dpart de la recherche :

alert( "Widget".includes("id") ); // true
alert( "Widget".includes("id", 3) ); // false,  partir de la position 3, il n'y a pas de "id"

Les mthodes str.startsWith et str.endsWith font exactement ce quelle disent :

alert( "Widget".startsWith("Wid") ); // true, "Widget" dmarre avec "Wid"
alert( "Widget".endsWith("get") ); // true, "Widget" fini avec "get"

Obtenir un substring (sous-chane de caractres)

Il existe 3 mthodes en JavaScript pour obtenir un substring : substring, substr et slice.

str.slice(start [, end])

Renvoie la partie de la chane de caractres de start jusqu (sans linclure) end.

Par exemple :

let str = "stringify";
alert( str.slice(0, 5) ); // 'strin', le substring de 0  5 (sans inclure 5)
alert( str.slice(0, 1) ); // 's', de 0  1, mais sans inclure 1, donc uniquement le caractre  l'index 0

Sil ny a pas de second argument, slice va jusqu la fin de la chane de caractres :

let str = "stringify";
alert( str.slice(2) ); // 'ringify',  partir de la 2e position jusqu' la fin

Des valeurs ngatives pour start/end sont galement possibles. Elles veulent dire que la position est compte partir de la fin de la chane de caractres :

let str = "stringify";

// commence  la 4me position  partir de la droite, se termine au 1er  partir de la droite
alert( str.slice(-4, -1) ); // 'gif'

str.substring(start [, end])

Renvoie la partie de la chane de caractres entre start et end (end non inclus).

Cest presque la mme chose que slice, mais cela permet start dtre suprieur end (dans ce cas, il change simplement les valeurs start et end).

Par exemple :

let str = "stringify";

// ce sont les mmes pour substring
alert( str.substring(2, 6) ); // "ring"
alert( str.substring(6, 2) ); // "ring"

// ...mais pas pour slice :
alert( str.slice(2, 6) ); // "ring" (le mme rsultat)
alert( str.slice(6, 2) ); // "" (une chane de caractres vide)

Les arguments ngatifs ne sont pas supports (contrairement slice), ils sont traits comme 0.

str.substr(start [, length])

Renvoie la partie de la chane de caractres partir de start, avec le length (longueur) donn.

Contrairement aux mthodes prcdentes, celle-ci nous permet de spcifier la longueur length au lieu de la position finale :

let str = "stringify";
alert( str.substr(2, 4) ); // 'ring',  partir de la 2me position on obtient 4 caractres

Le premier argument peut tre ngatif, pour compter partir de la fin :

let str = "stringify";
alert( str.substr(-4, 2) ); // 'gi',  partir de la 4me position on obtient 2 caractres

Cette mthode rside dans lAnnexe B de la spcification du langage. Cela signifie que seuls les moteurs JavaScript hbergs par un navigateur doivent le prendre en charge et quil nest pas recommand de lutiliser. En pratique, il est support partout.

Rcapitulons ces mthodes pour viter toute confusion :

Comparer les strings

Comme nous le savons du chapitre Comparaisons, les strings sont compares caractre par caractre dans lordre alphabtique.

Bien que, il y a quelques bizarreries.

1. Une lettre minuscule est toujours plus grande quune majuscule :

   alert( 'a' > 'Z' ); // true

2. Les lettres avec des signes diacritiques sont hors dusage :

   alert( 'sterreich' > 'Zealand' ); // true

   Cela peut conduire des rsultats tranges si nous trions ces noms de pays. Habituellement, les gens sattendent trouver Zealand aprs sterreich dans la liste.

Pour comprendre ce qui se passe, nous devons tre conscients que les chanes de caractres en JavaScript sont encodes en utilisant UTF-16. Cest--dire que chaque caractre a un code numrique correspondant.

Il existe des mthodes spciales qui permettent dobtenir le caractre pour le code et inversement:

str.codePointAt(pos)

Renvoie un nombre dcimal reprsentant le code du caractre la position pos:

// diffrentes lettres majuscules ont des codes diffrents
alert( "Z".codePointAt(0) ); // 90
alert( "z".codePointAt(0) ); // 122
alert( "z".codePointAt(0).toString(16) ); // 7a (si nous avons besoin d'une valeur hexadcimale)

String.fromCodePoint(code)

Cre un caractre par son code chiffre

alert( String.fromCodePoint(90) ); // Z
alert( String.fromCodePoint(0x5a) ); // Z (nous pouvons galement utiliser une valeur hexadcimale comme argument)

Voyons maintenant les caractres avec les codes 65..220 (lalphabet latin et un peu plus) en crant une chane de caractres de ceux-ci :

let str = '';

for (let i = 65; i <= 220; i++) {
  str += String.fromCodePoint(i);
}
alert( str );
// Output:
// ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~
// 

Vous voyez ? Les caractres majuscules sont les premiers, puis quelques spciaux, puis les minuscules, et vers la fin de la sortie.

Maintenant, cela devient vident pourquoi a > Z.

Les caractres sont compars par leur code numrique. Le plus grand code signifie que le caractre est plus grand. Le code pour a (97) est suprieur au code pour Z (90).

• Toutes les lettres minuscules vont aprs les lettres majuscules car leurs codes sont plus grands.
• Certaines lettres comme se distinguent de lalphabet principal. Ici, le code est suprieur tout ce qui va de a z.

Les comparaisons correctes

Lalgorithme appropri pour effectuer des comparaisons de chanes est plus complexe quil ny parat, car les alphabets diffrent dune langue lautre.

Le navigateur doit donc connatre la langue comparer.

Heureusement, les navigateurs modernes prennent en charge la norme dinternationalisation ECMA-402.

Elle fournit une mthode spciale pour comparer des chanes de caractres dans diffrentes langues, en respectant leurs rgles.

Lappel str.localeCompare(str2) renvoie un entier indiquant si str est infrieur, gal ou suprieur str2 selon les rgles du langage :

• Renvoie un nombre ngatif si str est infrieur str2
• Renvoie un nombre positif si str est suprieur str2
• Renvoie 0 sils sont quivalents.

Par exemple :

alert( 'sterreich'.localeCompare('Zealand') ); // -1

Cette mthode a en fait deux arguments supplmentaires spcifis dans la documentation, ce qui lui permet de spcifier la langue (par dfaut, pris dans lenvironnement, lordre des lettres dpend de la langue) et de dfinir des rgles supplmentaires telles que la sensibilit la casse ou doit-on traiter "a" et "" de la mme manire, etc.

Rsum

• Il existe 3 types de quotes. Les backticks permettent une chane de caractres de stendre sur plusieurs lignes et dintgrer des expressions ${}.
• Nous pouvons utiliser des caractres spciaux, comme un saut de ligne \n.
• Pour obtenir un caractre dune string, utilisez [] ou la mthode at.
• Pour obtenir un substring, utilisez slice ou substring.
• Pour mettre une chane de caractres en minuscule ou en majuscule, utilisez toLowerCase ou toUpperCase.
• Pour rechercher un substring, utilisez indexOf, ou includes / startsWith / endsWith pour de simple vrifications.
• Pour comparer les chanes de caractres en fonction de la langue, utilisez la mthode localeCompare, si non ils sont compars par les codes de caractres.

Il existe plusieurs autres mthodes utiles dans les strings :

• str.trim() retire les espaces (trims) du dbut et de la fin de la chane de caractres.
• str.repeat(n) rpte la chane de caractres n fois.
• et plus. Voir le manuel pour plus de dtails.

Les strings ont aussi des mthodes pour rechercher / remplacer avec des expressions rgulires. Mais cest un sujet important, il est donc expliqu dans une autre section de ce tutoriel Expressions rgulires.

De plus, partir de maintenant, il est important de savoir que les chanes de caractres sont bases sur lencodage Unicode, et donc il y a des problmes avec les comparaisons. Il y a plus dinformations sur Unicode dans le chapitre Unicode et fonctionnement des chanes de caractres.