lifelong learner — urip iku urup, currently working on accenture.

Javascript ES6 – Template literal

0
Degananda.com -

Penulisan string sangat penting dalam javascript. Terdapat beberapa perubahan yang terjadi saat kita akan melakukan printing terhadap suatu variabel atau hanya literal biasa. Jika biasannya kita menggunakan “+” untuk memisahkan literal dan suatu variabel maka pada ES6 diperkenalkan suatu metode baru yang bernama template string. Penggunaan template string ini sangat membantu kita untuk mengkombinasikan literal dengan variabel.

Template Literal

Akses variabel

Pada non-es6 format untuk menuliskan “hello world” yang tersimpan dalam suatu variabel maka syntax yang kita gunakan adalah sebagai berikut ini.

var nama = 'dengananda ferdian priyambada';
console.log(nama);

Dengan menggunakan ES6 kita diperkenalkan dengan istilah template string. Template ini dapat menampilkan literal dan variabel (kombinasi) tanpa menggunakan pemisah “+” (tanda/simbol plus). Data non literal dapat diapit dengan menggunakan “`” dan kemudian setelah itu letakan dollar ($) dan masukan nama variabel diantara dua bracket ({nama variabel}). Simbol ini terletak dipojok kiri keyboard anda disamping kiri keypad angka 1. Sesuatu yang berada di dalam apitan atau diantara tanda tersebut(${sesuatu}) akan diasosiasikan dengan :

  1. Variabel yang berada dalam class / file javascript
  2. Operasi aritmatika
  3. String method

contoh diabwah ini adalah jika kita memanggil variabel nama diatas dengan menggunakan template string yang mana variabel tersebut akan kita apit dengan menggunakan simbol “`”.

var nama = 'dengananda ferdian priyambada';
console.log(`${nama}`);

pada console kita dapat melihat bahwa variabel berhasil kita akses dengan template string. Jika kita ingin mengkombinasikan literal dan variabel maka letakan literal tersebut diluar apitan simbol “${}”. Contohnya kita akan tambahkan literal “nama saya”. Maka implementasinnya adalah seperti berikut ini.

var nama = 'dengananda ferdian priyambada';
console.log(`Nama saya ${nama}`);

Simbol ${} inilah yang akan mengasosiasikan sesuatu didalamnya dengan tiga hal yang telah kami jelaskan diatas. Hasil kode diatas jika dijalankan adalah sebagai berikut ini (pada console).

Aritmatika

Sesuatu yang berada didalam ${} dalam diasosiasikan dengan proses aritmatika seperti pertambahan, pengurangan, pembagian maupun perkalian. Contohnya adalah kita akan operasikan angka maupun variabel didalam simbol/syntax ${} tersebut. Berikut ini adalah contoh implementasinnya

console.log(`Penjumlahan 3 + 3 adalah ${3+3} `)

kode diatas jika dijalankan akan menghasilkan seperti berikut ini

lalu kita akan coba dengan menggunakan variabel sebagai object untuk proses artimatikannya. Maka contoh implementasinnya adalah sebagai berikut ini.

var angkaA = 3;
var angkaB = 3;
console.log(`Penjumlahan 3 + 3 adalah ${angkaA+angkaB} `)

kode daitas jika eksekusi akan menghasilkan hasil seperti diatas

tidak hanya pertambahan yang dapat dijalankan tetapi seluruh proses aritmatika lainnya juga bisa. Seperti pengurangan , perkalian dan pembagian. Untuk pangkat dan sejenisnya kita harus memanfaatkan library math.

String method

Tidak hanya melakukan operasi artimatika dalam simbol ${} diatas, kita dapat megnakses method yang terkait variabel-variabel tersebut. Perhatikan gambar dibawah ini. Intinnya, variabel yang berada di dalam ${} maka akan memiliki sifat layaknya variabel dalam suatu class.

Misalnya kita memiliki variabel string. Kita dapat melakukan fungsi seperti indexof untuk mendapatkan index dari karakter tertentu, membesarkan huruf (menjadikan uppercase) terhadap string tersebut dan metode lain yang berhubungan dengan variabel tersebut. berikut ini adalah contoh dari implementasinnya.

var nama = 'dengananda ferdian priyambada';
console.log(`Nama saya ${nama.toLocaleUpperCase()}`);

kode diatas jika dieksekusi akan menghasilkan hasil seperti ini pada konsol.

Multiline

dengan template literal ini kita dapat menuliskan literal secara multiline. Perhatikan contoh dibawah ini.

console.log(`
hari ini adalah
hari yang luar biasa
karena bulan sedang 
tersenyum menyambut hari yang bahagia
`);

kode diatas jika dieksekusi akan menghasilkan seperti berikut ini

Kesimpulan

Template string sangat berguna dan memudahkan kita dalam menulis program. Karena kita tidak perlu menggunakan tanda “+” (plus/tambah) saat hendak menggabungkan literal dan juga non literal misalkan variabel. Karena menggunakan + akan sangat merepotkan , lebih banyak karakter yang harus ditulis dan diperhatikan. Lihatlah perbedaannya dibawah ini.

ditulis tanpa menggunakna template string.

var nama = 'dengananda ferdian priyambada';
var alamat  = 'jl xxxx 250 surabaya';
console.log("nama saya adalah " + nama + "
 Saya tinggal di " + alamat);

ditulis dengan menggunakan template string

var nama = 'dengananda ferdian priyambada';
var alamat  = 'jl xxxx 250 surabaya';
console.log(`nama saya adalah ${nama} 
 Saya tinggal di alamat ${alamat}`);

sehingga, sebisa mungkin untuk menggunakan template string untuk memudahkan pekerjaan dan kode menjadi sangat CLEAN a.k.a berhasil dan enak untuk dilihat/dipandang.