JavaScript Insérer une variable dans une chaîne

1. Utiliser des littéraux de modèle pour insérer une variable dans une chaîne dans JavaScript
2. Utiliser la mise en forme de base pour insérer une variable dans une chaîne dans JavaScript
3. Utilisez sprintf() pour insérer une variable dans une chaîne en JavaScript
4. Conclusion

Cet article présentera comment insérer des variables dans une chaîne en JavaScript.

Utiliser des littéraux de modèle pour insérer une variable dans une chaîne dans JavaScript

Le concept de littéraux de modèle existe depuis un certain temps en JavaScript. Ils étaient auparavant connus sous le nom de chaînes de modèle. Template literals a été introduit dans ES6. Il offre un moyen plus facile d’incorporer des variables dans une phrase donnée que d’avoir à utiliser des concaténations de chaînes encombrantes. Au lieu d’utiliser des guillemets (guillemets doubles ou simples), nous utilisons des modèles de littéraux définis avec les backticks (caractère ` dans le clavier). Nous plaçons la chaîne dans les backticks et incorporons nos variables dans la phrase. Voici les utilisations des littéraux de modèle.

Le simple fait d’inclure une chaîne dans un ensemble d’accrochements en fait une valeur de chaîne. Il a la même fonctionnalité que le fait de contenir le texte de la chaîne entre guillemets ". L’exemple de code suivant décrit une chaîne simple utilisée comme littéral de modèle.

console.log(`Hello World`);

Production:

Hello World

Nous avons une chaîne normale prête. Si nous devons afficher la valeur d’une variable dans cette chaîne, nous devons incorporer des variables. Lors de l’incorporation, nous enveloppons la variable entre accolades avec un signe $ la précédant. La syntaxe pour incorporer la valeur de la variable est ${variableName}. Le morceau de code suivant a la variable eggCount incorporée dans une chaîne habituelle, avec tout ce contenu est encapsulé dans des backticks.

let eggCount = 20;
console.log(`On easter we decorted ${eggCount}` easter eggs);

Production:

On easter we decorted 20 easter eggs

Incorporation d’expressions impliquant des variables

Contrairement à la simple concaténation de chaînes, avec les littéraux de modèle, nous pouvons inclure des expressions avec plus d’une variable, similaire au codage en JavaScript avec les littéraux de modèle. Si nous avons besoin de faire certaines opérations comme la sommation, l’obtention de sous-chaînes, y compris les dates, etc., toutes ces fonctionnalités et bien plus encore peuvent être intégrées dans une chaîne avec des littéraux de modèle. Le jeu de codes suivant a une variété de cas d’utilisation pour ce faire.

let a = 5;
b = 10;
console.log(`Sum of ${a} and ${b} is ${a + b}`);

Production:

Sum of 5 and 10 is 15

Un autre exemple impliquant la date est le suivant. Ici, nous n’utilisons aucune variable, mais les expressions incluses dans les littéraux de modèle fonctionnent d’elles-mêmes. Ce sont les chaînes avec javascript en continu avec l’utilisation des guillemets doubles ou des backticks encore et encore, comme nous le ferions avec des phrases concaténantes:

console.log(`The date today is ${new Date().getDate()}-${
    new Date().getMonth() + 1}-${new Date().getFullYear()}`);

Production:

The date today is 7 - 4 - 2021

Remarques

• Les littéraux de modèle offrent l’un des moyens les plus simples d’incorporer des variables dans une phrase.
• Il offre également un support pour inclure des expressions directement dans la chaîne et laisser le compilateur résoudre les calculs au moment de l’exécution.
• Nous pouvons maintenant facilement inclure des guillemets simples et des guillemets doubles dans une chaîne sans utiliser de caractères d’échappement.
• Les littéraux de modèle rendent le codage simple, concis, soigné et lisible.
• La valeur des littéraux de modèle peut être affectée à une nouvelle variable. Elle peut être considérée comme une nouvelle chaîne contenant les valeurs de vos variables.

Utiliser la mise en forme de base pour insérer une variable dans une chaîne dans JavaScript

Une autre façon d’insérer proprement les valeurs de variable dans notre chaîne consiste à utiliser le formatage de base pris en charge dans JavaScript. En utilisant le JavaScript console.log(), nous pouvons éviter la concaténation et ajouter des espaces réservés dans la chaîne ciblée. Les valeurs à affecter sont transmises en tant qu’arguments comme indiqué ci-dessous.

let a = 5;
b = 10;
console.log('Sum of %d and %d is %d.', a, b, (a + b));

Production:

Sum of 5 and 10 is 15.

Cette résolution des variables en valeurs ne fonctionne qu’avec console.log(). Par conséquent, nous ne pouvons pas l’utiliser pour attribuer une variable différente, et nous ne pouvons pas l’utiliser pour afficher la nouvelle chaîne résolue dans l’interface utilisateur HTML.

Remarques

• On peut utiliser cette méthode en se connectant avec la fonction console.log(). Par conséquent, cette méthode ne fonctionnera pas pour attribuer des valeurs à une variable. Par conséquent, il peut ne pas être digne de scénarios autres que la journalisation.
• Lors de l’utilisation du formatage de base, les espaces réservés utilisés dans la chaîne doivent correspondre au type de données passées en paramètre. Par exemple, pour afficher une valeur numérique, l’espace réservé dans la phrase doit être %d pour le type de données chaîne, c’est %s.

let op1 = 5, op2 = 10, operation = 'Sum';
console.log('%s of %d and %d is %d.', operation, op1, op2, (op1 + op2));

Production:

Sum of 5 and 10 is 15.

Si nous oublions de considérer le type de paramètre passé, il y a une incompatibilité de type. JavaScript essaiera de transtyper la variable et ajoutera la valeur résultante à la chaîne. Le code suivant explique ce phénomène.

let op1 = 5, op2 = 10, operation = 'Sum';
console.log('%s of %d and %d is %d.', op1, op2, (op1 + op2), operation);

Production:

5 of 10 and 15 is NaN.

op1 est du type de données Number, et nous utilisons le %s pour l’injecter dans la chaîne finale. Le %s convertira automatiquement le nombre en un type de données chaîne. Cette conversion se déroule sans problème. Mais pour la variable operation, la valeur est affectée à un espace réservé qui vient ensuite dans la séquence. Cet espace réservé est %d. Par conséquent, ici, un type de données chaîne est converti en nombre. La conversion ne se produit pas. Par conséquent, le résultat renvoyé est NaN, que nous considérons comme le mot de fin de la sortie.

On peut utiliser des expressions dans les paramètres, comme on l’a vu dans le cas de (op1 + op2). Le javascript le comprend et le résout comme une somme en conséquence.

Dans ce cas, nous ne pouvons pas utiliser de guillemets doubles dans la chaîne finale sans utiliser les caractères d’échappement. Cependant, nous pouvons utiliser des guillemets simples si nous encapsulons toute la structure entre guillemets doubles. Consultez le code suivant.

let op1 = 5, op2 = 10, operation = 'Sum';
console.log('\'%s\' of %d and %d is %d.', operation, op1, op2, (op1 + op2));

Production:

'Sum' of 5 and 10 is 15.

Utilisez sprintf() pour insérer une variable dans une chaîne en JavaScript

Avant Template Literals dans ES6 de JavaScript, la communauté de développement a suivi la bibliothèque riche en fonctionnalités de sprintf.js. La bibliothèque a une méthode appelée sprintf(). sprintf.js est une bibliothèque open-source pour JavaScript. Il a ses implémentations pour Node.js et les navigateurs. Pour l’installation et les configurations, vous pouvez visiter leur page git-hub. sprintf() est utilisé pour inclure les variables dans une chaîne sans utiliser la concaténation de chaînes. L’utilisation est la suivante.

let sprintf = require('sprintf-js').sprintf;

let op1 = 5, op2 = 10, operation = 'Sum';
sprintf('%s of %d and %d is %d.', operation, op1, op2, (op1 + op2));

Production:

Sum of 5 and 10 is 15.

Il a diverses fonctionnalités spéciales utiles comme suit.

• La fonction sprintf() permet de spécifier les variables dans un ordre différent.
• Comme la fonctionnalité des littéraux de template, sprintf() résout les expressions encapsulées dans des chaînes.
• Il prend en charge divers formats. Hormis la chaîne standard et le nombre, la bibliothèque sprintf-js supporte les formats booléens, binaires etc., pour la sortie des valeurs des variables dans une chaîne.
• De plus, vous pouvez spécifier les arguments sous forme de tableau en utilisant la méthode vsprintf() fournie par la bibliothèque.
• Il permet également de passer l’objet directement dans le deuxième argument et résout les variables automatiquement.

Cette bibliothèque offre de nombreuses autres fonctionnalités. Plus de détails peuvent être trouvés dans le fichier Read.me spécifié dans leur lien GitHub.

Conclusion

Quand il s’agit d’inclure les valeurs des variables dans votre chaîne sans passer par les concaténations fastidieuses de chaînes en utilisant le + et les guillemets doubles, votre meilleure option sera d’opter pour Template Literals, la fonctionnalité avec des contre-indications. Si nous avons besoin d’insérer des valeurs dans la chaîne de sortie uniquement à des fins de journalisation, la fonction console.log() de JavaScript est utile. Il a les options de formatage incluses par défaut. La librairie sprintf.js est riche en fonctionnalités et domine l’espace car elle offre bien plus que les Template Literals quand il s’agit d’incorporer les valeurs des variables. Mais cela ne coûte que peu de se familiariser avec la bibliothèque.