Template string (atau dikenal juga dengan sebuah string interpolation) merupakan fitur baru di ECMAScript 6. Dengan tempelat string , kita bisa menampilkan nilai variabel saat berada di dalam string.Fitur ini mirip seperti penggunaan tanda kutip dua dibahasa perograman PHP.
sebagai contoh , di PHP kita bisa melakukan hal berikut:
1 $foo = "indonesia";
2 $bar = "Selamat Pagi $foo";
3 echo $bar; //Selamat pagi indonesia
Didalam string untuk variabel $bar, saya menulis "selamat pagi $foo".Oleh PHP,tanda dollar akan diproser untuk menampilkan nilai yang ada didalam variabel $foo. Disini $foo merupakan perintah khusus (bukan bagian dari string).Cara penulisan ini haya bisa di lakukan jika string di buat menggunakan tandakutip dua.
Danmenggunakan fitur template string, bisamelakukan hal yang sama di javascriupt,Berikut cintoh penggunaannya:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>selamat pagi indonesia</h1>
<script>
var foo = "indonesia";
var bar = `selamat pagi ${foo}`;
console.log(bar); // selamat pagi indonesia
</script>
</body>
</html>
hasilnya kaloan lohat di console;
Terlihat saya menggunakan karakter backtick untuk mewmbuat string yang akan di input ke dalam variabel bar1.karakter backtick ini cukup jarang di pakai dan saya tidak akan heran jika anda sisah menemukan nya di keyboard. karakter ini berada di sebelah kiri angka 1 (di atas tombol tab).
Agar variabel foo bisa diproses, string ini di tulis menggunakan tanda dollar dan harus beradadi dalam kurung kurawal, seperti ${foo}. inilah yang di sebut fitur template string dari JavaScript.
Sebelum ada fitur template string , kita harus menggunakan operator'+' untuk mendapati hasil yang sama.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>selamat pagi indonesia</h1>
<script>
var foo = "indonesia";
var bar = "selamat pagi";
console.log(bar); // selamat pagi indonesia
</script>
</body>
</html>
pembahasan nya sampai di sini saja , mohon maaf bila ada kesalahan.
Comments