Dalam tutorial ini, anda akan belajar mengenai JavaScript Template Literals (Template Strings) dengan bantuan contoh.
Huruf templat (rentetan templat) membolehkan anda menggunakan rentetan atau ungkapan tertanam dalam bentuk rentetan. Mereka dilampirkan dengan tanda belakang ``. Sebagai contoh,
const name = 'Jack'; console.log(`Hello $(name)!`); // Hello Jack!
Catatan : Templat literal diperkenalkan pada tahun 2015 (juga dikenali sebagai ECMAScript 6 atau ES6 atau ECMAScript 2015). Beberapa penyemak imbas mungkin tidak menyokong penggunaan literal templat. Kunjungi sokongan Templat Literal JavaScript untuk mengetahui lebih lanjut.
Sastera Templat untuk Rentetan
Pada versi sebelumnya JavaScript, anda akan menggunakan satu petikan ''atau petikan ganda ""untuk rentetan. Sebagai contoh,
const str1 = 'This is a string'; // cannot use the same quotes const str2 = 'A "quote" inside a string'; // valid code const str3 = 'A 'quote' inside a string'; // Error const str4 = "Another 'quote' inside a string"; // valid code const str5 = "Another "quote" inside a string"; // Error
Untuk menggunakan petikan yang sama di dalam tali, anda boleh menggunakan watak pelarian .
// escape characters using const str3 = 'A \'quote\' inside a string'; // valid code const str5 = "Another "quote " inside a string"; // valid code
Daripada menggunakan watak pelarian, anda boleh menggunakan literal templat. Sebagai contoh,
const str1 = `This is a string`; const str2 = `This is a string with a 'quote' in it`; const str3 = `This is a string with a "double quote" in it`;
Seperti yang anda lihat, literal templat bukan sahaja memudahkan memasukkan sebut harga tetapi juga menjadikan kod kami kelihatan lebih bersih.
Rentetan Multiline Menggunakan Templat Literal
Huruf templat juga memudahkan untuk menulis rentetan multiline. Sebagai contoh,
Dengan menggunakan literal templat, anda boleh menggantikannya
// using the + operator const message1 = 'This is a long message' + 'that spans across multiple lines' + 'in the code.' console.log(message1)
dengan
const message1 = `This is a long message that spans across multiple lines in the code.` console.log(message1)
Hasil daripada kedua-dua program ini akan sama.
Ini adalah mesej panjang yang merangkumi pelbagai baris dalam kod.
Interpolasi Ungkapan
Sebelum JavaScript ES6, anda akan menggunakan +operator untuk menggabungkan pemboleh ubah dan ungkapan dalam rentetan. Sebagai contoh,
const name = 'Jack'; console.log('Hello ' + name); // Hello Jack
Dengan literal templat, sedikit lebih mudah untuk memasukkan pemboleh ubah dan ungkapan di dalam rentetan. Untuk itu, kami menggunakan $(… )sintaks.
const name = 'Jack'; console.log(`Hello $(name)`); // template literals used with expressions const result = `The sum of 4 + 5 is $(4 + 5)`; console.log(result); console.log(`$(result < 10 ? 'Too low': 'Very high')`)
Pengeluaran
Hello Jack Jumlah 4 + 5 adalah 9 Sangat tinggi
Proses menetapkan pemboleh ubah dan ekspresi di dalam templat literal dikenali sebagai interpolasi.
Templat yang ditandai
Biasanya, anda akan menggunakan fungsi untuk menyampaikan argumen. Sebagai contoh,
function tagExample(strings) ( return strings; ) // passing argument const result = tagExample('Hello Jack'); console.log(result);
Namun, anda boleh membuat templat yang ditandai (yang berperilaku seperti fungsi) menggunakan literal templat. Anda menggunakan teg yang membolehkan anda menguraikan literal templat dengan fungsi.
Templat yang ditandakan ditulis seperti definisi fungsi. Walau bagaimanapun, anda tidak memberikan tanda kurung ()ketika memanggil huruf harfiah. Sebagai contoh,
function tagExample(strings) ( return strings; ) // creating tagged template const result = tagExample`Hello Jack`; console.log(result);
Pengeluaran
("Hello Jack")
Pelbagai nilai rentetan diteruskan sebagai argumen pertama fungsi tag. Anda juga boleh memberikan nilai dan ungkapan sebagai argumen yang tinggal. Sebagai contoh,
const name = 'Jack'; const greet = true; function tagExample(strings, nameValue) ( let str0 = strings(0); // Hello let str1 = strings(1); // , How are you? if(greet) ( return `$(str0)$(nameValue)$(str1)`; ) ) // creating tagged literal // passing argument name const result = tagExample`Hello $(name), How are you?`; console.log(result);
Pengeluaran
Hello Jack, Apa khabar?
Dengan cara ini, anda juga dapat menyampaikan banyak argumen dalam templat yang ditandai.
