Template literal dan pengolahan string

Idenya

Begitu banyak bagian aplikasi web berupa teks: nama produk, harga dengan pemisah ribuan, pesan yang dibangun dari data, kata pencarian yang diketik dengan spasi nyasar dan huruf kapital. String JavaScript dilengkapi kotak perkakas berisi method untuk tugas-tugas persis seperti ini, dan template literal membuat pembangunan teks dari data mudah dibaca.

Template literal

Halaman keranjang butuh baris seperti "Total for 2 × Arabica Gayo: Rp 190.000", yang dibangun dari jumlah, nama, dan total yang dihitung. Cara lama merekatkannya dengan +, yang cepat jadi berantakan. Bandingkan dengan template literal, yang memungkinkanmu menulis kalimatnya lalu menyisipkan nilainya langsung ke dalamnya:

const name = "Arabica Gayo";
const price = 95000;
const qty = 2;

console.log("Total for " + qty + " × " + name + ": Rp " + (price * qty).toLocaleString("id-ID"));
console.log(`Total for ${qty} × ${name}: Rp ${(price * qty).toLocaleString("id-ID")}`);
console.log(`${qty > 1 ? "items" : "item"} in your cart`);

Total for 2 × Arabica Gayo: Rp 190.000
Total for 2 × Arabica Gayo: Rp 190.000
items in your cart

• Template literal memakai backtick ( ` ), bukan tanda kutip.
• ${...} menyisipkan hasil ekspresi apa pun: sebuah variabel, perhitungan, pemanggilan function, ternary.
• Template literal bisa membentang beberapa baris, yang membuat potongan HTML kecil mudah dibaca (seperti di modul-modul DOM).

Output-nya sama, tetapi template literal terbaca seperti kalimat yang dihasilkannya. Gunakan setiap kali kamu menggabungkan teks dengan nilai. (Saat menyisipkan data pengguna ke HTML, ingat modul 5: bangun elemen dengan textContent saja.)

Membersihkan dan membandingkan

Saat seseorang mengetik " Arabica GAYO " di kotak pencarian, maksudnya sama dengan "arabica gayo". Tapi bagi JavaScript keduanya string yang sama sekali berbeda, dan pencarian yang langsung membandingkannya tidak menemukan apa pun. Membersihkan input sebelum membandingkan menyelesaikan sebagian besar masalah ini:

const typed = "   Arabica GAYO  ";
console.log(`[${typed.trim()}]`);
console.log(typed.trim().toLowerCase());
console.log(typed.toLowerCase().includes("gayo"));
console.log("NG-0018".startsWith("NG-"), "photo.JPG".toLowerCase().endsWith(".jpg"));
console.log("kopi" === "Kopi", "kopi" === "Kopi".toLowerCase());

[Arabica GAYO]
arabica gayo
true
true true
false true

String dibandingkan persis, karakter demi karakter, jadi normalkan input pengguna lebih dulu: trim() membuang spasi di sekelilingnya, toLowerCase() membuat perbandingan tidak peka huruf besar-kecil. Dua panggilan ini mencegah sebagian besar bug "pencariannya tidak menemukan apa-apa".

String bersifat immutable: setiap method mengembalikan string baru dan membiarkan yang asli tidak berubah. typed.trim() tidak mengubah typed; kamu harus memakai atau menyimpan hasilnya.

Membongkar string

Kode produk seperti NG-0018-BLK memadatkan beberapa fakta dalam satu string: merek, nomor, dan warnanya. Dan daftar tag yang diketik manusia, seperti "arabica, aceh , single origin", perlu dijadikan tag-tag terpisah. Method-method ini memotong string menjadi potongan-potongan dan menyatukan potongan kembali:

const sku = "NG-0018-BLK";
console.log(sku.length, sku[0], sku.at(-1));
console.log(sku.slice(3, 7), sku.slice(-3));
console.log(sku.indexOf("-"), sku.split("-"));

const tags = "arabica, aceh , single origin";
console.log(tags.split(",").map((t) => t.trim()));
console.log(["Gayo", "Toraja", "Kintamani"].join(" · "));

11 N K
0018 BLK
2 ["NG", "0018", "BLK"]
["arabica", "aceh", "single origin"]
Gayo · Toraja · Kintamani

• slice(start, end) mengambil sepotong (end tidak termasuk); angka negatif dihitung dari akhir.
• split(separator) mengubah string menjadi array; join(separator) mengubah array kembali menjadi string.

Mengganti dan menambahkan padding

Harga sering datang sebagai teks seperti "Rp 1.250.000", yang tidak bisa dihitung sampai "Rp" dan titik-titiknya dibuang. Dan nomor pesanan sering butuh lebar tetap, seperti 0007 alih-alih 7. Method-method ini menangani kedua pekerjaan itu:

console.log("Rp 1.250.000".replaceAll(".", "").replace("Rp ", ""));
console.log(Number("Rp 1.250.000".replace(/[^\d]/g, "")));
console.log(String(7).padStart(4, "0"), "Total".padEnd(10, ".") + "Rp 95.000");
console.log("ha".repeat(3));

1250000
1250000
0007 Total.....Rp 95.000
hahaha

• replace mengubah kecocokan pertama; replaceAll mengubah setiap kecocokan.
• Keduanya menerima regular expression: /[^\d]/g berarti "karakter apa pun yang bukan digit, di mana saja" (flag g). Membuang yang bukan digit adalah cara andal mem-parse harga Indonesia, di mana . adalah pemisah ribuan.
• padStart / padEnd menambahkan karakter sampai panjang tertentu: praktis untuk nomor pesanan dan teks yang sejajar.

Memformat angka untuk manusia

Masalah sebaliknya: kamu punya angka seperti 1250000.5 dan perlu menampilkannya ke pelanggan Indonesia sebagai "1.250.000,5" atau "Rp 95.000". JavaScript punya format bawaan yang tahu konvensi setiap negara, jadi kamu tidak perlu menambahkan titiknya sendiri:

const amount = 1250000.5;
console.log(amount.toLocaleString("id-ID"));
console.log(amount.toLocaleString("en-US"));
console.log(Math.round(amount).toLocaleString("id-ID"));
console.log((0.1234).toFixed(2), (12.5).toFixed(0));

const rupiah = new Intl.NumberFormat("id-ID", { style: "currency", currency: "IDR", maximumFractionDigits: 0 });
console.log(rupiah.format(95000).replace(/\s/, " "));

1.250.000,5
1,250,000.5
1.250.001
0.12 13
Rp 95.000

• toLocaleString(locale) memformat dengan pemisah yang tepat: Indonesia memakai . untuk ribuan dan , untuk desimal.
• toFixed(n) memberikan string dengan tepat n desimal (hanya untuk tampilan).
• Intl.NumberFormat menangani mata uang dengan benar. Buat formatter-nya sekali dan pakai ulang. (Ia menaruh non-breaking space setelah "Rp", yang di sini diganti dengan spasi biasa supaya output-nya polos.)

Mengapa ini penting untuk kode yang bersih

Taruh pemformatan di satu tempat: helper formatRupiah(amount) yang dipakai di mana-mana, alih-alih "Rp " + x.toLocaleString(...) yang tersebar di seluruh codebase. Saat format-nya berubah (menambah desimal, locale lain untuk halaman berbahasa Inggris), kamu mengubah satu function. Hal yang sama berlaku untuk menormalkan kata pencarian: satu function normalise(text), dipakai oleh setiap perbandingan.

Rangkuman

• Template literal: backtick dan ${expression}; boleh banyak baris.
• trim, toLowerCase/toUpperCase, includes, startsWith, endsWith; string bersifat immutable.
• length, at(-1), slice, indexOf, split, join.
• replace (pertama) vs replaceAll; regex /[^\d]/g untuk menyisakan digit; padStart/padEnd, repeat.
• toLocaleString("id-ID"), toFixed(n) (mengembalikan string), Intl.NumberFormat untuk mata uang.