Comment formater une chaîne en JavaScript ?

En JavaScript, une chaîne est un groupe de caractères délimités par une paire de guillemets simples ou doubles. Il existe de nombreuses façons de formater des chaînes en JavaScript.

Vous pouvez utiliser des méthodes ou des opérateurs spécifiques pour combiner des chaînes. Vous pouvez même effectuer des opérations spécifiques pour décider quelle chaîne apparaît où et quand.

Apprenez à formater vos chaînes JavaScript à l'aide de méthodes de concaténation et de modèles littéraux.

Concaténation de chaînes

JavaScript vous permet de concaténer des chaînes en utilisant plusieurs approches. Une approche utile est la concat()

const prenom = "John";
const nom_de_famille = "Biche";
laisser chaîneVal ;
stringVal = firstName.concat("", nom de famille);
console.log (stringVal);

Ici, concat joint les arguments de chaîne (un espace vide et lastName) à la chaîne d'appel (firstName). Le code stocke ensuite la nouvelle chaîne résultante dans une variable (stringVal) et imprime la nouvelle valeur sur la console du navigateur:

Une autre façon de concaténer une collection de chaînes consiste à utiliser l'opérateur plus. Cette méthode vous permet de combiner des variables de chaîne et des littéraux de chaîne pour créer de nouvelles chaînes.

const prenom = "John";
const middleName = "Mike";
const nom_de_famille = "Biche";
laisser chaîneVal ;
chaîneVal = prénom + "" + deuxième prénom + "" + nom ;
console.log (stringVal);

Le code ci-dessus imprime la sortie suivante sur la console :

Une troisième approche pour concaténer vos chaînes JavaScript nécessite l'utilisation d'un signe plus et égal. Cette méthode vous permet d'ajouter une nouvelle chaîne à la fin d'une chaîne existante.

const prenom = "John";
const nom_de_famille = "Biche";
laisser chaîneVal ;
chaîneVal = prénom;
chaîneVal += "";
chaîneVal += nom;
console.log (stringVal);

Ce code ajoute un espace vide et la valeur de la variable lastName à la variable firstName, produisant la sortie suivante :

Modèles littéraux

Les modèles littéraux sont une fonctionnalité ES6 qui vous permet de formater des chaînes JavaScript. Un modèle littéral utilise une paire de backticks (`) pour afficher les chaînes. Cette méthode de formatage de chaîne vous permet d'afficher des chaînes multilignes plus propres en JavaScript.

laisser html ;
html = `<ul>
<li> Nom: John Doe </li>
<li> Âge: 24 </li>
<li> Poste: Ingénieur logiciel </li>
</ul>`;
document.body.innerHTML = html;

Le code JavaScript ci-dessus utilise HTML pour imprimer une liste de trois éléments dans le navigateur :

Pour obtenir le même résultat sans littéraux de modèle (ou avant les littéraux de modèle), vous devez utiliser des guillemets. Cependant, vous ne pourrez pas étendre le code sur plusieurs lignes comme vous le pouvez avec les littéraux de modèle.

laisser html ;
html = "<ul><li>Nom: John Doe</li><li>Âge: 24</li><li>Poste: Ingénieur logiciel</li></ul>";
document.body.innerHTML = html;

Interpolation de chaîne

Les modèles littéraux vous permettent d'utiliser des expressions dans vos chaînes JavaScript via un processus appelé interpolation. Avec l'interpolation de chaîne, vous pouvez intégrer des expressions ou des variables dans vos chaînes à l'aide de la ${expression} espace réservé. C'est là que la valeur des littéraux de modèle JavaScript devient vraiment évidente.

laisser userName = "Jane Doe";
laisser âge = 21;
laisser job = "Développeur web";
laisser expérience = 3;
laisser html ;
html = `<ul>
<li> Nom: ${userName} </li>
<li> Âge: ${âge} </li>
<li> Intitulé du poste: ${job} </li>
<li> Années d'expérience: ${expérience} </li>
<li> Niveau développeur: ${expérience < 5? "Junior à Intermédiaire": "Senior"} </li>
</ul>`;
document.body.innerHTML = html;

Le code ci-dessus produit le résultat suivant dans la console :

Les quatre premiers arguments du ${expression} les espaces réservés sont des variables de chaîne, mais le cinquième est une expression conditionnelle. L'expression s'appuie sur la valeur de l'une des variables (expérience) pour dicter ce qu'elle doit afficher dans le navigateur.

Mise en forme des éléments sur votre page Web avec JavaScript

Outre son association fonctionnelle avec le développement de pages Web, JavaScript fonctionne avec HTML pour influencer la conception et la mise en page d'une page Web. Il peut manipuler le texte qui apparaît sur une page Web, comme c'est le cas avec les modèles littéraux.

Il peut même convertir du HTML en images et les afficher sur une page Web.