Работа с URLSearchParams в JavaScript

Как вы уже знаете, при работе с формами и GET запросами в JavaScript возникают строки такого вида:

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

Иногда нужно программным образом изменить значение какого-либо параметра из этой строки. Писать код, который делает это, не очень удобно. Поэтому в JavaScript встроен специальный класс URLSearchParams для работы с такими строками.

Давайте создадим объект этого класса, передав параметром нашу строку с параметрами:

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

Давайте посмотрим, какие методы есть у созданного объекта.

Получение значения параметра

С помощью метода get можно получить значение параметра:

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

Попробуем получить значение несуществующего параметра:

let res = searchParams.get('x');
console.log(res); // выведет null

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

С помощью метода has можно проверить наличие параметра. Проверим существующий параметр:

let res = searchParams.has('a');
console.log(res); // выведет true

Проверим несуществующий:

let res = searchParams.has('x');
console.log(res); // выведет false

Преобразование в строку

С помощью метода toString можно преобразовать наш объект обратно в строку:

let res = searchParams.toString();
console.log(res); // выведет 'a=1&b=2&c=3'

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

С помощью метода set можно изменить значение параметра:

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

Проверим изменения:

let res = searchParams.toString();
console.log(res); // выведет 'a=1&b=x&c=3'

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

С помощью метода set можно также добавить новый параметр:

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

Проверим изменения:

let res = searchParams.toString();
console.log(res); // выведет 'a=1&b=2&c=3&d=4'

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

С помощью метода append можно также добавить новый параметр:

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

Проверим изменения:

let res = searchParams.toString();
console.log(res); // выведет 'a=1&b=2&c=3&d=4'

Давайте попробуем добавить уже существующий параметр:

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

В этом случае наш метод просто добавит одноименный параметр в конец:

let res = searchParams.toString();
console.log(res); // выведет 'a=1&b=2&c=3&a=4'

В этом проявляется разница между методами set и append. Первый изменит существующий параметр, а второй просто добавит его дубль в конец.

Удаление параметров

С помощью метода delete можно удалять параметры:

searchParams.delete('b');

Проверим изменения:

let res = searchParams.toString();
console.log(res); // выведет 'a=1&c=3'

Перебор параметров циклом

Параметры можно перебирать циклом:

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

Несколько одинаковых параметров

Пусть в нашей строке несколько одинаковых параметров:

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

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

let res = searchParams.getAll('a');
console.dir(res); // выведет [1, 2]

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

Пусть дана следующая строка с параметрами:

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

Добавьте в эту строку еще один параметр test3.

Удалите из этой строки параметр test2.

Измените параметр test1 на новое значение.