URLSearchParams adalah antarmuka (interface) bawaan JavaScript yang dirancang untuk memudahkan manipulasi bagian query string (parameter URL setelah tanda tanya ?). Tanpa objek ini, pengembang harus melakukan parsing string secara manual menggunakan fungsi split() atau substring(), yang rentan terhadap kesalahan saat menghadapi karakter khusus atau pengkodean URL (URL encoding).
Dengan URLSearchParams, Anda dapat dengan cepat mengambil nilai parameter tertentu, menambahkan parameter baru, mengubah nilai yang sudah ada, atau menghapusnya menggunakan metode bawaan yang bersih dan standar. Objek ini terintegrasi secara langsung dengan objek URL dan API modern seperti fetch().
Metode Utama URLSearchParams
Berikut adalah tabel ringkasan metode yang paling sering digunakan pada objek URLSearchParams beserta fungsi dan contoh penggunaannya dalam kode:
| Metode | Fungsi Utama | Contoh Penggunaan |
|---|---|---|
get(name) |
Mengambil nilai pertama dari parameter yang dicari. | params.get('search') |
getAll(name) |
Mengambil semua nilai dari parameter dengan nama yang sama (dalam bentuk array). | params.getAll('tag') |
has(name) |
Memeriksa apakah suatu parameter ada di dalam query string (mengembalikan boolean). | params.has('page') |
set(name, value) |
Mengatur nilai parameter. Jika sudah ada, nilainya ditimpa; jika belum, ditambahkan. | params.set('page', '2') |
append(name, value) |
Menambahkan parameter baru tanpa menghapus parameter lama yang bernama sama. | params.append('tag', 'js') |
delete(name) |
Menghapus parameter tertentu dari query string. | params.delete('token') |
toString() |
Mengubah objek kembali menjadi format string URL yang valid. | params.toString() |
Contoh Penggunaan Praktis dalam Kode
Bagian ini menunjukkan bagaimana cara menginisialisasi dan memanipulasi parameter URL dalam skenario pengembangan web nyata menggunakan JavaScript:
// 1. Membaca parameter dari URL saat ini atau string kustom
const queryString = '?category=books&sort=price&tag=js&tag=react';
const params = new URLSearchParams(queryString);
// Mengambil nilai tunggal
console.log(params.get('category')); // Output: "books"
// Mengambil semua nilai dengan nama parameter yang sama
console.log(params.getAll('tag')); // Output: ["js", "react"]
// Memeriksa keberadaan parameter
console.log(params.has('sort')); // Output: true
// 2. Memodifikasi parameter
params.set('sort', 'popular'); // Mengubah nilai 'sort'
params.append('page', '1'); // Menambahkan parameter baru
params.delete('category'); // Menghapus parameter 'category'
// Menghasilkan string query yang telah diperbarui
console.log(params.toString());
// Output: sort=popular&tag=js&tag=react&page=1
Integrasi dengan Objek URL
URLSearchParams sering digunakan bersamaan dengan konstruktor URL untuk memanayangi alamat web secara utuh, mulai dari protokol, domain, hingga path dan query string-nya:
const url = new URL('https://example.com/products?category=shoes&limit=10');
// Mengakses URLSearchParams melalui properti .searchParams
url.searchParams.set('limit', '20');
url.searchParams.append('color', 'black');
console.log(url.toString());
// Output: https://example.com/products?category=shoes&limit=20&color=black
Mengirim Data dengan Fetch API
Anda juga dapat memanfaatkan URLSearchParams langsung sebagai bodi (body) permintaan HTTP POST dengan tipe konten application/x-www-form-urlencoded:
const formData = new URLSearchParams();
formData.append('username', 'johndoe');
formData.append('password', 'secret123');
fetch('https://api.example.com/login', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => console.log(data));
Kompatibilitas Peramban (Browser)
URLSearchParams didukung sepenuhnya oleh semua peramban modern (Chrome, Firefox, Safari, Edge, dan Opera). Untuk mendukung peramban sangat lama seperti Internet Explorer, Anda memerlukan polyfill eksternal, meskipun peramban tersebut saat ini sudah sepenuhnya dihentikan dukungannya oleh industri.