Contoh Query String Javascript dan Cara Mengambilnya

Query string adalah bagian dari URL yang digunakan untuk mengirimkan data ke server atau memproses parameter di sisi klien, biasanya diawali dengan tanda tanya (?) dan dipisahkan oleh ampersand (&). Dalam pemrograman JavaScript modern, cara paling efisien dan standar untuk membaca, mengubah, serta mengambil nilai dari query string adalah dengan memanfaatkan objek bawaan URLSearchParams yang dikombinasikan dengan window.location.search.

Tanpa memerlukan pustaka eksternal pihak ketiga, pengembang dapat langsung mengekstrak parameter URL secara aman dan cepat. Berikut adalah implementasi kode nyata serta metode teknis yang sering digunakan dalam pengembangan web sehari-hari.

Contoh Dasar Mengambil Parameter URL

Katakanlah Anda memiliki URL halaman web aktif saat ini dengan alamat: https://example.com/produk.php?kategori=elektronik&id=458&sort=terlaris. Untuk mengambil nilai dari masing-masing parameter tersebut, gunakan skrip JavaScript di bawah ini:

// Mendapatkan string query dari URL saat ini (hasil: "?kategori=elektronik&id=458&sort=terlaris")
const queryString = window.location.search;

// Membuat instance URLSearchParams
const urlParams = new URLSearchParams(queryString);

// Mengambil nilai parameter individual menggunakan method .get()
const kategori = urlParams.get('kategori');
const idProduk = urlParams.get('id');
const urutan = urlParams.get('sort');

console.log(kategori);  // Output: elektronik
console.log(idProduk);  // Output: 458
console.log(urutan);    // Output: terlaris

Metode Umum URLSearchParams JavaScript

Tabel berikut merangkum method utama yang tersedia di dalam kelas URLSearchParams untuk memanipulasi dan membaca data query string:

Studi Kasus: Menangani Parameter Ganda dan Pengecekan

Dalam skenario nyata, seringkali parameter URL tidak selalu disertakan oleh pengguna atau mesin pencari, sehingga diperlukan validasi agar aplikasi tidak mengalami galat (error). Contoh skrip di bawah menunjukkan cara memeriksa keberadaan parameter sebelum mengolahnya:

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

// Memeriksa apakah parameter 'search' ada
if (params.has('search')) {
    const keyword = params.get('search');
    console.log(`Mencari kata kunci: ${keyword}`);
} else {
    console.log('Parameter pencarian tidak ditemukan.');
}

// Contoh parameter ganda: ?tag=js&tag=react
// URL: https://example.com/artikel?tag=js&tag=react
const semuaTag = params.getAll('tag');
console.log(semuaTag); // Output: ["js", "react"]

Tips Troubleshooting Lapangan

Ketika bekerja dengan query string di sisi klien, perhatikan beberapa hal krusial berikut:

• Spasi dan Karakter Khusus: URLSearchParams secara otomatis menangani proses dekode untuk karakter khusus yang di-encode seperti spasi (%20) atau simbol plus (+). Anda tidak perlu menjalankan decodeURIComponent() secara manual.
• Kompatibilitas Peramban: Dukungan untuk URLSearchParams sudah universal di semua peramban modern (Chrome, Firefox, Safari, Edge). Untuk peramban warisan seperti Internet Explorer, diperlukan polyfill khusus, meskipun IE sudah tidak direkomendasikan.
• Single Page Application (SPA): Jika menggunakan kerangka kerja seperti React, Vue, atau Angular dengan perutean sisi klien (client-side routing), pastikan untuk mengambil parameter menggunakan utilitas bawaan router masing-masing (seperti useSearchParams di React Router) alih-alih hanya mengandalkan window.location.search murni.