Penggunaan URLSearchParams dalam JavaScript

Seperti yang anda sudah ketahui, apabila bekerja dengan borang dan permintaan GET dalam JavaScript, terhasilnya rentetan seperti berikut:

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

Kadangkala kita perlu mengubah nilai satu parameter tertentu dalam rentetan tersebut secara pengaturcaraan. Menulis kod untuk melakukannya adalah tidak begitu mudah. Oleh itu, JavaScript mempunyai kelas khas URLSearchParams untuk bekerja dengan rentetan seperti ini.

Mari kita cipta objek kelas ini dengan menghantar rentetan parameter kita sebagai parameter:

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

Mari kita lihat kaedah-kaedah yang ada pada objek yang dicipta.

Mendapat nilai parameter

Dengan menggunakan kaedah get, kita boleh mendapatkan nilai parameter:

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

Mari cuba dapatkan nilai parameter yang tidak wujud:

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

Menyemak kewujudan parameter

Dengan menggunakan kaedah has, kita boleh menyemak kewujudan parameter. Mari semak parameter yang wujud:

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

Mari semak parameter yang tidak wujud:

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

Menukar kepada rentetan

Dengan menggunakan kaedah toString, kita boleh menukar objek kita kembali kepada rentetan:

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

Mengubah parameter

Dengan menggunakan kaedah set, kita boleh mengubah nilai parameter:

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

Mari semak perubahan:

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

Menambah parameter

Dengan menggunakan kaedah set, kita juga boleh menambah parameter baru:

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

Mari semak perubahan:

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

Menambah parameter

Dengan menggunakan kaedah append, kita juga boleh menambah parameter baru:

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

Mari semak perubahan:

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

Mari cuba tambah parameter yang sudah wujud:

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

Dalam kes ini, kaedah kita hanya akan menambah parameter yang sama nama pada akhir:

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

Di sinilah perbezaan antara kaedah set dan append. Yang pertama akan mengubah parameter yang wujud, manakala yang kedua hanya akan menambah salinannya pada akhir.

Memadam parameter

Dengan menggunakan kaedah delete, kita boleh memadam parameter:

searchParams.delete('b');

Mari semak perubahan:

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

Mengulangi parameter dengan gelung

Parameter boleh diulangi dengan gelung:

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

Beberapa parameter yang sama

Katakan dalam rentetan kita terdapat beberapa parameter yang sama:

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

Dengan menggunakan kaedah getAll, kita boleh mendapat tatasusunan nilai parameter-parameter ini:

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

Tugas-tugas praktikal

Katakan diberikan rentetan parameter berikut:

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

Tambahkan satu lagi parameter test3 ke dalam rentetan ini.

Padam parameter test2 dari rentetan ini.

Ubah parameter test1 kepada nilai baru.