Backticks, die eine Funktion aufrufen


88

Ich bin mir nicht sicher, wie ich das erklären soll, aber wenn ich renne

console.log`1`

In Google Chrome bekomme ich Ausgabe wie

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

Warum ruft der Backtick die Protokollfunktion auf und warum erstellt er einen Index von raw: Array[1]?

Eine Frage, die Catgocat im JS-Raum gestellt hat, aber keine Antworten machten Sinn, abgesehen von etwas über das Templieren von Strings , das nicht wirklich passte, warum dies geschieht.


Antworten:


64

Es ist Tagged Vorlage in ES-6 genannt man mehr über sie zu lesen Hier , lustig fand ich den Link in der Sterne - Bereich des sehr unterhalten.

Der relevante Teil des Codes ist jedoch unten aufgeführt (Sie können grundsätzlich eine gefilterte Sortierung erstellen).

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

Grundsätzlich wird lediglich die "1" mit der Funktion console.log markiert, wie dies bei jeder anderen Funktion der Fall wäre. Die Tagging-Funktionen akzeptieren analysierte Werte von Vorlagenzeichenfolgen und die Werte separat, für die weitere Aufgaben ausgeführt werden können.

Babel transpiliert den obigen Code in

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

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

Wie Sie im obigen Beispiel sehen können, wird der Tagging-Funktion (console.log) nach dem Transpilieren durch babel der Rückgabewert des folgenden transpilierten es6-> 5-Codes übergeben.

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

Der Rückgabewert dieser Funktion wird an console.log übergeben, die dann das Array druckt.


8
Ich fand, dass dies eine viel einfacher zu verstehende Erklärung ist
Dave Pile

32

Tagged Template Literal:

Die folgende Syntax:

function`your template ${foo}`;

Wird als markiertes Vorlagenliteral bezeichnet.


Die Funktion, die als markiertes Vorlagenliteral aufgerufen wird, empfängt ihre Argumente folgendermaßen:

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

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

  1. Das erste Argument ist ein Array aller einzelnen Zeichenfolgen
  2. Das verbleibende Argument entspricht den Werten der Variablen, die wir durch String-Interpolation erhalten. Beachten Sie im Beispiel, dass es keinen Wert für gibt arg4(da es nur eine dreifache Zeichenfolgeninterpolation gibt) und daher undefinedprotokolliert wird, wenn wir versuchen, zu protokollierenarg4

Verwenden der Restparametersyntax:

Wenn wir vorher nicht wissen, wie oft eine Zeichenfolgeninterpolation in der Vorlagenzeichenfolge stattfindet, ist es oft nützlich, die Syntax des Restparameters zu verwenden. Diese Syntax speichert die verbleibenden Argumente, die die Funktion empfängt, in einem Array. Beispielsweise:

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

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

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.