Penggunaan URLSearchParams dalam JavaScript

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

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

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

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

Mari cuba dapatkan nilai parameter yang tidak wujud:

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

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

Mari semak parameter yang tidak wujud:

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

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

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

Mari semak perubahan:

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

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

Mari semak perubahan:

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

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

Mari semak perubahan:

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

Mari cuba tambah parameter yang sudah wujud:

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

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

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

javascriptsearchParams.delete('b');

Mari semak perubahan:

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

Mengulangi parameter dengan gelung

Parameter boleh diulangi dengan gelung:

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

Beberapa parameter yang sama

Katakan dalam rentetan kita terdapat beberapa parameter yang sama:

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

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

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

Tugas-tugas praktikal

Katakan diberikan rentetan parameter berikut:

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