Home-theater-designers
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.
UTILISEZ LA VIDÉO DU JOUR
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() méthode. Cette méthode utilise deux chaînes ou plus. Il utilise une seule chaîne d'appel et prend une ou plusieurs chaînes comme arguments.
const firstName = "John";
const lastName = "Doe";
let stringVal;
stringVal = firstName.concat(" ", lastName);
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 firstName = "John";
const middleName = "Mike";
const lastName = "Doe";
let stringVal;
stringVal = firstName + " " + middleName + " " + lastName;
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 firstName = "John";
const lastName = "Doe";
let stringVal;
stringVal = firstName;
stringVal += " ";
stringVal += lastName;
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.
let html;
html = `<ul>
<li> Name: John Doe </li>
<li> Age: 24 </li>
<li> Job: Software Engineer </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.
let html;
html = "<ul><li>Name: John Doe</li><li>Age: 24</li><li>Job: Software Engineer</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.
let userName = "Jane Doe";
let age = 21;
let job = "Web Developer";
let experience = 3;
let html;
html = `<ul>
<li> Name: ${userName} </li>
<li> Age: ${age} </li>
<li> Job Title: ${job} </li>
<li> Years of Experience: ${experience} </li>
<li> Developer Level: ${experience < 5 ? "Junior to Intermediate" : "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.
déverrouiller mon téléphone gratuitement en ligne
Il peut même convertir du HTML en images et les afficher sur une page Web.