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:

javascriptlet 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:

javascriptlet 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:

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

Mari kita coba mendapatkan nilai parameter yang tidak ada:

javascriptlet 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:

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

Mari periksa parameter yang tidak ada:

javascriptlet 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:

javascriptlet 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:

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

Mari kita periksa perubahannya:

javascriptlet 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:

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

Mari kita periksa perubahannya:

javascriptlet 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:

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

Mari kita periksa perubahannya:

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

Mari kita coba menambahkan parameter yang sudah ada:

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

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

javascriptlet 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:

javascriptsearchParams.delete('b');

Mari kita periksa perubahannya:

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

Iterasi parameter dengan perulangan

Parameter dapat diiterasi dengan perulangan:

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

Beberapa parameter yang sama

Misalkan dalam string kita terdapat beberapa parameter yang sama:

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

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

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

Tugas praktis

Misalkan diberikan string dengan parameter berikut:

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