Cara menggunakan javascript string constants

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>MenggunakanTemplateLiteral</title>

</head>

<body>

</body>

<script>

varmateri  ='JavaScript';

varkata    ='Bahasa Pemrograman Website';

alert(`${materi}AdalahSalahSatu${kata}Yang Sedang Populer`);

</script>

</html>

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.