Formatage du texte

Ce chapitre illustre le fonctionnement des chaînes de caractères et du texte en JavaScript.

Les chaînes de caractères

Le type String permet d'utiliser des objets pour représenter des valeurs utilisant le type primitif pour les chaînes de caractères. Un objet de type String est un ensemble d'élément de valeurs non signées sur 16 bits et chacun de ces éléments occupe une position dans la chaîne de caractères. Le premier élément de la chaîne se situe à l'indice 0, le suivant à l'indice 1 et ainsi de suite. La longueur d'une chaîne de caractères correspond au nombre d'éléments qu'elle contient. Il est possible de créer des chaînes de caractères avec une notation littérale ou avec des objets.

Les littéraux de chaînes de caractères

On peut créer des chaînes de caractères en utilisant simplement des quotes simples ou des doubles quotes :

'toto'
"truc"

Pour des chaînes plus complexes, on pourra utiliser des séquences d'échappement.

Les séquences d'échappement hexadécimales

Le nombre situé après le préfixe \x sera interprété comme un nombre hexadécimal :

'\xA9' // "©"

Les séquences d'échappement Unicode

On peut aussi utiliser des séquences d'échappement avec quatres caractères préfixés par \u.

'\u00A9' // "©"

L'échappement de codets Unicode

Avec ECMAScript 6, il est possible d'échapper des codets Unicode. Ainsi, n'importe quel caractère peut être échappé avec des nombres hexadécimaux et on peut représenter des caractères dont le code Unicode va jusqu'à 0x10FFFF. Avec les séquences d'échappement Unicode vues ci-avant, il aurait fallu échapper chacun des demi-codets pour certains caractères (surrogates).

'\u{2F804}'

// La même avec des échappements Unicode "simples"
'\uD87E\uDC04'

Les objets String

L'objet String est une « enveloppe » (wrapper) objet autour du type primitif pour les chaînes de caractères.

var s1 = "toto"; // crée une valeur primitive qui est une chaîne
var s2 = new String("toto"); // crée un objet String
console.log(s1); // Affiche "toto" dans la console
typeof s1;       // Renvoie "string"
console.log(s2); // Affiche String ["t", "o", "t", "o"]
typeof s2;       // Renvoie 'object'

Chacune des méthodes de l'objet String peut être appelée sur une valeur littérale (primitive) : le moteur JavaScript convertit automatiquement le littéral en un objet String temporaire, appelle la méthode et supprime l'objet String temporaire. On peut aussi utiliser la propriété String.length sur un littéral de chaîne de caractères.

De façon générale, on utilisera les littéraux (les valeurs avec le type primitif) sauf dans le cas où on a spécifiquement besoin d'un objet String. En effet, utiliser un objet String peut parfois avoir des effets contre-intuitifs :

var s1 = "2 + 2"; // crée une chaîne primitive
var s2 = new String("2 + 2"); // crée un objet String
eval(s1); // renvoie le nombre 4
eval(s2); // renvoie la chaîne "2 + 2"

Un objet String possède une seule propriété qui n'est pas une méthode : length qui indique le nombre de caractères que contient la chaîne de caractères. Par exemple, le fragment de code suivant affecte la valeur 14 à la variable x car la chaîne "Coucou monde !" contient 14 caractères. On peut accéder à chaque caractère d'une chaîne mais on ne peut pas modifier les caractères d'une chaîne car ce sont des objets immuables :

var maChaîne = "Coucou monde !";
var x = maChaîne.length;
maChaîne[0] = 'L'; // Cela n'a aucun effet
maChaîne[0]; // Cela renvoie "C"

Le tableau suivant liste les méthodes des objets String.

Méthodes de String

Les littéraux de gabarits

Les littéraux de gabarits sont des littéraux qui permettent d'intégrer des expressions. Il est possible d'utiliser des littéraux sur plusieurs lignes ainsi que des fonctionnalités d'interpolation de chaînes avec ces gabarits.

Les littéraux de gabarits sont encadrés entre des accents graves (ou backticks en anglais) (` `) et non entre des quotes (simples ou doubles). Les gabarits peuvent contenir des emplacements d'interpolation, ceux-ci sont indiqués par des '$' et des accolades '{' (${expression}).

Chaînes sur plusieurs lignes

Les nouvelles lignes insérées dans les gabarits font partie de la chaîne. En utilisant les littéraux classiques, il aurait fallu utiliser la syntaxe suivante :

console.log("chaîne ligne 1\n\
chaîne ligne 2");
// "chaîne ligne 1
// chaîne ligne 2"

Avec les gabarits, on peut désormais écrire :

console.log(`chaîne ligne 1
chaîne ligne 2`);
// "chaîne ligne 1
// chaîne ligne 2"

Expressions intégrées

Pour intégrer des expressions dans un littéral de chaîne classique, on utiliserait la syntaxe suivante :

var a = 5;
var b = 10;
console.log("Quinze est " + (a + b) + " et\npas " + (2 * a + b) + ".");
// "Quinze est 15 et
// pas 20."

Désormais, avec les gabarits, on peut tirer partie du sucre syntaxique pour rendre les substitutions plus lisibles :

var a = 5;
var b = 10;
console.log(`Quinze est ${a + b} et\npas ${2 * a + b}.`);
// "Quinze est 15 et
// pas 20."

Pour plus d'informations, voir la page sur les littéraux de gabarits de la référence JavaScript.

Internationalisation

L'objet Intl est un espace de noms pour l'API d'internationalisation d'ECMAScript. Cette API fournit des fonctionnalités pour comparer des chaînes, des nombres, des dates et heures en prenant compte les différentes langues. Les constructeurs Collator, NumberFormat et DateTimeFormat sont des propriétés de l'objet Intl.

La mise en forme de la date et de l'heure

L'objet DateTimeFormat peut être utilisé afin de mettre en forme les dates et heures. Les  différents formats suivants sont applicables pour l'anglais américain (le résultat sera différent en fonction du fuseau horaire).

var msPerDay = 24 * 60 * 60 * 1000;
 
// July 17, 2014 00:00:00 UTC.
var july172014 = new Date(msPerDay * (44 * 365 + 11 + 197));

var options = { year: "2-digit", month: "2-digit", day: "2-digit",
                hour: "2-digit", minute: "2-digit", timeZoneName: "short" };
var americanDateTime = new Intl.DateTimeFormat("en-US", options).format;
 
console.log(americanDateTime(july172014)); // 07/16/14, 5:00 PM PDT

La mise en forme des nombres

L'objet NumberFormat permet de mettre en forme les valeurs numériques et notamment les devises :

var gasPrice = new Intl.NumberFormat("en-US",
                        { style: "currency", currency: "USD",
                          minimumFractionDigits: 3 });
 
console.log(gasPrice.format(5.259)); // $5.259

var hanDecimalRMBInChina = new Intl.NumberFormat("zh-CN-u-nu-hanidec",
                        { style: "currency", currency: "CNY" });
 
console.log(hanDecimalRMBInChina.format(1314.25)); // ￥ 一,三一四.二五

La collation

L'objet Collator peut être utilisé pour comparer et ordonner des chaînes de caractères.

Par exemple, l'allemand utilise deux relations d'ordre pour trier les chaînes, une pour le dictionnaire et une pour l'annuaire. Celle pour l'annuaire se base sur les sons et "ä", "ö", et autres sont étendues en "ae", "oe", avant le tri :

var noms = ["Hochberg", "Hönigswald", "Holzman"];
 
var annuaireAllemand = new Intl.Collator("de-DE-u-co-phonebk");
 
// trie ["Hochberg", "Hoenigswald", "Holzman"]:
console.log(noms.sort(annuaireAllemand.compare).join(", "));
// affiche "Hochberg, Hönigswald, Holzman"

Certains mots allemands utilisent des umlauts et l'ordre du dictionnaire ignore les umlauts pour le tri des chaînes (sauf si celles-ci ne diffèrent que par les umlauts comme schon qui est trié avant schön).

var dicoAllemand = new Intl.Collator("de-DE-u-co-dict");
 
// trie ["Hochberg", "Honigswald", "Holzman"]:
console.log(nom.sort(dicoAllemand.compare).join(", "));
// affiche "Hochberg, Holzman, Hönigswald"

Pour plus d'informations sur l'API Intl, voir également la page d'introduction à l'API d'internationalisation de JavaScript.

Les expressions rationnelles

Les expressions rationnelles (parfois appelées regexp) sont des motifs utilisés pour reconnaître des correspondances dans une chaînes de caractères. Les expressions rationnelles peuvent devenir un outil complexe et puissant, elles sont décrites plus en avant dans les pages suivantes :

• Les expressions rationnelles en JavaScript, le chapitre du guide JavaScript.
• La documentation sur l'objet RegExp.