Cara Mengambil Parameter URL dengan JavaScript (Metode URLSearchParams)

Metode Modern: URLSearchParams

Cara paling efisien dan standar untuk mengambil parameter dari URL di JavaScript adalah menggunakan objek URLSearchParams. Metode ini tersedia secara native di semua browser modern dan jauh lebih bersih dibandingkan menggunakan regex atau manipulasi string manual.

Misalkan Anda memiliki URL: https://azwinn.com/produk?id=123&kategori=elektronik. Berikut adalah cara mengambil nilai dari parameter tersebut:

// 1. Ambil string query dari URL saat ini
const queryString = window.location.search;

// 2. Buat objek URLSearchParams
const urlParams = new URLSearchParams(queryString);

// 3. Ambil nilai berdasarkan nama parameter
const id = urlParams.get('id'); // Hasil: "123"
const kategori = urlParams.get('kategori'); // Hasil: "elektronik"

console.log(id, kategori);

Tabel Perbandingan Metode

Penanganan Kasus Khusus

Terkadang Anda perlu memeriksa apakah suatu parameter ada atau mengambil semua nilai jika terdapat parameter ganda. Berikut adalah teknik lanjutannya:

1. Mengecek Keberadaan Parameter

Gunakan metode .has() untuk memastikan parameter tersebut ada sebelum memprosesnya.

if (urlParams.has('id')) {
  console.log('Parameter ID ditemukan');
}

2. Mengambil Semua Nilai (Parameter Ganda)

Jika URL memiliki format ?tag=js&tag=web, gunakan getAll().

const tags = urlParams.getAll('tag'); // Hasil: ["js", "web"]

Tips Troubleshooting

• Encoding: URLSearchParams secara otomatis menangani decode karakter khusus (seperti spasi yang menjadi %20). Anda tidak perlu melakukan decodeURIComponent secara manual.
• Browser Lawas: Jika target audiens Anda masih menggunakan Internet Explorer, Anda wajib menyertakan polyfill url-search-params agar kode tetap berjalan.
• URL Lengkap: Jika Anda ingin memparsing URL yang bukan dari halaman saat ini, cukup masukkan string URL lengkap ke dalam constructor: new URL('https://example.com?a=1').searchParams.