Belajar JavaScript - Manipulasi String dan Tanggal

#Pendahuluan

Sebagian besar data yang ditangani aplikasi adalah teks dan waktu: nama pengguna, email, tanggal lahir, timestamp log, dan jadwal. Episode 6 membekali kalian dua perangkat yang paling sering dipakai sehari-hari: method string untuk mengolah teks, dan objek Date plus Intl untuk mengolah waktu.

Banyak bug aplikasi berakar dari kesalahan kecil di dua area ini: membandingkan tanggal dengan ==, lupa bahwa bulan di JavaScript dimulai dari nol, atau salah menangani timezone. Episode ini akan mencegah semua jebakan itu sebelum menyerang kalian di project sungguhan.

Semua contoh berdiri sendiri dan bisa langsung dijalankan dengan node. Perhatikan baik-baik bagian bulan yang dimulai dari nol — itu jebakan klasik.

#Method String yang Sering Dipakai

#Mencari dan Memeriksa Isi

String di JavaScript bersifat immutable — method-nya tidak mengubah string asli, melainkan mengembalikan string baru. Mulai dari yang paling umum:

Mencari dalam string

const email = "Arman.Dwi@Contoh.com";
 
console.log(email.length);
console.log(email.includes("@"));
console.log(email.startsWith("Arman"));
console.log(email.endsWith(".com"));
console.log(email.toLowerCase().includes("contoh"));

email.includes("@") mengembalikan true, dan email.toLowerCase() menurunkan huruf sebelum diperiksa dengan includes. Pola case-insensitive check seperti ini sangat umum untuk validasi input — membandingkan teks selalu dilakukan setelah kedua sisi diseragamkan.

#Memotong dan Memecah

slice mengambil bagian string berdasarkan indeks, dan split memecah string menjadi array:

Memotong dan memecah string

const kalimat = "Belajar JavaScript itu menyenangkan";
 
console.log(kalimat.slice(0, 7));
console.log(kalimat.split(" "));
const kata = kalimat.split(" ");
console.log(kata.length);

kalimat.slice(0, 7) mengembalikan "Belajar" — indeks awal disertakan, indeks akhir tidak. kalimat.split(" ") memecah kalimat berdasarkan spasi menjadi array kata, dan kata.length menghitung jumlah katanya. Kombinasi split, slice, dan join adalah cara standar mengolah teks terstruktur.

#Mengganti dan Membersihkan

replace mengganti bagian string, dan trim menghapus spasi di awal dan akhir:

Mengganti dan membersihkan

const harga = " Rp25.000 ";
const bersih = harga.trim();
const tanpaRp = bersih.replace("Rp", "");
 
console.log(bersih);
console.log(tanpaRp);
console.log(bersih.replaceAll("0", "5"));

harga.trim() menghapus spasi, lalu replace("Rp", "") menghapus prefiks. replaceAll mengganti semua kemunculan. Input dari pengguna hampir selalu perlu trim sebelum diproses — ini mencegah bug yang sulit dilacak karena perbedaan spasi.

#Template Literal dan Interpolasi

Template literal kembali berperan besar untuk menyusun teks dinamis. Kelebihannya dibanding rangkaian +: multi-baris, ekspresi di dalam ${}, dan bisa memanggil method langsung:

Template literal dengan ekspresi

const nama = "Arman";
const menit = 45;
 
const laporan = `Selamat datang, ${nama.toUpperCase()}!
Kamu sudah belajar selama ${menit} menit di series ini.`;
 
console.log(laporan);

${nama.toUpperCase()} mengeksekusi ekspresi sebelum disisipkan ke string. Outputnya dua baris: Selamat datang, ARMAN! diikuti ringkasan durasi. Template literal membuat laporan teks yang dinamis jadi jauh lebih mudah dibaca daripada merangkai banyak +.

#Objek Date dan Waktu

#Membuat dan Mengambil Bagian Tanggal

Objek Date merepresentasikan momen dalam waktu. Dua jebakan wajib diingat: bulan dimulai dari 0, dan objek Date bisa dimutasi:

Membuat objek Date

const sekarang = new Date();
const tanggalLahir = new Date(1990, 4, 17);
 
console.log(sekarang.getFullYear());
console.log(sekarang.getMonth());
console.log(sekarang.getDate());
console.log(tanggalLahir.toISOString().slice(0, 10));

new Date(1990, 4, 17) membuat tanggal 17 Mei 1990 — bukan April — karena bulan 4 berarti Mei (indeks nol-based). toISOString().slice(0, 10) mengekstrak bagian tanggal menjadi format 1990-05-17, format standar yang aman untuk dikirim ke API.

#Timestamp dan Perbandingan Tanggal

Setiap Date menyimpan timestamp internal berupa milidetik sejak 1 Januari 1970. Membandingkan timestamp jauh lebih andal daripada membandingkan string:

Membandingkan tanggal via timestamp

const awal = new Date(2026, 0, 1);
const akhir = new Date(2026, 11, 31);
 
const selisihMs = akhir.getTime() - awal.getTime();
const selisihHari = selisihMs / (24 * 60 * 60 * 1000);
 
console.log(`Selisih hari: ${selisihHari}`);
console.log(akhir.getTime() > awal.getTime());

akhir.getTime() - awal.getTime() menghitung selisih dalam milidetik, lalu dibagi dengan jumlah milidetik per hari untuk mendapat 364 hari. Jangan pernah membandingkan Date dengan == atau === — itu membandingkan referensi objek, bukan nilainya. Selalu pakai getTime().

#Memformat dengan Intl

#Intl.DateTimeFormat untuk Tanggal

Memformat tanggal secara manual itu rentan error. API Intl memformat otomatis sesuai locale, lengkap dengan penanggalan dan bahasa yang benar:

Format tanggal sesuai locale

const hari = new Date(2026, 7, 10);
 
console.log(new Intl.DateTimeFormat("id-ID").format(hari));
console.log(
  new Intl.DateTimeFormat("id-ID", {
    weekday: "long",
    year: "numeric",
    month: "long",
    day: "numeric",
  }).format(hari)
);

new Intl.DateTimeFormat("id-ID") memformat 10/08/2026 sesuai kebiasaan Indonesia. Dengan opsi weekday dan month: "long", hasilnya seperti Senin, 10 Agustus 2026. Semua nama bulan dan hari ditangani oleh browser sesuai locale — kalian tidak menulis tabel terjemahan manual.

#Intl.NumberFormat untuk Angka dan Mata Uang

Format angka uang juga sebaiknya diserahkan ke Intl, bukan disusun manual dengan replace:

Format angka dan mata uang

const harga = 1250000;
 
console.log(new Intl.NumberFormat("id-ID").format(harga));
console.log(
  new Intl.NumberFormat("id-ID", {
    style: "currency",
    currency: "IDR",
  }).format(harga)
);

new Intl.NumberFormat("id-ID") menghasilkan 1.250.000, dan opsi style: "currency" menghasilkan Rp1.250.000. Memakai Intl berarti format kalian otomatis mengikuti konvensi locale — penting untuk aplikasi yang dipakai lintas negara.

#Penutup

Episode 6 membekali kalian perangkat pengolahan teks dan waktu: method string untuk mencari, memotong, mengganti, dan membersihkan, template literal untuk teks dinamis, objek Date dengan kesadaran bulan nol-based dan timestamp, serta Intl untuk memformat tanggal dan angka sesuai locale.

Inti yang harus dibawa pulang:

• Method string tidak mengubah string asli karena string bersifat immutable.
• Bulan di Date dimulai dari nol: bulan 4 berarti Mei.
• Bandingkan tanggal lewat getTime(), bukan operator ==.
• Intl.DateTimeFormat dan Intl.NumberFormat memformat otomatis per locale.
• trim sebelum memproses input pengguna agar tidak ada spasi tersembunyi.
• Template literal mengeksekusi ekspresi di dalam ${}.

Di episode 7 selanjutnya kita akan membahas fungsi lanjutan, parameter default, rest, dan spread — mengisi parameter yang tidak dikirim dengan nilai default, menampung banyak argumen dengan rest parameter, dan menyebar array atau objek dengan spread operator. Inilah gaya menulis fungsi modern yang lebih fleksibel dan ringkas.