TOC

Comment travailler avec des chaînes en JavaScript

introduction

Une * chaîne * est une séquence d’un ou plusieurs caractères pouvant être constitués de lettres, de chiffres ou de symboles. Les chaînes en JavaScript sont des types primitifs data et immuables, ce qui signifie qu’elles ne changent pas.

Comme les chaînes sont la façon dont nous affichons et travaillons avec le texte, et le texte est notre principal moyen de communication et de compréhension par le biais des ordinateurs, les chaînes sont l’un des concepts les plus fondamentaux de la programmation à connaître.

Dans cet article, nous allons apprendre à créer et afficher la sortie des chaînes, à concaténer des chaînes, à stocker des chaînes dans des variables et aux règles d’utilisation des guillemets, des apostrophes et des nouvelles lignes dans des chaînes en JavaScript.

Création et affichage de la sortie de chaînes

En JavaScript, il existe trois manières d’écrire une chaîne: elles peuvent être écrites entre guillemets simples (+ '' +), guillemets doubles (" ") ou backticks (+ \ \ + ). Le type de citation utilisé doit correspondre des deux côtés. Toutefois, il est possible que les trois styles puissent être utilisés dans le même script.

Les chaînes utilisant des guillemets doubles et des guillemets simples sont en réalité les mêmes. En l’absence de convention ou de préférence officielle pour les chaînes à une ou deux chaînes, tout ce qui compte est de rester cohérent dans les fichiers de programme du projet.

'This string uses single quotes.';
"This string uses double quotes.";

Le troisième et dernier moyen de créer une chaîne s’appelle un * template literal *. Les littéraux de modèle utilisent le backtick (également appelé accent grave) et fonctionnent de la même manière que les chaînes ordinaires avec quelques bonus supplémentaires, que nous couvrirons dans cet article.

`This string uses backticks.`;

Le moyen le plus simple d’afficher le résultat d’une chaîne est de l’imprimer sur la console, avec + console.log () +:

console.log("This is a string in the console.");
OutputThis is a string in the console.

Un autre moyen simple de générer une valeur consiste à envoyer une alerte contextuelle au navigateur avec + alert () +:

alert("This is a string in an alert.");

L’exécution de la ligne ci-dessus produira le résultat suivant dans l’interface utilisateur du navigateur:

image: https: //assets.digitalocean.com/articles/eng_javascript/js-strings/js-alert-string-output.png [Sortie de chaîne d’alerte JavaScript]

+ alert () + est une méthode moins courante de test et d’affichage de la sortie, car il peut rapidement devenir fastidieux de fermer les alertes.

Stocker une chaîne dans une variable

Les variables en JavaScript sont des conteneurs nommés qui stockent une valeur, en utilisant les mots-clés + var +, + const + ou + let +. Nous pouvons affecter la valeur d’une chaîne à une variable nommée.

const newString = "This is a string assigned to a variable.";

Maintenant que la variable + newString + contient notre chaîne, nous pouvons la référencer et l’imprimer sur la console.

console.log(newString);

Ceci affichera la valeur de la chaîne.

OutputThis is a string assigned to a variable.

En utilisant des variables pour remplacer des chaînes, nous n’avons pas à retaper une chaîne à chaque fois que nous voulons l’utiliser, ce qui nous simplifie la tâche pour utiliser et manipuler des chaînes dans nos programmes.

Concaténation de cordes

  • Concaténation * signifie joindre deux ou plusieurs chaînes pour créer une nouvelle chaîne. Afin de concaténer, nous utilisons l’opérateur de concaténation, représenté par un symbole `. Le symbole ` est également l’opérateur addition lorsque utilisé avec des opérations arithmétiques.

Créons une instance simple de concaténation, entre " Mer " et " cheval ".

"Sea" + "horse";
OutputSeahorse

La concaténation joint les chaînes de bout en bout pour les combiner et générer une nouvelle valeur de chaîne. Si nous souhaitons un espace entre les mots + Sea et` + chevaux`, nous aurions besoin d’inclure un caractère d’espacement dans l’une des chaînes:

"Sea " + "horse";
OutputSea horse

Nous joignons des chaînes et des variables contenant des valeurs de chaîne avec concaténation.

const poem = "The Wide Ocean";
const author = "Pablo Neruda";

const favePoem = "My favorite poem is " + poem + " by " + author ".";
OutputMy favorite poem is The Wide Ocean by Pablo Neruda.

Lorsque nous combinons deux chaînes ou plus par concaténation, nous créons une nouvelle chaîne que nous pouvons utiliser tout au long de notre programme.

Variables dans des chaînes avec des littéraux de modèle

Une fonctionnalité spéciale de la fonctionnalité de modèle littéral est la possibilité d’inclure des expressions et des variables dans une chaîne. Au lieu d’avoir à utiliser la concaténation, nous pouvons utiliser la syntaxe + $ {} + pour insérer une variable.

const poem = "The Wide Ocean";
const author = "Pablo Neruda";

const favePoem = `My favorite poem is ${poem} by ${author}.`;
OutputMy favorite poem is The Wide Ocean by Pablo Neruda.

Comme nous pouvons le constater, l’inclusion d’expressions dans les littéraux de modèle est un autre moyen d’obtenir le même résultat. Dans ce cas, l’utilisation de littéraux de modèle peut être plus facile à écrire et plus pratique.

Littéraux de chaîne et valeurs de chaîne

Vous remarquerez peut-être que les chaînes que nous écrivons dans le code source sont entourées de guillemets ou de guillemets, mais la sortie imprimée proprement dite n’inclut aucune citation.

"Beyond the Sea";
OutputBeyond the Sea

Il y a une distinction en se référant à chacun de ceux-ci. Un * chaîne littérale * est la chaîne telle qu’elle est écrite dans le code source, y compris les citations. Une * valeur de chaîne * correspond à ce que nous voyons dans la sortie et n’inclut pas les citations.

Dans l’exemple ci-dessus, " Beyond the Sea " est un littéral de chaîne et + Beyond the Sea est une valeur de chaîne.

Escaping Quotes and Apostrophes in Strings

Étant donné que les guillemets sont utilisés pour désigner des chaînes, des considérations spéciales doivent être prises en compte lors de l’utilisation d’apostrophes et de guillemets dans des chaînes. Tenter d’utiliser une apostrophe au milieu d’une chaîne entre guillemets, par exemple, mettra fin à la chaîne et JavaScript tentera d’analyser le reste de la chaîne prévue sous forme de code.

Nous pouvons le voir en essayant d’utiliser une apostrophe dans la contraction + je suis + ci-dessous:

const brokenString = 'I'm a broken string';

console.log(brokenString);
Outputunknown: Unexpected token (1:24)

Il en va de même si vous essayez d’utiliser des guillemets dans une chaîne entre guillemets.

Afin d’éviter qu’une erreur ne soit générée dans ces situations, nous avons quelques options que nous pouvons utiliser:

  • Syntaxe de chaîne opposée

  • Personnages d’échappement

  • Modèles littéraux

Nous allons explorer ces options ci-dessous.

Utilisation de la syntaxe de chaîne alternative

Un moyen facile de contourner les cas isolés de chaînes potentiellement cassées consiste à utiliser la syntaxe de chaîne opposée de celle que vous utilisez actuellement.

Par exemple, les apostrophes dans les chaînes construites avec `+" + `.

"We're safely using an apostrophe in double quotes."

Les guillemets dans les chaînes construites avec + '+.

'Then he said, "Hello, World!"';

En combinant des guillemets simples et doubles, nous pouvons contrôler l’affichage des guillemets et des apostrophes dans nos chaînes. Cependant, lorsque nous travaillons pour utiliser une syntaxe cohérente dans les fichiers de programmation du projet, cela peut être difficile à maintenir dans une base de code.

Utiliser le caractère d’échappement (+ \ +)

Nous pouvons utiliser le caractère d’échappement backslash (+ \ +) pour empêcher JavaScript d’interpréter un guillemet comme la fin de la chaîne.

La syntaxe de + \ '+ sera toujours un guillemet simple, et la syntaxe de `+ \" + `sera toujours un guillemet double, sans crainte de rompre la chaîne.

En utilisant cette méthode, nous pouvons utiliser des apostrophes dans des chaînes construites avec `+" + `.

'We\'re safely using an apostrophe in single quotes.'

Nous pouvons également utiliser des guillemets dans les chaînes construites avec `+" + `.

"Then he said, \"Hello, World!\"";

Cette méthode est un peu plus complexe, mais vous devrez peut-être utiliser à la fois une apostrophe et un guillemet dans la même chaîne, ce qui rendra nécessaire l’échappement.

Utilisation de littéraux de modèles

Les littéraux de modèle sont définis avec des backticks. Par conséquent, les guillemets et les apostrophes peuvent être utilisés en toute sécurité, sans échappement ni considération supplémentaire.

`We're safely using apostrophes and "quotes" in a template literal.`;

En plus de prévenir la nécessité d’échapper des caractères et d’autoriser les expressions incorporées, les littéraux de modèle fournissent également une prise en charge multiligne, ce que nous verrons dans https://www.digitalocean.com/community/tutorials/how-to-work- with-strings-in-javascript # chaînes-longues-et-nouvelles lignes [section suivante].

En alternant syntaxe de chaîne, en utilisant des caractères d’échappement et en utilisant des littéraux de modèle, il existe plusieurs façons de créer une chaîne en toute sécurité.

Cordes longues et nouvelles lignes

Il peut arriver que vous souhaitiez insérer un caractère de nouvelle ligne ou un retour à la ligne dans votre chaîne. Les caractères d’échappement + \ n + ou + \ r + peuvent être utilisés pour insérer une nouvelle ligne dans la sortie du code.

const threeLines = "This is a string\nthat spans across\nthree lines.";
OutputThis is a string
that spans across
three lines.

Cela fonctionne techniquement pour obtenir notre sortie sur plusieurs lignes. Cependant, écrire une très longue chaîne sur une seule ligne deviendra rapidement très difficile à lire et à utiliser. Nous pouvons utiliser l’opérateur de concaténation pour afficher la chaîne sur plusieurs lignes.

const threeLines = "This is a string\n" +
"that spans across\n" +
"three lines.";

Au lieu de concaténer plusieurs chaînes, nous pouvons utiliser le caractère d’échappement + \ + pour échapper à la nouvelle ligne.

const threeLines = "This is a string\n\
that spans across\n\
three lines.";

Afin de rendre le code plus lisible, nous pouvons utiliser des chaînes de caractères de modèle. Celles-ci éliminent le besoin de concaténation ou d’échappement sur les chaînes longues contenant des nouvelles lignes. La chaîne ainsi que les nouvelles lignes seront préservées.

const threeLines = `This is a string
that spans across
three lines.`;
OutputThis is a string
that spans across
three lines.

Il est important de connaître toutes les méthodes de création de nouvelles lignes et de chaînes couvrant plusieurs lignes, car différentes bases de code peuvent utiliser différentes normes.

Conclusion

Dans cet article, nous avons abordé les bases du travail avec des chaînes en JavaScript, notamment la création et l’affichage de littéraux de chaîne à l’aide de guillemets simples et doubles, la création de littéraux de modèle, la concaténation, l’échappement et l’affectation de valeurs de chaîne à des variables.

Related