Cara Menggunakan Literal Templat ES6 dalam JavaScript
Dalam pengaturcaraan, istilah itu “literal” merujuk kepada notasi nilai dalam kod. Sebagai contoh, kita notate nilai rentetan dengan a rentetan literal iaitu watak-watak yang disertakan dalam petikan berganda atau tunggal ("foo", 'bar', "Ini adalah tali!").
Literal template diperkenalkan di ECMAScript 6. Mereka bekerja agak sama dengan literal rentetan; mereka menghasilkan nilai templat dan nilai template mentah, kedua-duanya adalah rentetan.
Bagaimanapun, tidak seperti literals rentetan, literals template boleh menghasilkan nilai-nilai yang ada rentetan pelbagai baris, sesuatu yang boleh anda capai dalam rentetan literal hanya dengan menambah aksara baris baru (\ n) kepadanya.
Literal template juga boleh membuat rentetan dengan nilai lain (berasal dari ekspresi) yang mana anda perlu menggunakannya tambah pengendali dalam rentetan literal ("id anda ialah:" + idNo; di mana idNo adalah ungkapan yang berubah-ubah dengan nilai angka).
Semua ciri-ciri ini membuat literals template lebih disukai mewujudkan nilai rentetan.
Sintaks template literals
Pembatas templat literal adalah backtick ' watak (juga dikenali sebagai watak backquote atau simbol aksen yang serius). Ungkapan di dalam literal (nilai yang mana dinilai semasa runtime dan termasuk dalam nilai akhir yang dihasilkan oleh literal) disertakan dalam pendakap kerinting dengan tanda dolar sebelumnya $.
'string $ someExpression lebih rentetan'
Berikut adalah beberapa contoh literatur template menghasilkan tidak berubah, digantikan (ungkapan digantikan dengan nilai mereka yang dinilai), dan pelbagai baris tali.
console.log ('hello'); // hello var name = "Joan"; console.log ('hello $ name'); // hello Joan console.log ('Dear Joan, Selamat Datang.'); // Dear Joan, // Selamat datang. Melarikan diri & nilai template mentah
Dalam templat literal, ' (backtick), \ (backslash), dan $ (tanda dolar) harus melarikan diri menggunakan melarikan diri watak \ jika mereka akan dimasukkan ke dalam nilai templat mereka.
Secara lalai, semua urutan keluar dalam templat literal adalah diabaikan. Jika anda ingin menyertakannya dalam output, anda perlu menggunakannya nilai template mentah.
'code' var name = "Joan"; console.log ('hello \ $ name.'); / / dalam kod markup: \ 'code \ / hello $ name. console.log (String.raw'hello \ $ name. '); // hello \ $ name. The String.raw kaedah output nilai template mentah (bentuk rentetan mentah template literal). Dalam kod di atas, panggilan fungsi mentah kaedah dirujuk sebagai “templat tag”.
Templat tag
Templat yang ditandakan ialah fungsi panggilan di mana, menggantikan kurungan biasa (dengan parameter pilihan) selain nama fungsi, terdapat templat literal dari mana fungsi mendapat hujah-hujahnya.
Jadi, bukannya memanggil fungsi seperti ini:
foo (ArgumentsForFoo);
Ia dipanggil seperti ini:
foo'ATemplateStringProvidingArgumentsForFoo ';
Fungsinya foo dipanggil a fungsi tag. Argumen pertama yang diterima dari template literal ialah array dipanggil objek templat.
Objek templat (array) memegang semua nilai rentetan ditafsirkan dari templat literal dan mempunyai mentah harta (array lain) yang memegang semua nilai rentetan mentah (tidak luput) ditafsirkan dari literal yang sama.
Mengikuti objek templat, argumen fungsi tag termasuk semua dinilai nilai luaran hadir dalam literal itu (yang tertutup dalam pendakap kerinting $ ).
Dalam kod di bawah, foo fungsi dibuat untuk keluarkan hujah-hujahnya. Fungsi tersebut kemudian dipanggil dalam fesyen templat tag, dengan templat literal yang membawa dua ungkapan (nama dan ID).
var name = "John"; var id = 478; foo'hello $ name. id anda ialah: $ id. '; fungsi foo () console.log (hujah [0]); // Array ["hello", "id anda adalah:", "." ] console.log (hujah [1]); // John console.log (hujah [2]); // 478
Hujah pertama yang dihasilkan adalah objek templat membawa semua rentetan yang ditafsirkan dari templat literal, hujah kedua dan ketiga ialah nilai dinilai daripada ungkapan-ungkapan, nama dan ID.
The mentah harta
Seperti yang dinyatakan sebelum ini, objek templat mempunyai a harta dipanggil mentah yang merupakan array yang mengandungi semua nilai rentetan mentah (tidak luput) ditafsirkan dari templat literal. Ini adalah cara anda boleh mengakses mentah harta:
var name1 = "John", name2 = "Joan"; foo'hello \ $ name1, $ name2, bagaimana anda berdua? '; fungsi foo () console.log (hujah [0]); // Array ["hello $ name1,", ", bagaimana anda berdua?"] Console.log (arguments [0] .raw); // Array ["hello \ $ name1,", ", bagaimana anda berdua?"] Console.log (hujah [1]); // Joan
Gunakan kes templat yang ditandakan
Templat tag adalah berguna apabila anda perlu memecah tali ke dalam bahagian yang berasingan seperti yang sering berlaku dalam URL, atau semasa mengurai bahasa. Anda akan dapati koleksi contoh templat tag di sini.
Selain daripada IE, literals templat adalah disokong dalam semua pelayar utama.
Di bawah ini, anda boleh menemui beberapa contoh fungsi tag dengan tandatangan yang berbeza yang mewakili hujah:
var name = "John"; foo'hello $ name, bagaimana anda berdua? '; bar'hello $ name, bagaimana anda berdua? '; fungsi foo (... args) console.log (args); / Array [Array ["hello", ", bagaimana anda berdua?"], "John"] bar fungsi (strVals, ... exprVals) console.log (strVals); // Array ["hello", ", bagaimana kamu berdua?" ] console.log (exprVals); // Array ["John"]
Di dalam bar fungsi, parameter pertama (strVals) adalah objek templat dan yang kedua (yang menggunakan sintaks spread) adalah array yang berkumpul semua nilai ekspresi yang dinilai dari templat literal diterjemahkan ke fungsi.
Letakkan rentetan bersama
Jika anda mahu dapatkan keseluruhan ayat (berasal daripada literal) di dalam fungsi tag, meratakan semua nilai daripada array yang membawa rentetan template dan nilai ekspresi yang dinilai. Seperti ini:
fungsi foo (strs, ... exprs) // jika terdapat sebarang ungkapan yang dimasukkan dalam literal jika (exprs.length! == 0) var n = strs.length - 1, result = "; untuk (var i = 0 ; i < n; i++) result += strs[i] + exprs[i]; result += strs[n]; console.log(result); //"Hello John." // if there are no expressions included in the literal else console.log(strs[0]); name = 'John'; foo'Hello $name.';
The strs memegang array semua rentetan didapati dalam literal dan exprs memegang semua nilai ekspresi yang dinilai dari literal.
Sekiranya ada satu nilai ekspresi ada concatenate setiap nilai array strs (kecuali yang terakhir) dengan nilai indeks yang sama exprs. Kemudian, pada akhirnya, tambahkan nilai terakhir dari strs array ke rentetan yang disambungkan, membentuk ayat lengkap dengan cara ini.
