web-dev-qa-db-fra.com

Astuces pour appeler une fonction

Je ne sais pas comment expliquer cela, 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 la fonction log et pourquoi fait-il un index de raw: Array[1]?

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

javascriptecmascript-6template-stringstemplate-literalstagged-templates
69
Sterling Archer

Cela s'appelle Tagged Template dans ES-6, on peut en lire plus Ici , drôle J'ai trouvé le lien dans la section étoilée du chat même.

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 s'agit simplement de marquer le "1" avec la fonction console.log, comme il le ferait avec n'importe quelle autre fonction. Les fonctions d'étiquetage 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 pour

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 ensuite le tableau.

54
ShrekOverflow

Littéral de modèle balisé:

La syntaxe suivante:

function`your template ${foo}`;

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

La fonction qui est appelée en tant que littéral de modèle balisé 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 par 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 d'interpolation de chaîne) et donc undefined est enregistré lorsque nous essayons de nous connecter arg4

Utilisation de la syntaxe des paramètres de repos:

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 de 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}`;
17
Willem van der Veen