Bekerja dengan URLSearchParams di JavaScript

Seperti yang sudah Anda ketahui, saat bekerja dengan formulir dan permintaan GET di JavaScript, muncul string dengan bentuk seperti ini:

let paramsString = 'a=1&b=2&c=3';

Terkadang kita perlu mengubah nilai suatu parameter dari string ini secara terprogram. Menulis kode yang melakukan ini tidak terlalu nyaman. Oleh karena itu, JavaScript memiliki kelas khusus URLSearchParams untuk bekerja dengan string seperti ini.

Mari kita buat objek dari kelas ini dengan meneruskan string parameter kita sebagai parameternya:

let paramsString = 'a=1&b=2&c=3';
let searchParams = new URLSearchParams(paramsString);

Mari kita lihat metode apa saja yang dimiliki oleh objek yang telah dibuat.

Mendapatkan nilai parameter

Dengan menggunakan metode get, Anda bisa mendapatkan nilai parameter:

let res = searchParams.get('a');
console.log(res);

Mari kita coba mendapatkan nilai parameter yang tidak ada:

let res = searchParams.get('x');
console.log(res); // akan menampilkan null

Memeriksa keberadaan parameter

Dengan menggunakan metode has, Anda bisa memeriksa keberadaan parameter. Mari periksa parameter yang ada:

let res = searchParams.has('a');
console.log(res); // akan menampilkan true

Mari periksa parameter yang tidak ada:

let res = searchParams.has('x');
console.log(res); // akan menampilkan false

Mengubah menjadi string

Dengan menggunakan metode toString, Anda bisa mengubah objek kita kembali menjadi string:

let res = searchParams.toString();
console.log(res); // akan menampilkan 'a=1&b=2&c=3'

Mengubah parameter

Dengan menggunakan metode set, Anda bisa mengubah nilai parameter:

searchParams.set('b', 'x');

Mari kita periksa perubahannya:

let res = searchParams.toString();
console.log(res); // akan menampilkan 'a=1&b=x&c=3'

Menambahkan parameter

Dengan menggunakan metode set, Anda juga bisa menambahkan parameter baru:

searchParams.set('d', '4');

Mari kita periksa perubahannya:

let res = searchParams.toString();
console.log(res); // akan menampilkan 'a=1&b=2&c=3&d=4'

Menambahkan parameter

Dengan menggunakan metode append, Anda juga bisa menambahkan parameter baru:

searchParams.append('d', '4');

Mari kita periksa perubahannya:

let res = searchParams.toString();
console.log(res); // akan menampilkan 'a=1&b=2&c=3&d=4'

Mari kita coba menambahkan parameter yang sudah ada:

searchParams.append('a', '4');

Dalam hal ini, metode kita hanya akan menambahkan parameter bernama sama di akhir:

let res = searchParams.toString();
console.log(res); // akan menampilkan 'a=1&b=2&c=3&a=4'

Di sinilah perbedaan antara metode set dan append terlihat. Yang pertama akan mengubah parameter yang ada, sedangkan yang kedua hanya akan menambahkan duplikatnya di akhir.

Menghapus parameter

Dengan menggunakan metode delete, Anda bisa menghapus parameter:

searchParams.delete('b');

Mari kita periksa perubahannya:

let res = searchParams.toString();
console.log(res); // akan menampilkan 'a=1&c=3'

Iterasi parameter dengan perulangan

Parameter dapat diiterasi dengan perulangan:

for (let p of searchParams) {
	console.log(p);
}

Beberapa parameter yang sama

Misalkan dalam string kita terdapat beberapa parameter yang sama:

let paramsString = 'a=1&a=2&b=2&c=3';

Dengan menggunakan metode getAll, Anda bisa mendapatkan array nilai dari parameter-parameter ini:

let res = searchParams.getAll('a');
console.dir(res); // akan menampilkan [1, 2]

Tugas praktis

Misalkan diberikan string dengan parameter berikut:

let paramsString = 'test1=param1&test2=param2&test3=param3';

Tambahkan satu parameter test3 lagi ke dalam string ini.

Hapus parameter test2 dari string ini.

Ubah parameter test1 menjadi nilai baru.