# Работа с 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` на новое значение.

← →
↑
en ru