Aller au contenu

Chaînes JavaScript

En JavaScript, les chaînes de caractères sont utilisées pour stocker et manipuler du texte. Il n’existe pas de type distinct pour un seul caractère. Le format interne des chaînes est toujours UTF-16.

Une chaîne représente zéro ou plusieurs caractères écrits entre guillemets.

Fonctions de chaîne populaires

FunctionDescription
charAt(index)Returns the character at the specified index.
charCodeAt(index)Returns the Unicode of the character at the specified index.
concat(...strings)Concatenates the string arguments to the calling string and returns a new string.
includes(searchString, position)Determines whether the calling string contains the searchString.
indexOf(searchValue, fromIndex)Returns the index of the first occurrence of searchValue in the string, starting the search at fromIndex. Returns -1 if the value is not found.
lastIndexOf(searchValue, fromIndex)Returns the index of the last occurrence of searchValue within the calling string, searching backwards from fromIndex. Returns -1 if the value is not found.
match(regexp)Retrieves the matches when matching a string against a regular expression.
matchAll(regexp)Returns an iterator of all results matching a string against a regular expression, including capturing groups.
repeat(count)Returns a new string consisting of the calling string repeated count times.
replace(searchFor, replaceWith)Replaces the first match of a substring or pattern with a replacement string.
replaceAll(searchFor, replaceWith)Replaces all matches of a substring or pattern with a replacement string.
search(regexp)Searches the string for a match against a regular expression, and returns the index of the match.
slice(startIndex, endIndex)Extracts a section of a string and returns it as a new string, without modifying the original string.
split(separator, limit)Divides a string into an ordered list of substrings, puts these substrings into an array, and returns the array. The division is done by searching for a pattern; where the pattern is provided as the first parameter in the method's call.
startsWith(searchString, position)Determines whether the calling string begins with the characters of searchString.
substring(startIndex, endIndex)Returns the part of the string between the start and end indexes, or to the end of the string.
toLowerCase()Returns the calling string value converted to lowercase.
toUpperCase()Returns the calling string value converted to uppercase.
trim()Trims whitespace from both ends of the string.
trimStart() or trimLeft()Trims whitespace from the beginning of the string.
trimEnd() or trimRight()Trims whitespace from the end of the string.
valueOf()Returns the primitive value of a String object.

À propos des guillemets

Nous pouvons distinguer les guillemets simples, les guillemets doubles et les backticks :

strings in javascript

makefile
let single = 'single-quoted';
let double = "double-quoted"; 
let backticks = `backticks`;

Les guillemets doubles et simples sont identiques. En revanche, les backticks sont différents. Vous pouvez les utiliser pour intégrer n’importe quelle expression dans la chaîne en l’encadrant avec ${…} comme suit :

Strings in javascript

Output appears here after Run.

L’un des avantages les plus importants des backticks est qu’ils permettent à une chaîne de s’étendre sur plusieurs lignes, comme ceci :

Strings in javascript

Output appears here after Run.

Mais notez que les guillemets simples et doubles fonctionneront alors dans ce cas. Si vous les utilisez en essayant d’appliquer plusieurs lignes, une erreur se produira :

strings in javascript

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

Les guillemets simples et doubles sont apparus avant les backticks. Ainsi, les backticks sont plus fonctionnels.

Vous pouvez également spécifier une « fonction de modèle » avant le premier backtick. La syntaxe ressemblera à ceci :

strings in javascript

makefile
func `string`

En règle générale, la fonction func est appelée automatiquement. Elle reçoit à la fois la chaîne et les expressions intégrées, qu’elle traite. Grâce à cette fonctionnalité, vous pouvez rapidement implémenter un système de modèles personnalisé. Quoi qu’il en soit, les développeurs l’utilisent rarement en pratique.

Caractères spéciaux

Vous pouvez créer des chaînes multilignes avec des guillemets doubles et simples à l’aide de \n, comme ceci :

Strings in javascript

Output appears here after Run.

Il existe d’autres caractères spéciaux moins courants.

Trouvez-en quelques-uns dans la liste ci-dessous :

  • \', \" ces caractères spéciaux sont utilisés pour les guillemets
  • \r - retour chariot. Ce caractère est désormais utilisé seul. Une combinaison de deux caractères \r\n est utilisée pour représenter un saut de ligne dans les fichiers texte Windows.
  • \\ - antislash
  • \t - tabulation
  • \xXX - caractère Unicode avec un code hexadécimal Unicode particulier XX
  • \uXXXX - c’est un symbole Unicode avec le code hexadécimal XXXX en encodage UTF-16. Il doit comporter exactement 4 chiffres.

Voici des exemples avec des unicodes :

Unicode strings in javascript

Output appears here after Run.

Gardez à l’esprit que tous les caractères spéciaux commencent par un antislash. On l’appelle aussi « caractère d’échappement ».

Vous pouvez aussi l’utiliser si vous souhaitez mettre un guillemet dans la chaîne.

Voici un exemple :

Strings in javascript

Output appears here after Run.

Notez également que l’antislash est principalement utilisé pour corriger la lecture de la chaîne par JavaScript, après quoi il disparaît. Dans la mémoire de la chaîne, vous ne pouvez trouver aucun \ . Mais lorsque vous devez afficher un antislash réel dans la chaîne, vous devez le doubler comme dans cet exemple :

Strings in javascript

Output appears here after Run.

La longueur de la chaîne

La propriété length est utilisée pour déterminer la longueur d’une chaîne :

Strings length in javascript

Output appears here after Run.

Gardez à l’esprit que \n est un caractère spécial. Par conséquent, la longueur doit être 7.

Parfois, les développeurs se trompent en appelant str.length() au lieu de simplement str.length. Cela ne fonctionnera pas.

Accéder aux caractères

Les crochets [pos] sont principalement utilisés pour obtenir un caractère à une position [pos]. Vous pouvez aussi le faire en appelant la méthode str.charAt(pos). Le tout premier caractère commence à zéro :

Character at a position strings in javascript

Output appears here after Run.

Les développeurs modernes préfèrent utiliser les crochets, tandis que charAt est rarement utilisé

Les chaînes sont immuables

Il n’est pas possible de modifier les chaînes en JavaScript. Regardez cet exemple pour vous assurer que cela ne fonctionnera pas :

Change character at a position strings in javascript

Output appears here after Run.

La pratique courante consiste à créer une toute nouvelle chaîne et à l’assigner à str au lieu de l’ancienne, comme ceci :

Character at a position strings in javascript

Output appears here after Run.

Changement de casse

Nous pouvons distinguer deux méthodes de changement de casse. Les voici :

toUpperCase change strings in javascript

Output appears here after Run.

Dans un autre scénario, si un seul caractère doit être en minuscules, utilisez cette méthode :

toLowerCase change strings in javascript

Output appears here after Run.

Recherche d’une sous-chaîne

Découvrons les façons de rechercher une sous-chaîne à l’intérieur d’une chaîne.

str.indexOf

C’est la première méthode utilisée pour rechercher substr dans str. Elle commence à partir de la position particulière pos et renvoie cette position lorsque la correspondance est trouvée, ou -1 si rien n’est trouvé.

Voyons l’exemple suivant :

Index strings in javascript

Output appears here after Run.

str.lastIndexOf(substr, position)

Cette méthode recherche de la fin d’une chaîne vers le début. Les occurrences seront listées dans l’ordre inverse.

Considérez une légère difficulté avec indexOf dans le test if. On ne peut pas le mettre dans if de cette manière :

Index strings in javascript

Output appears here after Run.

Il faut donc vérifier -1, comme suit :

Index strings in javascript

Output appears here after Run.

Includes, startsWith, endsWith

La méthode plus moderne str.includes(substr, pos) est capable de renvoyer true/false selon la présence de substr dans str.

Agissez comme dans l’exemple, si vous devez tester la correspondance sans avoir besoin de sa position en même temps :

Includes strings in javascript

Output appears here after Run.

Le deuxième argument de str.includes est la position à partir de laquelle vous commencez la recherche. Voici un exemple :

Includes strings in javascript

Output appears here after Run.

Obtenir une sous-chaîne

JavaScript inclut trois méthodes pour obtenir une sous-chaîne : substring, substr et slice.

str.slice(start [, end])

Cette méthode est utilisée pour renvoyer la partie de la chaîne de start à end.

Par exemple :

The slice method in javascript strings

Output appears here after Run.

Si un deuxième argument est absent, slice ira jusqu’à la fin, comme ceci :

Slice in javascript strings

Output appears here after Run.

Pour start/end, vous pouvez aussi utiliser des valeurs négatives.

Par exemple :

The slice in javascript strings

Output appears here after Run.

str.substring(start [, end])

Cette méthode est utilisée pour renvoyer la partie de la chaîne comprise entre start et end.

Elle ressemble beaucoup à slice. La différence la plus notable est que, dans le cadre de cette méthode, start peut être supérieur à end.

Par exemple :

The substring in javascript strings

Output appears here after Run.

str.substr(start [, length])

Cette méthode renvoie la partie de la chaîne à partir de start, avec une longueur particulière. Elle diffère des méthodes précédentes. Cette méthode vous aide à spécifier la length au lieu de la position de fin.

Par exemple :

The substr in javascript strings

Output appears here after Run.

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

The substr in javascript strings

Output appears here after Run.

Comparaison des chaînes

Il est essentiel de savoir que les chaînes doivent être comparées caractère par caractère, dans l’ordre alphabétique.

Il serait également préférable de prendre en compte les caractéristiques suivantes :

  1. Une minuscule est plus grande qu’une majuscule, comme ceci :

Comparison in javascript strings

Output appears here after Run.
  1. Les lettres contenant des signes diacritiques sont considérées comme « hors ordre ». Par exemple :

Comparison in javascript strings

Output appears here after Run.

Maintenant, commençons à examiner la représentation interne des chaînes en JavaScript.

En JavaScript, nous encodons toutes les chaînes en UTF-16. Cela signifie que chacun des caractères possède un code numérique approprié.

str.codePointAt(pos)

Il est utilisé pour renvoyer le code du caractère à la position pos :

Return the code for the character at position javascript string

Output appears here after Run.

String.fromCodePoint(code)

Crée un caractère à partir du code numérique :

Character's numeric code javascript string

Output appears here after Run.

Les caractères Unicode peuvent aussi être ajoutés par leurs codes en appliquant \u suivi du code hexadécimal.

Par exemple :

Unicode characters javascript string

Output appears here after Run.

Voyons les caractères dont les codes sont 65..220 et formons une chaîne avec eux :

Unicode characters javascript string

Output appears here after Run.

Ici, vous pouvez remarquer que les caractères majuscules viennent en premier, puis plusieurs caractères spéciaux, et enfin, Ö à la fin de la sortie.

Practice

What are some characteristics or functions of strings in JavaScript as described in the article?

Trouvez-vous cela utile?

Aperçu dual-run — comparez avec les routes Symfony en production.