Template Literals di JavaScript – JavaScript ES6 #2

Template Literals (Template String) di JavaScript

Pada ES6, jika kita menggabungkan string dengan sebuah atau beberapa variable kita harus melakukan concatinate dengan menggunakan operator penjumlahan (+), misalnya seperti potongan kode berikut:

const namaDepan = ‘Yaumil’;
const nameBelakang = ‘Ikhsan’;
const thnLahir = 1998;

console.log(‘Ini adalah ’ + namaDepan + ‘ ’ + namaBelakang + ‘. Dia lahir pada ’ + thnLahir);

Cara ini tergolong sulit, apalagi jika kita harus melakukan penggabungan banyak variabel seperti di atas. Kita harus menulis string dengan menggunakan dengan tanda kutip kemudian menggunakan operator penjumlahan, mengatur spasi, menulis string dengan tanda kutip lagi dan seterusnya.

Cara Menggabungkan String dengan Template Literals

Pada ES6, JavaScript memiliki sebuah fitur baru yang dinamakan dengan template literals yang akan memudahkan kita ketika harus berhadapan dengan masalah penyambungan string dan sebagainya.

Dengan template literals, alih-alih menggunakan tanda kutip seperti pada contoh diatas, kita bisa menggunakan tanda kutip terbalik atau backtick untuk menulis string dan bisa menggabungkannya dengan variabel dan fungsi-fungsi tanpa harus menggunakan operator penambahan “+”.

Kita bisa menulis variabel-variabel atau fungsi-fungsi untuk menggabungkannya dengan string pada template literals dengan menulisnya di dalam sepasang tanda kurung kurawal yang diawali dengan menulis tanda dolar ( `${ … }` ).

Misalnya pada potongan kode sebelumnya, kita melakukan penggabungan string dan variabel dengan menggunakan template literals seperti berikut:

const namaDepan = ‘Yaumil’;
const nameBelakang = ‘Ikhsan’;
const thnLahir = 1998;

console.log(`Ini adalah ${namaDepan} ${namaBelakang}. Dia lahir pada ${thnLahir}`);

Potongan kode untuk melakukan console log string diatas yang ditulis dengan template literals akan berjalan sama persis dengan potongan kode sebelumnya yang ditulis dengan penggabungan string biasa menggunakan ES5.

Dengan menggunakan template literals penggabungan string dengan variablel dan function bisa ditulis dan dibaca dengan lebih mudah dan lebih mudah.

Bukan hanya variabel dan fungsi, pada template string literals kita bisa menulis semua kode JavaScript seperti biasanya, seperti melakukan operasi dan sebagainya.

Misalnya kita ingin melakukan menghitung dan mencetak umur berdasarkan operasi pada variabel “thnLahir” sebelumnya, kita bisa melakukannya langsung pada template literals, seperti berikut:

const namaDepan = ‘Yaumil’;
const nameBelakang = ‘Ikhsan’;
const thnLahir = 1998;

console.log(`Ini adalah ${namaDepan} ${namaBelakang}. Dia berumur ${2018 – thnLahir}`);

Membuat Baris Baru dengan Template Literals di JavaScript

Sebelumnya, jika ingin membuat sebuah garis baru pada sebuah string di JavaScript, kita harus menggunakan notasi regex “\n” seperti berikut:

let kalimat = ‘Ini Budi \n\nIni Ibu Budi \n\nIni Ayah Budi \n\nIni Adik Budi’;

Dengan menggunakan template literals, kita bisa membuat sebuah garis baru pada sebuah string dengan langsung memberi jarak menggunakan tombol enter seperti biasa.

Misalnya seperti pada contoh string sebelumnya, kita bisa melakukannya dengan lebih mudah seperti berikut:

let kalimat = `Ini Budi

Ini Ibu Budi

Ini Ayah Budi

Ini Adik Budi`;