Dalam tutorial ini, Anda akan belajar tentang JavaScript Template Literals (Template Strings) dengan bantuan contoh.
Template literal (template string) memungkinkan Anda menggunakan string atau ekspresi yang disematkan dalam bentuk string. Mereka diapit backticks ``. Sebagai contoh,
const name = 'Jack'; console.log(`Hello $(name)!`); // Hello Jack!
Catatan : Literal template diperkenalkan pada tahun 2015 (juga dikenal sebagai ECMAScript 6 atau ES6 atau ECMAScript 2015). Beberapa browser mungkin tidak mendukung penggunaan literal template. Kunjungi dukungan JavaScript Template Literal untuk mempelajari lebih lanjut.
Literal Template untuk String
Di versi JavaScript sebelumnya, Anda akan menggunakan kutipan tunggal ''atau kutipan ganda ""untuk string. 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 kutipan yang sama di dalam string, Anda dapat menggunakan karakter escape .
// escape characters using const str3 = 'A \'quote\' inside a string'; // valid code const str5 = "Another "quote " inside a string"; // valid code
Alih-alih menggunakan karakter escape, Anda dapat menggunakan literal template. 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 template tidak hanya memudahkan untuk memasukkan kutipan tetapi juga membuat kode kita terlihat lebih rapi.
String Multiline Menggunakan Literal Template
Literal template juga memudahkan penulisan string multiline. Sebagai contoh,
Dengan menggunakan template literal, Anda dapat mengganti
// 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)
Output dari kedua program ini akan sama.
Ini adalah pesan panjang yang tersebar di beberapa baris dalam kode.
Interpolasi Ekspresi
Sebelum JavaScript ES6, Anda akan menggunakan +operator untuk menggabungkan variabel dan ekspresi dalam sebuah string. Sebagai contoh,
const name = 'Jack'; console.log('Hello ' + name); // Hello Jack
Dengan template literal, lebih mudah untuk memasukkan variabel dan ekspresi di dalam sebuah string. 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')`)
Keluaran
Hello Jack Jumlah dari 4 + 5 adalah 9 Sangat tinggi
Proses penugasan variabel dan ekspresi di dalam literal template dikenal sebagai interpolasi.
Template yang Diberi Tag
Biasanya, Anda akan menggunakan fungsi untuk meneruskan argumen. Sebagai contoh,
function tagExample(strings) ( return strings; ) // passing argument const result = tagExample('Hello Jack'); console.log(result);
Namun, Anda bisa membuat template bertanda (yang berperilaku seperti fungsi) menggunakan literal template. Anda menggunakan tag yang memungkinkan Anda mengurai literal template dengan suatu fungsi.
Template yang diberi tag ditulis seperti definisi fungsi. Namun, Anda tidak memberikan tanda kurung ()saat memanggil literal. Sebagai contoh,
function tagExample(strings) ( return strings; ) // creating tagged template const result = tagExample`Hello Jack`; console.log(result);
Keluaran
("Halo Jack")
Array nilai string dilewatkan sebagai argumen pertama dari fungsi tag. Anda juga bisa meneruskan nilai dan ekspresi sebagai argumen yang tersisa. 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);
Keluaran
Halo Jack, apa kabar?
Dengan cara ini, Anda juga dapat memberikan beberapa argumen di temaplate yang diberi tag.
