19

Ho una semplice funzione di registrazione:Perché le funzioni possono essere chiamate senza parentesi quando si utilizzano stringhe di modelli?

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

Se lo chiamo io senza parentesi (che attualmente utilizzano strumenti di sviluppo di Chrome) e passare in una stringa di modello, in questo modo:

log`foo` 

l'output è: logged: ["foo", raw: Array[1]]

Se lo chiamo io con parentesi,

log(`foo`) 

L'uscita è: logged: foo

Perché il richiamo di una funzione utilizzando una stringa di modello e nessuna parentesi funziona in Javascript? Cosa sta succedendo fa sì che il risultato sia diverso dal chiamarlo con parentesi?

risposta

21

Il primo esempio (log`foo`) consente alle specifiche del linguaggio di determinare i valori passati alla funzione di registro (vedere 12.3.7). Il secondo esempio (log(`foo`)) passa esplicitamente un singolo argomento.

I valori letterali di modello possono contenere stringhe e espressioni. A volte puoi avere più controllo sulla compilazione di una stringa dalle sue parti di stringa e parti di espressioni. In questo caso, potresti cercare modelli con tag.

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"] 
} 

Nota qui come tutte le stringhe vengono passate attraverso il primo argomento. Inoltre, tutte le espressioni di valore interpolate vengono passate attraverso il resto dei parametri (riunite qui in un array).

Con questo controllo aggiunto, potremmo fare qualsiasi cosa, come la localizzazione. In questo esempio, la specifica della lingua determina i valori appropriati da passare alla funzione — lo sviluppatore non lo determina.

Per contrasto, quando si chiama log(foo), si finisce per ottenere solo la stringa risultante. Nessun oggetto, nessuna parte, nessun valore grezzo.

+1

Vale la pena aggiungere un collegamento, come non ne avevo mai sentito prima: https://developers.google.com/web/updates/2015/01/ES6-Template-Strings#tagged-templates – Mathletics

Problemi correlati