Cara Menggunakan Literal Template ES6 dalam JavaScript
Dalam pemrograman, istilah itu “harfiah” mengacu kepada notasi nilai dalam kode. Misalnya, kami memberi tahu nilai string dengan a string literal yang merupakan karakter yang diapit dengan tanda kutip ganda atau tunggal ("foo", 'bar', "Ini sebuah string!").
Templat literal diperkenalkan di ECMAScript 6. Mereka bekerja sangat mirip dengan string literal; mereka memproduksi nilai templat dan nilai template mentah, keduanya adalah string.
Namun, tidak seperti string literal, literal templat dapat menghasilkan nilai string multi-baris, sesuatu yang dapat Anda capai dalam string literal hanya dengan menambahkan karakter baris baru (\ n) untuk itu.
Templat literal juga bisa buat string dengan nilai lain (berasal dari ekspresi) yang harus Anda gunakan ditambah operator dalam string literal ("id Anda adalah:" + idNo; dimana idNo adalah ekspresi variabel dengan nilai numerik).
Semua fitur ini membuat literal templat lebih disukai buat nilai string.
Sintaks literal templat
Pembatas dari templat literal adalah backtick ' karakter (Juga dikenal sebagai karakter backquote atau simbol aksen makam). Ekspresi di dalam literal (nilainya adalah dievaluasi selama runtime dan termasuk dalam nilai akhir yang dihasilkan oleh literal) terlampir dalam kurung kurawal dengan tanda dolar sebelumnya $.
'string $ someExpression lebih banyak string'
Ini ada beberapa contoh literal templat memproduksi tidak berubah, diganti (ekspresi diganti dengan nilai yang dievaluasi), dan berlapis-lapis string.
console.log ('hello'); // halo var name = "Joan"; console.log ('hello $ name'); // hello Joan console.log ('Dear Joan, Selamat Datang.'); // Joan sayang, // Selamat datang. Melarikan diri & nilai template mentah
Dalam templat literal, the ' (backtick), \ (backslash), dan $ (tanda dolar) karakter harus melarikan diri menggunakan karakter melarikan diri \ jika mereka harus dimasukkan dalam nilai template mereka.
Secara default, semua urutan escape dalam templat literal adalah diabaikan. Jika Anda ingin memasukkannya ke dalam output, Anda harus menggunakannya nilai template mentah.
console.log ('inline code in markup: \' code \ "); // inline code in markup: 'code' var name =" Joan "; console.log ('hello \ $ name.'); / / hello $ name. console.log (String.raw'hello \ $ name. '); // hello \ $ name. Itu String.raw metode menampilkan nilai templat mentah (bentuk string mentah dari templat literal). Dalam kode di atas, panggilan fungsi dari mentah Metode ini disebut sebagai “template yang ditandai”.
Template yang ditandai
Templat yang diberi tag adalah a panggilan fungsi dimana, di tempat kurung biasa (dengan parameter opsional) selain nama fungsi, ada templat literal dari mana fungsi mendapatkan argumennya.
Jadi, alih-alih memanggil fungsi seperti ini:
foo (ArgumentsForFoo);
Disebut seperti ini:
foo'ATemplateStringProvidingArgumentsForFoo ';
Fungsinya foo disebut a fungsi tag. Argumen pertama yang diterima dari templat literal adalah array disebut objek templat.
Objek templat (array) menampung semua nilai string diartikan dari templat literal dan memiliki a mentah properti (array lain) yang menampung semua nilai string mentah (tidak terhindar) diartikan dari literal yang sama.
Mengikuti objek templat, argumen fungsi tag termasuk semua dievaluasi nilai eksternal hadir dalam literal itu (yang terlampir di kurung kurawal $ ).
Dalam kode di bawah ini, the foo fungsi dibuat untuk Keluarkan argumennya. Fungsi ini kemudian dipanggil dalam mode templat yang ditandai, dengan templat literal yang membawa dua ekspresi (nama dan id).
var name = "John"; var id = 478; foo'hello $ name. id Anda adalah: $ id. '; function foo () console.log (argumen [0]); // Array ["hello", ". Id Anda adalah:", "." ] console.log (argumen [1]); // John console.log (argumen [2]); // 478
Argumen pertama yang dihasilkan adalah objek templat membawa semua string yang ditafsirkan dari templat literal, argumen kedua dan ketiga adalah nilai yang dievaluasi dari ekspresi, nama dan id.
Itu mentah milik
Seperti disebutkan sebelumnya, objek template memiliki a properti yang disebut mentah yang merupakan array yang mengandung semua nilai string mentah (tidak terhindar) diartikan dari templat literal. Ini adalah bagaimana Anda dapat mengakses mentah milik:
var name1 = "John", name2 = "Joan"; foo'hello \ $ name1, $ name2, bagaimana kabar Anda berdua? '; function foo () console.log (argumen [0]); // Array ["hello $ name1,", ", apa kabar Anda berdua?"] Console.log (argumen [0] .raw); // Array ["hello \ $ name1,", ", apa kabar Anda berdua?"] Console.log (argumen [1]); // Joan
Gunakan case templat yang ditandai
Templat yang diberi tag berguna saat Anda perlu memecahkan string menjadi bagian-bagian yang terpisah seperti itu sering terjadi dalam URL, atau saat menguraikan bahasa. Anda akan menemukan koleksi contoh template yang ditandai di sini.
Selain IE, literal templat adalah didukung di semua browser utama.
Di bawah, Anda dapat menemukan beberapa contoh fungsi tag dengan tanda tangan yang berbeda yang mewakili argumen:
var name = "John"; foo'hello $ name, apa kabar? '; bar'hello $ name, apa kabar? '; function foo (... args) console.log (args); // Array [Array ["hello", ", apa kabar Anda?"], "John"] bilah fungsi (strVals, ... exprVals) console.log (strVals); // Array ["halo", ", apa kabar?" ] console.log (exprVals); // Array ["John"]
Dalam bar fungsi, parameter pertama (strVals) adalah objek templat dan yang kedua (yang menggunakan sintaks spread) adalah array yang dikumpulkan semua nilai ekspresi yang dievaluasi dari templat literal diteruskan ke fungsi.
Masukkan string
Jika Anda menghendaki dapatkan seluruh kalimat (berasal dari literal) di dalam fungsi tag, menggabungkan semua nilai dari array yang membawa string template dan nilai ekspresi yang dievaluasi. Seperti ini:
function foo (strs, ... exprs) // jika ada ekspresi yang termasuk dalam literal if (exprs.length! == 0) var n = strs.length - 1, result = "; for (var i = 0 ; saya < 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.';
Itu str array memegang semua string ditemukan dalam literal dan expr memegang semua nilai ekspresi yang dievaluasi dari literal.
Jika ada satu nilai ekspresi yang ada, gabungkan setiap nilai larik str (kecuali yang terakhir) dengan nilai indeks yang sama dengan expr. Kemudian, pada akhirnya, tambahkan nilai terakhir dari str array ke string yang digabungkan, membentuk kalimat lengkap cara ini.
