💡 ULASAN & REFERENSI • DIPERBARUI: 26 October 2026 • REDAKSI AZWINN

URLSearchParams JavaScript: Cara Membaca & Mengubah Query String

Antarmuka URLSearchParams di JavaScript menyediakan utilitas bawaan untuk membaca dan memanipulasi bagian query string dari sebuah URL secara mudah tanpa harus melakukan parsing string manual menggunakan split() atau substring(). Objek ini didukung penuh oleh seluruh peramban modern dan lingkungan Node.js, menjadikannya standar baku untuk menangani parameter URL dalam pengembangan web.

Untuk mulai menggunakannya, Anda cukup menginisialisasi objek baru dengan meneruskan string query atau langsung mengambil dari properti window.location.search. Di bawah ini adalah tabel ringkasan metode utama yang paling sering digunakan dalam manipulasi parameter URL.

Metode Utama URLSearchParams

Metode Fungsi Utama Contoh Penggunaan
get(name) Mengambil nilai pertama dari parameter yang cocok. params.get('id')
getAll(name) Mengambil seluruh nilai dalam bentuk array jika ada parameter ganda. params.getAll('tag')
has(name) Memeriksa apakah sebuah parameter ada (mengembalikan boolean). params.has('page')
set(name, value) Mengatur nilai parameter. Jika sudah ada, nilai lama ditimpa. params.set('page', '2')
append(name, value) Menambahkan parameter baru tanpa menghapus nilai yang sudah ada. params.append('tag', 'js')
delete(name) Menghapus parameter tertentu dari query string. params.delete('token')
toString() Mengubah objek kembali menjadi string query yang ter-encode. params.toString()

Contoh Implementasi Praktis

Berikut adalah contoh kode nyata bagaimana mendeklarasikan, membaca, memodifikasi, dan membaca ulang parameter URL menggunakan JavaScript:

// 1. Inisialisasi dari string query atau URL lengkap
const queryString = '?search=javascript&page=2&tag=frontend&tag=web';
const params = new URLSearchParams(queryString);

// 2. Membaca nilai parameter
console.log(params.get('search')); // Output: 'javascript'
console.log(params.get('page'));   // Output: '2'

// Membaca parameter ganda dengan getAll
console.log(params.getAll('tag')); // Output: ['frontend', 'web']

// 3. Memeriksa keberadaan parameter
console.log(params.has('sort'));   // Output: false

// 4. Menambah dan mengubah parameter
params.set('page', '3');           // Mengubah nilai 'page' menjadi 3
params.append('sort', 'latest');   // Menambahkan parameter baru 'sort'

// 5. Menghapus parameter
params.delete('tag');            // Menghapus semua parameter dengan nama 'tag'

// 6. Mendapatkan hasil akhir sebagai string
console.log(params.toString());    // Output: 'search=javascript&page=3&sort=latest'

Mengambil Parameter dari URL Halaman Aktif

Dalam skenario nyata pengembangan aplikasi web sisi klien (frontend), Anda seringkali perlu membaca parameter dari URL yang sedang diakses oleh pengguna di browser. Anda dapat menggabungkan objek window.location.search langsung ke dalam konstruktor URLSearchParams:

// Asumsi URL saat ini adalah: https://example.com/products?category=shoes&limit=10

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

const category = urlParams.get('category'); // 'shoes'
const limit = urlParams.get('limit');       // '10'

console.log(`Menampilkan kategori ${category} dengan batas ${limit}`);

Melakukan Iterasi pada Parameter

Objek URLSearchParams bersifat iterable, yang berarti Anda dapat dengan mudah melakukan perulangan (looping) untuk mengambil seluruh kunci dan nilai parameter yang tersedia menggunakan metode forEach, for...of, atau mengonversinya menjadi objek biasa.

const params = new URLSearchParams('name=Budi&role=developer&active=true');

// Menggunakan for...of
for (const [key, value] of params) {
  console.log(`${key}: ${value}`);
}

// Mengubah seluruh parameter menjadi objek JavaScript biasa
const paramsObj = Object.fromEntries(params);
console.log(paramsObj); 
// Output: { name: 'Budi', role: 'developer', active: 'true' }

Tips Troubleshooting Lapangan

Saat bekerja dengan URLSearchParams, perhatikan beberapa hal teknis berikut agar terhindar dari bug:

  • Encoding Otomatis: URLSearchParams secara otomatis melakukan URL encoding pada karakter khusus (seperti spasi menjadi %20 atau karakter khusus lainnya). Anda tidak perlu melakukan encodeURIComponent() secara manual saat memasukkan nilai.
  • Nilai Kosong: Jika parameter ada namun tidak memiliki nilai (contoh: ?active tanpa tanda sama dengan), metode get() akan mengembalikan string kosong "", sedangkan metode has() akan mengembalikan true.
  • Immutable pada Window.location: Memodifikasi objek URLSearchParams tidak secara otomatis mengubah URL di address bar browser. Anda harus memperbarui state browser menggunakan window.history.pushState() atau window.history.replaceState() jika ingin merefleksikan perubahan URL secara visual tanpa melakukan reload halaman.

🔍 Orang Lain Juga Mencari Ini