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 :
<!doctype html> <html> <head> <meta charset="utf-8"> <title>MenggunakanTemplateLiteral</title>
</head> <body> </body> <script> varmateri ='JavaScript'; varkata ='Bahasa Pemrograman Website';
alert(`${materi}AdalahSalahSatu${kata}Yang Sedang Populer`); </script> </html>Menggunakan Template Literal
Menggunakan Template Non Literal
<!doctype html> <html> <head> <meta charset="utf-8"> <title>MenggunakanTemplateNon Literal</title> </head> <body> </body> <script> varmateri ='JavaScript'; varkata = '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>TemplateLiteralMultiline</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.