Syamsul 'isul' Arifin

Template Literals, Fitur ES6 Yang Sangat Saya Sukai

Kalau ada pertanyaan, fitur ES6 (Ecmascript 2015) mana yang saya paling sukai? Saya akan jawab… Template Literals. Mari kita lihat dengan contoh.

Ini contoh yang konvensional tanpa template literals.

// Tanpa templet literals
let normal = document.getElementById('normal');        
let normalVar = 'Normal';        

normal.innerHTML = '<p>'
                    + normalVar
                    + '</p>';

Dan mari kita bandingkan dengan yang memakai template literals.

// Dengan Template Literals
let temLit = document.getElementById('tem-lit');
let temlitVar = 'Pake Template Literals';

temLit.innerHTML = `<p>
                        ${temlitVar}
                    <p>`; 

Kita bisa lihat, dengan template literals terasa lebih ringkas dan mudah untuk dibaca dan dituliskan. Terasa seperti membaca dan menulis HTML. Kalau script untuk menggunakan innerHTML-nya sedikit mungkin tidak terlalu terasa susah membacanya. Tapi kalau banyak?