Работа с URLSearchParams в JavaScript

Както вече знаете, при работа с форми и GET заявки в JavaScript се появяват низове от този вид:

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

Понякога е необходимо програмно да променим стойността на някой параметър от този низ. Писането на код, който прави това, не е много удобно. Затова в JavaScript е вграден специален клас URLSearchParams за работа с такива низове.

Нека създадем обект от този клас, като подадем като параметър нашия низ с параметри:

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

Нека разгледаме какви методи има създадения обект.

Получаване на стойност на параметър

С помощта на метода get можем да получим стойността на параметър:

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

Нека се опитаме да получим стойност на несъществуващ параметър:

javascriptlet res = searchParams.get('x');
console.log(res); // ще изведе null

Проверка за наличие на параметър

С помощта на метода has можем да проверим наличието на параметър. Нека проверим съществуващ параметър:

javascriptlet res = searchParams.has('a');
console.log(res); // ще изведе true

Нека проверим несъществуващ:

javascriptlet res = searchParams.has('x');
console.log(res); // ще изведе false

Преобразуване в низ

С помощта на метода toString можем да преобразуваме нашия обект обратно в низ:

javascriptlet res = searchParams.toString();
console.log(res); // ще изведе 'a=1&b=2&c=3'

Промяна на параметри

С помощта на метода set можем да променим стойността на параметър:

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

Нека проверим промените:

javascriptlet res = searchParams.toString();
console.log(res); // ще изведе 'a=1&b=x&c=3'

Добавяне на параметри

С помощта на метода set можем също така да добавим нов параметър:

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

Нека проверим промените:

javascriptlet res = searchParams.toString();
console.log(res); // ще изведе 'a=1&b=2&c=3&d=4'

Добавяне на параметри

С помощта на метода append можем също така да добавим нов параметър:

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

Нека проверим промените:

javascriptlet res = searchParams.toString();
console.log(res); // ще изведе 'a=1&b=2&c=3&d=4'

Нека се опитаме да добавим вече съществуващ параметър:

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

В този случай нашият метод просто ще добави параметър със същото име в края:

javascriptlet res = searchParams.toString();
console.log(res); // ще изведе 'a=1&b=2&c=3&a=4'

В това се проявява разликата между методите set и append. Първият ще промени съществуващия параметър, а вторият просто ще добави негов дубликат в края.

Изтриване на параметри

С помощта на метода delete можем да изтриваме параметри:

javascriptsearchParams.delete('b');

Нека проверим промените:

javascriptlet res = searchParams.toString();
console.log(res); // ще изведе 'a=1&c=3'

Обхождане на параметри с цикъл

Параметрите могат да се обхождат с цикъл:

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

Няколко еднакви параметъра

Нека в нашия низ има няколко еднакви параметъра:

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

С помощта на метода getAll можем да получим масив от стойностите на тези параметри:

javascriptlet res = searchParams.getAll('a');
console.dir(res); // ще изведе [1, 2]

Практически задачи

Нека е даден следният низ с параметри:

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