Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Template Literals Pada ES2015
Seorang web programmer yang bekerja secara remote dan saat ini tinggal di kota Pekalongan. Tertarik belajar apa saja tentang Javascript.
23 Mei 2018

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

Blog ini telah dibaca sebanyak 271 kali
javascript es2015 template literals string pemula

Sekilas Tentang Penulis

Rizqi Maulana
Seorang web programmer yang bekerja secara remote dan saat ini tinggal di kota Pekalongan. Tertarik belajar apa saja tentang Javascript.

KOMENTAR

blog comments powered by Disqus