JavaScript'te URLSearchParams ile Çalışmak

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

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

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

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

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

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

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

Var olmayan bir parametreyi kontrol edelim:

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

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

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

Değişiklikleri kontrol edelim:

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

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

Değişiklikleri kontrol edelim:

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

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

Değişiklikleri kontrol edelim:

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

Şimdi zaten var olan bir parametreyi eklemeyi deneyelim:

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

Bu durumda metodumuz aynı isimli parametreyi sona ekleyecektir:

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

javascriptsearchParams.delete('b');

Değişiklikleri kontrol edelim:

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

Parametreleri Döngü ile Gezinme

Parametreler bir döngü ile gezilebilir:

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

Birden Fazla Aynı Parametre

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

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

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

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

Pratik Görevler

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

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