Salah satu fitur yang tersedia di ES2015 adalah template literals. Template literals memungkinkan kita untuk menyisipkan sebuah expression pada sebuah string. Kita juga dapat menulis multiline string menggunakan template literals.

Baca Juga : Mengenal Babel, Plugin Javascript Compiler yang Powerful

Menggabungkan beberapa string (concatenate) dan menyisipkan operasi aritmatika ke dalam sebuah string literals bisa dengan mudah dilakukan menggunakan template literals. Untuk lebih jelasnya, coba kita praktekan secara langsung dengan menulis beberapa kode contoh dibawah ini.

1. Menulis beberapa baris string atau text (multiline strings)

   console.log(`Halo saya Rizqi,
   dari Pekalongan dan saat ini
   bekerja sebagai programmer.`)

2. Menggabungkan string (concatenate strings)

   let hello = “Halo”;
   let world = “Dunia”;
   let say = `${hello} ${world}`;
   console.log(say); //output : Halo dunia

3. Menyisipkan expression (expression interpolation)

   console.log(`5 + 10 hasilnya adalah ${5+10}`); // output : 5 + 10 hasilnya adalah 15

4. Tagged Template literals pada template literals, kita bisa menguraikan atau memecah template literals dengan sebuah function dan ini dikenal dengan nama Tag. Argumen pertama adalah sebuah array yang berisi string-string, dan argumen kedua,ketiga dan seterusnya berisi expressions yang disisipkan pada template literals. berikut contohnya

var myName = 'Rizqi';
var haveAJob = true;

function myTag(strings, nameExp, haveAJobExp) {
    let str0 = strings[0]; // "Halo Saya "
    let str1 = strings[1]; // " dan Saya " 
    let worked;

    if (haveAJobExp){
      worked = 'sudah bekerja';
    } else {
      worked = 'belum bekerja';
    }
    return str0 + nameExp + str1 + worked;
}

var output = myTag`Halo Saya ${ myName } dan Saya ${ haveAJob }`;
console.log(output); //output : Halo Saya Rizqi dan Saya sudah bekerja

Semoga penjelasan di atas sedikit memberi gambaran tentang penggunaan template literals pada ES2015. Kalau ada kritik dan saran siiahkan tulis komentar kamu pada kolom komentar. Terima kasih dan sampai ketemu di tutorial selanjutnya.happy coding :)

Referensi : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals