Comment utiliser les littéraux de modèles ES6 en JavaScript
En programmation, le terme “littéral” se réfère à la notation des valeurs dans du code. Par exemple, nous notons une valeur de chaîne avec un chaîne littérale qui sont des caractères entre guillemets simples ou doubles ("foo", 'bar', "C'est une ficelle!").
Littéraux de modèles ont été introduits dans ECMAScript 6. Ils fonctionnent de manière assez similaire aux littéraux de chaîne; ils produisent valeurs de modèle et valeurs de modèle brutes, qui sont tous les deux des chaînes.
Cependant, contrairement aux littéraux de chaîne, les littéraux de modèle peuvent produire des valeurs cordes multilignes, quelque chose que vous pouvez atteindre dans un littéral de chaîne que par ajout de nouveaux caractères de ligne (\ n) à cela.
Les littéraux de modèle peuvent aussi créer des chaînes avec d'autres valeurs (dérivés d’expressions) pour lesquels vous auriez à utiliser le plus opérateur dans un littéral de chaîne ("votre identifiant est:" + idNo; où idNo est une expression variable avec une valeur numérique).
Toutes ces caractéristiques rendent les modèles de modèles plus préférables à créer des valeurs de chaîne.
Syntaxe des littéraux de modèle
Le délimiteur d’un modèle littéral est le coup de gueule ' personnage (également connu sous le nom de caractère backquote ou symbole d’accent grave). Une expression dans le littéral (dont la valeur est évalué pendant l'exécution et inclus dans la valeur finale produite par le littéral) est inclus dans accolades avec un signe dollar précédent $.
'string $ someExpression more string'
Voilà quelque exemples de littéraux de modèles produisant inchangé, substitué (expressions remplacées par leurs valeurs évaluées), et multiligne des cordes.
console.log ('bonjour'); // hello var name = "Joan"; console.log ('hello $ name'); // Bonjour Joan console.log ('Chère Joan, Bienvenue.'); // Chère Joan, // Bienvenue. Échappement & valeurs de modèles brutes
Dans un modèle littéral, le ' (backtick), \ (barre oblique inverse), et $ Caractères (signe dollar) devrait être échappé en utilisant le caractère d'échappement \ si elles doivent être incluses dans la valeur de leur modèle.
Par défaut, toutes les séquences d'échappement d'un modèle de fichier sont ignoré. Si vous souhaitez l'inclure dans la sortie, vous devez utiliser son valeur de modèle brute.
console.log ('code en ligne dans le balisage: \' code \ "); // code en ligne dans le balisage: 'code' var name =" Joan "; console.log ('hello \ $ nom.'); / / hello $ name. console.log (String.raw'hello \ $ name. '); // hello \ $ name. le String.raw méthode affiche les valeurs brutes du modèle (la forme de chaîne brute d'un littéral de modèle). Dans le code ci-dessus, l'appel de fonction du brut la méthode est appelée “modèle marqué”.
Modèles marqués
Un modèle marqué est un appel de fonction où, à la place des parenthèses habituelles (avec des paramètres optionnels) en plus du nom de la fonction, il y a un modèle littéral à partir duquel la fonction obtient ses arguments.
Donc, au lieu d’appeler une fonction comme celle-ci:
toto (ArgumentsForFoo);
Cela s'appelle comme ça:
foo'ATemplateStringProvidingArgumentsForFoo ';
La fonction foo est appelé un fonction tag. Son premier argument reçu du modèle littéral est un tableau appelé le objet modèle.
L'objet de modèle (un tableau) contient toutes les valeurs de chaîne interprété à partir du modèle littéral et a un brut propriété (un autre tableau) qui contient toutes les valeurs de chaîne brutes (non échappées) interprété à partir du même littéral.
A la suite du modèle, les arguments de la fonction tag incluent tous les évalué valeurs externes présent dans ce littéral (ceux enfermés dans les accolades $ ).
Dans le code ci-dessous, le foo la fonction est créée pour sortir ses arguments. La fonction s'appelle alors à la manière des modèles étiquetés, avec un template littéral contenant deux expressions (prénom et identifiant).
var name = "John"; var id = 478; foo'hello $ name. votre identifiant est: $ id. '; fonction foo () console.log (arguments [0]); // tableau ["bonjour", ". Votre identifiant est:", "." ] console.log (arguments [1]); // John console.log (arguments [2]); // 478
Le premier argument sorti est le objet modèle portant toutes les chaînes interprétées à partir du modèle littéral, les deuxième et troisième arguments sont les valeurs évaluées des expressions, prénom et identifiant.
le brut propriété
Comme mentionné précédemment, l’objet modèle a une propriété appelée brut qui est un tableau contenant toutes les valeurs de chaîne brutes (non échappées) interprété à partir du modèle littéral. Voici comment vous pouvez accéder à la brut propriété:
var name1 = "John", name2 = "Joan"; foo'hello \ $ name1, $ name2, comment allez-vous tous les deux? '; fonction foo () console.log (arguments [0]); // Array ["hello $ name1,", comment allez-vous tous les deux? "] Console.log (arguments [0] .raw); // Array ["hello \ $ name1,", "comment allez-vous tous les deux?"] Console.log (arguments [1]); // Joan
Cas d'utilisation de modèles étiquetés
Les modèles étiquetés sont utiles lorsque vous devez rompre une ficelle en parties séparées comme c'est souvent le cas dans une URL ou lors de l'analyse syntaxique d'une langue. Vous trouverez une collection de exemples de modèles marqués ici.
Autre que IE, les littéraux de modèle sont supporté par tous les principaux navigateurs.
Vous trouverez ci-dessous quelques exemples de fonctions de balise avec différentes signatures qui représentent les arguments:
var name = "John"; foo'hello $ name, comment allez-vous tous les deux? '; bar'hello $ name, comment allez-vous tous les deux? '; fonction foo (… args) console.log (args); // Array [Array ["hello", ", comment allez-vous tous les deux?"], "John"] barre de fonctions (strVals,… exprVals) console.log (strVals); // Array ["bonjour", "comment allez-vous tous les deux?" ] console.log (exprVals); // tableau ["John"]
dans le bar fonction, le premier paramètre (strVals) est le objet modèle et le second (qui utilise la syntaxe spread) est un tableau qui rassemble toutes les valeurs d'expression évaluées à partir du littéral de modèle passé à la fonction.
Assemble la ficelle
Si tu veux obtenir la phrase entière (dérivé du littéral) à l'intérieur de la fonction tag, concaténer toutes les valeurs des tableaux contenant les chaînes de modèle et les valeurs d'expression évaluées. Comme ça:
function foo (strs,… exprs) // si des expressions sont incluses dans le littéral if (exprs.length! == 0) var n = strs.length - 1, result = "; for (var i = 0 ; je < n; i++) result += strs[i] + exprs[i]; result += strs[n]; console.log(result); //"Hello John." // if there are no expressions included in the literal else console.log(strs[0]); name = 'John'; foo'Hello $name.';
le strs tableau détient toutes les ficelles trouvé dans le littéral et exprs retient toutes les valeurs d'expression évaluées du littéral.
S'il existe même une valeur d'expression, concaténer chaque valeur de tableau de strs (sauf le dernier) avec la même valeur d'index de exprs. Puis, à la fin, ajoutez la dernière valeur de strs tableau à la chaîne concaténée, formant une phrase complète par ici.
