Cara Mudah Mengambil Query String URL dengan JavaScript

Cara paling modern dan efisien untuk mendapatkan nilai parameter query string dari URL di JavaScript adalah menggunakan objek URLSearchParams yang dikombinasikan dengan properti window.location.search. Pendekatan ini merupakan standar bawaan browser masa kini yang menghilangkan kebutuhan akan fungsi kustom atau pustaka eksternal yang rumit.

Sebagai contoh, jika Anda memiliki URL https://contoh.com/halaman?id=42&kategori=elektronik dan ingin mengambil nilai dari parameter id, Anda dapat langsung menggunakan baris kode berikut:

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const idNilai = urlParams.get('id'); 

console.log(idNilai); // Output: "42"

Metode Pengambilan Query String

Terdapat beberapa pendekatan yang dapat digunakan pengembang web untuk membaca parameter URL tergantung pada kebutuhan kompatibilitas browser dan kompleksitas data.

Panduan Teknis Langkah demi Langkah

1. Mengambil Satu Parameter Spesifik

Gunakan metode .get() dari URLSearchParams. Jika parameter yang dicari tidak ada di dalam URL, metode ini secara otomatis akan mengembalikan nilai null.

// URL: https://toko.com/produk?sku=AB-123&stok=tersedia
const params = new URLSearchParams(window.location.search);

const sku = params.get('sku');
const warna = params.get('warna'); // Mengembalikan null karena tidak ada di URL

console.log(sku);   // "AB-123"
console.log(warna); // null

2. Mengubah Seluruh Parameter Menjadi Objek JavaScript

Jika Anda perlu mengelola banyak parameter sekaligus atau mengirimkannya ke server, ubah objek URLSearchParams menjadi objek literal biasa menggunakan Object.fromEntries().

// URL: https://app.com/dashboard?tab=profil&mode=gelap¬if=aktif
const params = new URLSearchParams(window.location.search);
const semuaParam = Object.fromEntries(params.entries());

console.log(semuaParam);
/* Output:
{
  tab: "profil",
  mode: "gelap",
  notif: "aktif"
}
*/

console.log(semuaParam.tab); // "profil"

3. Mengecek Keberadaan Parameter

Sebelum mengambil atau memproses nilai tertentu, pastikan parameter tersebut benar-benar dikirimkan melalui URL menggunakan metode .has().

const params = new URLSearchParams(window.location.search);

if (params.has('ref')) {
  console.log("Pengunjung datang dari referral: ", params.get('ref'));
} else {
  console.log("Tidak ada parameter referral.");
}

Troubleshooting dan Tips Lapangan

• Karakter Spesifik dan Spasi: URLSearchParams secara otomatis menangani proses decoding untuk karakter khusus seperti spasi (yang sering diubah menjadi %20 atau tanda +) serta simbol mata uang. Anda tidak perlu memanggil decodeURIComponent() secara manual.
• Parameter Ganda: Jika URL memiliki parameter dengan nama yang sama (misalnya ?tag=js&tag=react), gunakan metode params.getAll('tag') untuk mengembalikan seluruh nilai dalam bentuk sebuah Array.
• Dukungan Internet Explorer: Jika Anda masih harus mendukung Internet Explorer 11, objek URLSearchParams tidak didukung secara natif dan memerlukan polyfill atau metode penguraian string manual menggunakan manipulasi string standar.