Modèle littéraux en javascript | Expliqué

JavaScript est un langage de programmation Web de haut niveau qui nous fournit un type de données de chaîne où nous pouvons stocker des chaînes. Les chaînes peuvent être implémentées avec des devis simples ou doubles ("ou" ") en javascript. var mystring = "Hello World!"

Cependant, le type de données de chaîne est limité et n'offre pas de nombreuses fonctionnalités comme un langage de programmation de haut niveau (Python, Ruby) donne à ses développeurs. Ce problème a été résolu lorsque JavaScript a introduit Modèle littéraux dans ES6. Voyons quels modèles littéraux sont en JavaScript dans cet article.

Modèle littéraux

Le modèle que les littéraux nous donnent la possibilité de travailler avec des chaînes avec plus de contrôle et plus de puissance sur le type de données de chaîne traditionnel. Contrairement aux chaînes, les littéraux des modèles utilisent backtincs " plutôt que des guillemets simples ou doubles comme indiqué ci-dessous:

var myString = 'Hello World!';;

Certaines des fonctionnalités de la chaîne de modèles nous fournissent:

• Interpolation: attribuer des variables et des expressions à l'intérieur d'un modèle littéral.
• Cordes multilines: nous n'avons pas besoin / n Pour aller à une autre ligne, nous allons simplement sur une autre ligne dans le modèle littéral et le navigateur sait qu'il doit afficher cette chaîne sur une autre ligne.
• Tagged Modèles: il modifie le modèle littéral, puis après avoir modifié le modèle littéral renvoie la chaîne résultante. Les modèles tagués sont exactement comme des fonctions à l'exception que elles sont appelées sans le () parenthèse.

Explorons ces fonctionnalités une par une:

Interpolation

Les variables et les expressions peuvent être facilement interpolées en chaînes à l'aide de littéraux de modèle. Incorporer une expression à l'intérieur du modèle littéral est connu sous le nom Interpolation. Nous pouvons atteindre l'interpolation en utilisant le $ SomeVar syntaxe. Voyons un exemple:

var myString = 'Hello World!';;
console.log ('Il a dit: $ mystring');

Dans le code ci-dessus, nous initialisons une variable et y accédant à l'intérieur d'une chaîne à l'aide de la syntaxe d'interpolation. Et pour afficher le résultat sur la console, nous utilisons la console.Méthode log ():

Cordes multilines

Une autre application du modèle littéral est qu'elle nous donne la possibilité de gérer ou d'écrire facilement les chaînes en plusieurs lignes. Avant les littéraux du modèle, c'était un peu difficile et délicat car nous devions utiliser la barre arrière à l'intérieur des citations doubles pour dire au navigateur que la chaîne devrait être sur la ligne suivante. Par exemple:

var mystring = "Hello \ n" + "monde!"
console.log (mystring);

Dans le code ci-dessus, nous avons initialisé une chaîne et utilisé \ n Pour dire au navigateur que la chaîne après \ n devrait être sur la ligne suivante.

Voyons maintenant comment nous pouvons réaliser les mêmes fonctionnalités en utilisant le modèle littéral où nous allons simplement écrire la deuxième chaîne sur une autre ligne:

var mystring = 'Bonjour
Monde!';;
console.log (mystring);

Nous pouvons voir que les modèles littéraux ont facilité la rédaction de cordes multilines et il est plus facilement lisible et compréhensible.

Modèles tagués

Un autre modèle de fonctionnalité puissant que les littéraux nous donne sont les modèles tagués qui modifient simplement une chaîne de modèle en ajoutant un nom de fonction au début de la chaîne de modèle. En mots plus simples, un modèle tagué modifie le modèle littéral et renvoie la chaîne résultante.

Les modèles tagués sont définis exactement comme une fonction cependant lorsque vous appelez une balise de modèle, vous n'utilisez pas le () parenthèse. La syntaxe pour initialiser une fonction de balise est donnée ci-dessous:

fonction tagname (littéraux,… substitutions)
// renvoie une chaîne

La fonction de balise prend deux arguments; Le premier est le littéraux qui indiquent les cordes littérales et le second est le … Substitutions dans lequel les entrées suivantes analysées pour chaque substitution sont stockées.

Voyons maintenant un exemple pour implémenter une fonction de balise:

// modèle de balise
fonction mytagname (mystring)
retourner mystring;

// Création du modèle tagué
const Output = mytagname'hello name ';
// Afficher le résultat
console.journal (sortie);

Dans le code ci-dessus, nous avons créé une fonction qui renvoie une chaîne. Après cela, nous avons créé un modèle tagué, puis appelé la fonction de modèle de balise ci-dessus pour laquelle la syntaxe utilisée est: MYTAGNAME'HELLO NOM ' où le nom mytagnard est la balise de modèle et le Bonjour nom Le modèle est-il littéral. En fin de compte, nous avons affiché le résultat en utilisant la console.Méthode log ():

Voyons maintenant un autre exemple où nous passerons des littéraux ainsi que des substitutions à la fonction de balise:

// valeurs
Laissez saluer = "Bonjour!"
Soit name = "Jhon";
// Fonction de balise
transformée de fonction (littéraux,… substitutions)
console.journal (littéraux); // ["", " mon nom est "]
console.journal (substitutions); // ["Hello", "Jhon"]

// Fonction littérale de la balise d'appel
transform '$ saluer mon nom est $ name';

Dans le code ci-dessus, nous définissons d'abord la fonction de balise de transformation qui prend deux arguments; «Littéraux» qui est un tableau et qui a un contenu statique («Mon nom est») tandis que le paramètre de repos substitutions est également un tableau ayant toutes les balises (salut, nom). La sortie du code ci-dessus est illustrée ci-dessous:

Conclusion

La chaîne de type de données standard fournie par JavaScript n'était pas assez puissante, donc JavaScript a introduit des littéraux de modèle dans ES6. Les modèles littéraux nous donnent plus de puissance sur les chaînes et sont initialisés à l'aide de backtticks ". Dans cet article, nous avons vu quels modèles littéraux sont en javascrip.