Praca z URLSearchParams w JavaScript

Jak już wiesz, podczas pracy z formularzami i zapytaniami GET w JavaScript pojawiają się ciągi znaków tego rodzaju:

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

Czasami trzeba programowo zmienić wartość jakiegoś parametru z tego ciągu. Pisanie kodu, który to robi, nie jest zbyt wygodne. Dlatego w JavaScript wbudowana jest specjalna klasa URLSearchParams do pracy z takimi ciągami znaków.

Stwórzmy obiekt tej klasy, przekazując jako parametr nasz ciąg znaków z parametrami:

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

Sprawdźmy, jakie metody ma utworzony obiekt.

Pobieranie wartości parametru

Za pomocą metody get można uzyskać wartość parametru:

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

Spróbujmy uzyskać wartość nieistniejącego parametru:

javascriptlet res = searchParams.get('x');
console.log(res); // wyświetli null

Sprawdzanie obecności parametru

Za pomocą metody has można sprawdzić obecność parametru. Sprawdźmy istniejący parametr:

javascriptlet res = searchParams.has('a');
console.log(res); // wyświetli true

Sprawdźmy nieistniejący:

javascriptlet res = searchParams.has('x');
console.log(res); // wyświetli false

Konwersja na ciąg znaków

Za pomocą metody toString można przekształcić nasz obiekt z powrotem na ciąg znaków:

javascriptlet res = searchParams.toString();
console.log(res); // wyświetli 'a=1&b=2&c=3'

Zmiana parametrów

Za pomocą metody set można zmienić wartość parametru:

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

Sprawdźmy zmiany:

javascriptlet res = searchParams.toString();
console.log(res); // wyświetli 'a=1&b=x&c=3'

Dodawanie parametrów

Za pomocą metody set można również dodać nowy parametr:

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

Sprawdźmy zmiany:

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

Dodawanie parametrów

Za pomocą metody append można również dodać nowy parametr:

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

Sprawdźmy zmiany:

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

Spróbujmy dodać już istniejący parametr:

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

W tym przypadku nasza metoda po prostu doda parametr o tej samej nazwie na koniec:

javascriptlet res = searchParams.toString();
console.log(res); // wyświetli 'a=1&b=2&c=3&a=4'

Na tym polega różnica między metodami set i append. Pierwsza zmieni istniejący parametr, a druga po prostu doda jego duplikat na koniec.

Usuwanie parametrów

Za pomocą metody delete można usuwać parametry:

javascriptsearchParams.delete('b');

Sprawdźmy zmiany:

javascriptlet res = searchParams.toString();
console.log(res); // wyświetli 'a=1&c=3'

Iteracja po parametrach za pomocą pętli

Parametry można iterować za pomocą pętli:

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

Kilka identycznych parametrów

Załóżmy, że w naszym ciągu znajduje się kilka identycznych parametrów:

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

Za pomocą metody getAll można uzyskać tablicę wartości tych parametrów:

javascriptlet res = searchParams.getAll('a');
console.dir(res); // wyświetli [1, 2]

Zadania praktyczne

Załóżmy, że dany jest następujący ciąg znaków z parametrami:

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