Pada ksemepatan kali ini saya akan menjelaskan cara menggunakan template literal di JavaScript. Perlu teman-teman ketahui sebelumnya, di ES6 (ECMAScript 6) terdapat salah satu feature baru yang bernama template string. Untuk penggunaan template string tersebut sangat membantu teman-teman untuk mengkombinasikan literal dengan variabel. Pada feature tersebut terdapat beberapa aturan yang yang dapat teman-teman gunakan untuk mencetak dari suatu variabel maupun literal.
Mungkin sebagian teman-teman sudah biasa menggunakan operator + untuk memisahkan literal dan suatu variabel sehingga output dari hasil cetak nantinya menjadi satu (digabung). Beda halnya jika teman-teman menggunakan template literal, disini teman-teman dapat menampilkan literal dan variabel tanpa harus menggunakan pemisah operator + (plus). Dan teman-teman dapat langsung menggabungkan nya layaknya seperti ketika teman-teman ingin menampilkan string di dalam console.log(). Namun untuk penggunaanya ada beberapa syarat khusus, ketika teman-teman ingin menampilkan suatu variabel dan string di dalam console.log() teman-teman harus memasukan kode ` (backtik) atau mengapitnya diantara suatu variabel dan string yang ingin digabungkan menjadi satu. Berikut contoh penulisannya :
Menggunakan Template Literal
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Menggunakan Template Literal</title>
</head>
<body>
</body>
<script>
var materi = 'JavaScript';
var kata = 'Bahasa Pemrograman Website';
alert(`${materi} Adalah Salah Satu ${kata} Yang Sedang Populer`);
</script>
</html>
Menggunakan Template Non Literal
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Menggunakan Template Non Literal</title> </head> <body> </body> <script> var materi = 'JavaScript'; var kata = 'Bahasa Pemrograman Website'; alert(materi+ ' Adalah Salah Satu ' +kata+ ' Yang Sedang Populer'); </script> </html>
Seperti yang teman-teman lihat dari perbedaan kedua metode tersebut, dimana disaat teman-teman menggunakan template literal harus menggunakan kode ` (backtik) sebagai pengapit diantara kode variabel dan string. Dan tidak hanya itu saja template literal memudahkan teman-teman untuk membuat Multiline tanpa harus menggunakan atau menyisipkan tag html paragraf. Berikut contoh penulisannya :
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Template Literal Multiline</title> </head> <body> </body> <script> alert(`ini contoh paragraf satu ini contoh paragraf dua ini contoh paragraf tiga ini contoh paragraf empat ini contoh paragraf empat`); </script> </html>
Sampai disini penjelasan saya mengenai cara menggunakan template literal di JavaScript, semoga bermanfaat.