Backticks JavaScript: Interpolasi Rentetan atau Fungsi Templat Teg?

Backtick dalam JavaScript: Fungsi Invocation atau String Tag?

Apabila menggunakan backtick (...) dalam JavaScript, anda mungkin menghadapi tingkah laku yang tidak dijangka , seperti semasa melaksanakan console.log dengan satu parameter di dalamnya backticks:

console.log`1`;

Menghasilkan output seperti:

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

Memahami Templat Teg

Tingkah laku ini timbul daripada konsep templat teg yang diperkenalkan dalam ES6. Templat bertanda ialah fungsi yang boleh digunakan bersama-sama dengan backtick untuk memanipulasi literal rentetan. Apabila templat berteg dipanggil, ia menerima dua parameter:

• rentetan: Tatasusunan literal rentetan
• ...nilai: Tatasusunan nilai yang dibenamkan dalam literal rentetan

Invokasi Fungsi lwn. Menandai

Dalam kes console.log dengan backtick, backtick tidak menggunakan fungsi tersebut. Sebaliknya, mereka menandai rentetan literal "1" dengan fungsi console.log. Fungsi templat berteg yang terhasil mengembalikan tatasusunan yang mengandungi nilai yang diubah.

Khususnya:

• rentetan[0] mengandungi literal rentetan: "1"
• rentetan[ 1] tidak ditentukan
• nilai[0] mengandungi nilai terbenam: 1
• mentah mengandungi literal rentetan yang tidak diubah: ["1"]

Transpilasi

Pelayar moden mentranspile kod ES6 untuk menjadikannya serasi dengan versi JavaScript yang lebih lama. Dalam kes ini, fungsi templat yang ditandakan ditranspilkan kepada panggilan fungsi biasa:

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

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

Fungsi _taggedTemplateLiteralLoose mengembalikan tatasusunan yang dihantar ke fungsi console.log, yang mencetak tatasusunan.

Kesimpulan

Backtick dalam JavaScript boleh digunakan untuk kedua-dua rentetan interpolasi dan templat berteg. Apabila digunakan dengan fungsi templat yang ditag, fungsi tersebut menerima nilai yang dihuraikan bagi literal rentetan dan nilai terbenam, membolehkan manipulasi dan transformasi data sebelum mengeluarkannya.

Atas ialah kandungan terperinci Backticks JavaScript: Interpolasi Rentetan atau Fungsi Templat Teg?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!