Backticks appelant une fonction

Je ne sais pas comment l'expliquer, mais quand je cours

console.log`1`

Dans google chrome, j'obtiens une sortie comme

console.log`1`
VM12380:2 ["1", raw: Array[1]]

Pourquoi le backtick appelle-t-il la fonction de journal et pourquoi crée-t-il un index raw: Array[1]?

Question soulevée dans la salle JS par Catgocat, mais aucune réponse n'avait de sens à part quelque chose à propos de la création de modèles de chaînes qui ne correspondait pas vraiment à la raison pour laquelle cela se produit.

Il s'appelle Tagged Template dans ES-6. Plus d'informations à leur sujet. Ici , drôle, j'ai trouvé le lien dans la section étoilée du chat.

Mais la partie pertinente du code est ci-dessous (vous pouvez essentiellement créer un tri filtré).

function tag(strings, ...values) {
  assert(strings[0] === 'a');
  assert(strings[1] === 'b');
  assert(values[0] === 42);
  return 'whatever';
}
tag `a${ 42 }b`  // "whatever"

Fondamentalement, il ne fait que marquer le "1" avec la fonction console.log, comme il le ferait avec n'importe quelle autre fonction. Les fonctions de balisage acceptent les valeurs analysées des chaînes de modèle et les valeurs séparément sur lesquelles d'autres tâches peuvent être effectuées.

Babel transpile le code ci-dessus en

var _taggedTemplateLiteralLoose = function (strings, raw) { strings.raw = raw; return strings; };

console.log(_taggedTemplateLiteralLoose(["1"], ["1"]));

Comme vous pouvez le voir dans l'exemple ci-dessus, après avoir été transpilée par babel, la fonction de balisage (console.log) reçoit la valeur de retour du code transpilé es6-> 5 suivant.

_taggedTemplateLiteralLoose( ["1"], ["1"] );

La valeur de retour de cette fonction est transmise à console.log qui imprimera alors le tableau.

Littéral de modèle marqué:

La syntaxe suivante:

function`your template ${foo}`;

Est appelé le littéral de modèle étiqueté.

La fonction qui est appelée comme un littéral de modèle étiqueté reçoit ses arguments de la manière suivante:

function taggedTemplate(strings, arg1, arg2, arg3, arg4) {
  console.log(strings);
  console.log(arg1, arg2, arg3, arg4);
}

taggedTemplate`a${1}b${2}c${3}`;

1. Le premier argument est un tableau de tous les caractères de chaîne individuels
2. L'argument restant correspond aux valeurs des variables que nous recevons via l'interpolation de chaîne. Notez dans l'exemple qu'il n'y a pas de valeur pour arg4(car il n'y a que 3 fois l'interpolation de chaîne) et undefinedest donc journalisé lorsque nous essayons de journaliserarg4

Utilisation de la syntaxe des paramètres rest:

Si nous ne savons pas à l'avance combien de fois l'interpolation de chaîne aura lieu dans la chaîne de modèle, il est souvent utile d'utiliser la syntaxe du paramètre rest. Cette syntaxe stocke les arguments restants que la fonction reçoit dans un tableau. Par exemple:

function taggedTemplate(strings, ...rest) {
  console.log(rest);
}

taggedTemplate `a${1}b${2}c${3}`;
taggedTemplate `a${1}b${2}c${3}d${4}`;