19

Ich habe eine einfache Logging-Funktion:Warum können Funktionen ohne Klammern bei der Verwendung von Template-Strings aufgerufen werden?

function log(str) { 
    console.log('logged: ', str); 
} 

Wenn ich es ohne Klammern aufrufen und übergeben Sie in einer Vorlage Zeichenfolge, wie diese (derzeit Chrome Entwickler-Tools):

log`foo` 

Die Ausgabe lautet: logged: ["foo", raw: Array[1]]

Wenn ich es mit Klammern nennen,

log(`foo`) 

Die Ausgabe ist: logged: foo

Warum funktioniert das Aufrufen einer Funktion mit einer Vorlagezeichenfolge ohne Klammern in Javascript? Was bewirkt, dass das Ergebnis anders ist als in Klammern?

Antwort

21

Das erste Beispiel (log`foo`) ermöglicht, dass die Sprachspezifikation die an die Protokollfunktion übergebenen Werte ermittelt (siehe 12.3.7). Das zweite Beispiel (log(`foo`)) übergibt explizit ein einzelnes Argument.

Vorlagenliterale können sowohl Zeichenfolgen als auch Ausdrücke enthalten. Manchmal können Sie mehr Kontrolle über die Kompilierung eines Strings aus seinen Stringteilen und Expression-Parts haben. In diesem Fall suchen Sie möglicherweise nach getaggten Vorlagen.

var name = "Jonathan"; 
var mssg = foo `Hello, ${name}. Nice name, ${name}.`; 

function foo (strings, ...values) { 
    console.log(strings); //["Hello, ", ". Nice name, ", ".", raw: Array[3]] 
    console.log(values ); //["Jonathan", "Jonathan"] 
} 

Beachten Sie hier, wie alle Strings über das erste Argument übergeben werden. Außerdem werden alle interpolierten Wertausdrücke durch die übrigen Parameter (die hier zu einem Array zusammengefasst werden) übergeben.

Mit dieser zusätzlichen Kontrolle könnten wir alle möglichen Dinge tun, wie beispielsweise die Lokalisierung. In diesem Beispiel bestimmt die Sprachspezifikation die geeigneten Werte, die an die Funktion — übergeben werden, die der Entwickler nicht ermittelt.

Zum Kontrast, wenn Sie log(foo) aufrufen, erhalten Sie nur die resultierende Zeichenfolge. Keine Objekte, keine Teile, keine Rohwerte.

+1

Es lohnt sich, einen Link hinzuzufügen, da ich vorher noch nichts davon gehört habe: https://developers.google.com/web/updates/2015/01/ES6-Template-Strings#tagged-templates – Mathletics

Verwandte Themen