Belajar Template Literals Javascript

ES6 menawarkan kemudahan bagi developer dalam mengelola nilai string. Sebelum ES6, cara lama dalam menggabungkan nilai string adalah dengan menggunakan operator (+).

const user = {
    firstName: "Dimas",
    lastName: "Saputra",
    age: 18
}
 
console.log("Nama: " + user.firstName + " " + user.lastName + ", Umur: " + user.age);
 
/* output
Nama: Dimas Saputra, Umur: 18
*/

Mungkin hal tersebut tidak terlalu repot, tapi jika dalam proses penggabungan tersebut terdapat garis baru, ini jadi sangat merepotkan.

const user = {
    firstName: "Dimas",
    lastName: "Saputra",
    age: 18
}
 
const admin = {
    name: "Jane",
    position: "Marketing"
}
 
const message = "Dear, " + user.firstName + " " + user.lastName +  "\n\n" +
"Selamat ulang tahun yang ke-" + user.age + " semoga selalu diberikan kesehatan." + "\n\n" +
"Best Regards,\n" +
admin.name + "\n" +
admin.position;
 
console.log(message);
 
/* output ->
Dear, Dimas Saputra
 
Selamat ulang tahun yang ke-18 semoga selalu diberikan kesehatan.
 
Best Regards,
Jane
Marketing
*/

kita bisa lihat betapa repotnya membuat pesan tersebut. Entah berapa banyak operator (+) yang perlu kita gunakan. 

Jangan khawatir karena ada template literals yang mampu menyederhanakan proses tersebut. Bagaimana menggunakannya? Gunakanlah tanda backticks (`) untuk menggantikan tanda single quotes (‘) atau double quotes (“) yang digunakan sebelumnya. Template literals juga dapat mengandung sebuah expression dengan menuliskannya di dalam tanda ${expression}. Hal ini sungguh membantu sekali dalam pembuatan nilai string yang kompleks menjadi jauh lebih mudah.

const user = {
    firstName: "Dimas",
    lastName: "Saputra",
    age: 18
}
 
console.log(`Nama: ${user.firstName} ${user.lastName}, Umur: ${user.age}`);
 
/* output:
Nama: Dimas Saputra, Umur: 18
*/

Template literals juga dapat membaca line space secara langsung tanpa harus menggunakan escape character. 

const user = {
    firstName: "Dimas",
    lastName: "Saputra",
    age: 18
}
 
const admin = {
    name: "Jane",
    position: "Marketing"
}
 
const message = `Dear, ${user.firstName} ${user.lastName}
 
Selamat ulang tahun yang ke-${user.age} semoga selalu diberikan kesehatan.
 
Best Regards,
${admin.name}
${admin.position}`;
 
console.log(message);
 
/* output ->
Dear, Dimas Saputra
 
Selamat ulang tahun yang ke-18 semoga selalu diberikan kesehatan.
 
Best Regards,
Jane
Marketing
*/

Apakah Anda sudah menerapkan template literals pada seluruh pengelolaan nilai string? Jika belum, mari kita lakukan hal tersebut bersama-sama.

Yang pertama, pada berkas main.js, tepatnya di dalam fungsi renderResult kita ubah kode seperti ini 

clubElement.innerHTML = `
   <img class="fan-art-club" src="${fanArt}" alt="Fan Art">
   <div class="club-info">
       <h2>${name}</h2>
       <p>${description}</p>
   </div>`;

Lalu kita ubah juga kode yang berada pada fungsi fallbackResult ini:

clubListElement.innerHTML += '<h2 class="placeholder">' + message + '</h2>';

Menjadi seperti ini:

clubListElement.innerHTML += `<h2 class="placeholder">${message}</h2>`;

Template literals sangat membantu dalam melakukan templating HTML pada JavaScript, karena kita dapat menyisipkan expression di dalamnya dengan mudah.

Terakhir, sebaiknya kita terapkan juga template literals pada kode yang berada di berkas data-source.js. Lebih tepatnya pada fungsi searchClub.

this.onFailed(keyword + " is not found");

Menjadi:

this.onFailed(`${keyword} is not found`);

Untuk memastikan perubahan yang kita lakukan sudah benar, silakan Anda coba buka berkas index.html pada browser. Jika aplikasi berjalan dengan lancar, maka fitur template literals berhasil diterapkan dengan baik.

Namun jika aplikasi tidak berjalan lancar, dan menghasilkan eror pada console browser, jangan malu untuk bertanya pada forum diskusi ya!

Langkah dari solution ini bisa Anda temukan juga pada repository berikut: https://github.com/dicodingacademy/a163-bfwd-labs/tree/103-club-finder-template-literals-solution

zz