Backticks memanggil suatu fungsi

Saya tidak yakin bagaimana menjelaskan ini, tetapi ketika saya lari

console.log`1`

Di google chrome, saya mendapatkan keluaran seperti

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

Mengapa backtick memanggil fungsi log, dan mengapa itu membuat indeks raw: Array[1]?

Pertanyaan yang diajukan di ruang JS oleh Catgocat, tetapi tidak ada jawaban yang masuk akal selain sesuatu tentang string template yang tidak benar-benar sesuai dengan mengapa hal ini terjadi.

Ini disebut Template Tagged di ES-6 lebih banyak yang bisa dibaca tentang mereka Di sini , lucu saya menemukan tautan di bagian berbintang di obrolan.

Tetapi bagian yang relevan dari kode ada di bawah (pada dasarnya Anda dapat membuat semacam yang difilter).

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

Pada dasarnya, ini hanya menandai "1" dengan fungsi console.log, seperti yang akan dilakukan dengan fungsi lainnya. Fungsi penandaan menerima nilai parsing dari string template dan nilai secara terpisah di mana tugas selanjutnya dapat dilakukan.

Babel memindahkan kode di atas ke

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

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

Seperti yang Anda lihat pada contoh di atas, setelah ditranspilasi oleh babel, fungsi penandaan (console.log) sedang diberikan nilai kembalian dari kode transpiled es6-> 5 berikut.

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

Nilai yang dikembalikan dari fungsi ini diteruskan ke console.log yang kemudian akan mencetak array.

Literal template yang diberi tag:

Sintaks berikut:

function`your template ${foo}`;

Disebut literal template yang diberi tag.

Fungsi yang disebut sebagai template literal yang diberi tag menerima argumennya dengan cara berikut:

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

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

1. Argumen pertama adalah larik dari semua karakter string individu
2. Argumen yang tersisa sesuai dengan nilai variabel yang kami terima melalui interpolasi string. Perhatikan dalam contoh bahwa tidak ada nilai untuk arg4(karena hanya ada 3 kali interpolasi string) dan dengan demikian undefineddicatat ketika kita mencoba untuk masukarg4

Menggunakan sintaks parameter rest:

Jika kita tidak tahu sebelumnya berapa kali interpolasi string akan berlangsung di string template, sering kali berguna untuk menggunakan sintaks parameter lainnya. Sintaks ini menyimpan argumen tersisa yang diterima fungsi ke dalam array. Sebagai contoh:

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

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