JavaScript'te URLSearchParams ile Çalışmak

Bildiğiniz gibi, JavaScript'te formlar ve GET istekleriyle çalışırken şu türden dizeler ortaya çıkar:

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

Bazen bu dizedeki bir parametrenin değerini programlı bir şekilde değiştirmek gerekir. Bunu yapan kodu yazmak pek de uygun değildir. Bu nedenle JavaScript'te bu tür dizelerle çalışmak için özel bir URLSearchParams sınıfı yerleşik olarak bulunur.

Şimdi bu sınıfın bir nesnesini oluşturalım ve parametre olarak parametre dizi'mizi verelim:

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

Oluşturulan nesnenin hangi metotlara sahip olduğuna bir bakalım.

Parametre Değerini Alma

get metodu kullanılarak bir parametrenin değeri alınabilir:

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

Var olmayan bir parametrenin değerini almaya çalışalım:

let res = searchParams.get('x');
console.log(res); // null yazdıracak

Parametre Varlığını Kontrol Etme

has metodu kullanılarak bir parametrenin varlığı kontrol edilebilir. Var olan bir parametreyi kontrol edelim:

let res = searchParams.has('a');
console.log(res); // true yazdıracak

Var olmayan bir parametreyi kontrol edelim:

let res = searchParams.has('x');
console.log(res); // false yazdıracak

Dizeye Dönüştürme

toString metodu kullanılarak nesnemiz tekrar bir dizeye dönüştürülebilir:

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

Parametreleri Değiştirme

set metodu kullanılarak bir parametrenin değeri değiştirilebilir:

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

Değişiklikleri kontrol edelim:

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

Parametre Ekleme

set metodu aynı zamanda yeni bir parametre eklemek için de kullanılabilir:

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

Değişiklikleri kontrol edelim:

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

Parametre Ekleme

append metodu da yeni bir parametre eklemek için kullanılabilir:

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

Değişiklikleri kontrol edelim:

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

Şimdi zaten var olan bir parametreyi eklemeyi deneyelim:

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

Bu durumda metodumuz aynı isimli parametreyi sona ekleyecektir:

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

set ve append metotları arasındaki fark burada ortaya çıkar. İlki var olan parametreyi değiştirirken, ikincisi onun bir kopyasını sona ekler.

Parametreleri Silme

delete metodu kullanılarak parametreler silinebilir:

searchParams.delete('b');

Değişiklikleri kontrol edelim:

let res = searchParams.toString();
console.log(res); // 'a=1&c=3' yazdıracak

Parametreleri Döngü ile Gezinme

Parametreler bir döngü ile gezilebilir:

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

Birden Fazla Aynı Parametre

Dizimizde birden fazla aynı parametre olduğunu varsayalım:

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

getAll metodu kullanılarak bu parametrelerin değerlerinden oluşan bir dizi alınabilir:

let res = searchParams.getAll('a');
console.dir(res); // [1, 2] yazdıracak

Pratik Görevler

Aşağıdaki parametre dizesinin verildiğini varsayalım:

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

Bu dizeye bir test3 parametresi daha ekleyin.

Bu dizeden test2 parametresini silin.

test1 parametresini yeni bir değere değiştirin.