temlate literals

Template Literals: Cara Modern dan Elegan Mengelola String di JavaScript

Sebelum ES6 (2015) hadir, menggabungkan teks dengan variabel di JavaScript adalah pekerjaan yang melelahkan dan rentan kesalahan. Kita harus berurusan dengan tumpukan tanda tambah (+) dan kutip yang membingungkan.

Template Literals datang sebagai solusi untuk membuat penulisan string menjadi lebih bersih, fleksibel, dan mudah dibaca.

1. Apa Itu Template Literals?

Template Literals adalah fitur baru untuk mendefinisikan string menggunakan karakter backtick (` `), yang biasanya terletak di pojok kiri atas keyboard (di bawah tombol Esc).

Berbeda dengan tanda kutip biasa (' atau "), backtick memungkinkan kita melakukan dua hal besar:

1. Interpolasi Variabel: Menyisipkan variabel langsung ke dalam string.

2. Multi-line String: Menulis string dalam beberapa baris tanpa kode tambahan.

2. Sintaks Dasar: String Interpolation

Fitur paling populer dari Template Literals adalah String Interpolation. Kita bisa menyisipkan ekspresi JavaScript ke dalam string dengan membungkusnya menggunakan tanda ${expression}.

Perbandingan: Dulu vs Sekarang

Cara Lama (Concatenation):

Seringkali kita lupa memberikan spasi atau salah menaruh tanda kutip.

const nama = "Rian";
const umur = 25; const salam = "Halo, nama saya " + nama + " dan saya berumur " + umur + " tahun.";

Cara Baru (Template Literals):

Jauh lebih intuitif dan mirip dengan cara kita berbicara.

const nama = "Rian";
const umur = 25; const salam = `Halo, nama saya ${nama} dan saya berumur ${umur} tahun.`;

3. Kekuatan di Dalam ${}

Di dalam tanda ${}, Anda tidak hanya bisa memasukkan nama variabel tunggal, tetapi hampir semua ekspresi JavaScript.

A. Operasi Matematika

Anda bisa langsung menghitung nilai di dalam string.

const harga = 50000;
const diskon = 0.1; // 10% console.log(`Harga setelah diskon adalah: Rp${harga - (harga * diskon)}`);

B. Menjalankan Fungsi

Anda bisa memanggil fungsi dan hasilnya akan langsung muncul di dalam string.

function cekStatus(poin) { return poin > 50 ? "Gold" : "Silver";
} const userPoin = 75;
console.log(`Member status: ${cekStatus(userPoin)}`); // Output: Member status: Gold

4. Multi-line String: Tanpa \n Lagi!

Jika Anda ingin membuat teks yang terdiri dari beberapa baris menggunakan kutip biasa, Anda harus menggunakan karakter escape \n. Dengan Template Literals, Anda cukup menekan Enter.

// Menggunakan Backticks
const daftarBelanja = `
Daftar Belanja:
1. Susu
2. Telur
3. Roti
`; console.log(daftarBelanja);

5. Menangani Tanda Kutip dengan Mudah

Salah satu masalah menyebalkan adalah saat kita ingin menulis kalimat yang mengandung tanda kutip di dalamnya (seperti: Hari ini hari "Jumat").

• Kutip Biasa: Perlu escaping ("Hari ini hari \"Jumat\"")

• Backticks: Langsung tulis saja!

  • Contoh: `I'm learning "JavaScript" today!`

Kesimpulan

Template Literals bukan sekadar "cara lain" menulis string; ini adalah standar industri saat ini. Menggunakan backticks akan membuat kode Anda:

• Cleaner: Menghilangkan tumpukan operator +.

• Readable: Struktur kalimat terlihat jelas.

• Maintainable: Lebih mudah diubah di masa depan.

Saran: Mulai sekarang, biasakan menggunakan backticks untuk semua string yang melibatkan variabel agar kode Anda terlihat lebih profesional dan modern.