Getting url params javascript

URL Search Params

Получить или отформатировать поисковые параметры из URL без боли.

Время чтения: меньше 5 мин

1. Кратко
2. Пример
3. Как понять
4. Как пишется
   1. Создание экземпляра класса
   2. Добавление
   3. Запись
   4. Получение
   5. Проверка наличия
   6. Получение имён всех параметров
   7. Получение всех значений параметров
   8. Получение всех параметров
   9. Удаление
   10. Сортировка
   11. Перебор
   12. Приведение параметров к строке
   1. Павел Минеев советует

   Обновлено 27 октября 2021

   Кратко

   Скопировать ссылку «Кратко» Скопировано

   URL Search Params — это класс, предоставляющий удобное API для формирования строки поисковых параметров, которую потом можно использовать для формирования полного адреса. Все параметры в строке будут закодированы для безопасной вставки в адрес. Также этот класс можно встретить как часть класса URL .

   Пример

   Скопировать ссылку «Пример» Скопировано

   Создаём экземпляр класса параметров поиска:

    const params = new URLSearchParams(< count: '10' >) const params = new URLSearchParams( count: '10' >)    Скопировать Скопировано Не удалось скопировать   

   Далее мы можем добавлять или удалять параметры:

    // добавлениеparams.append('size', 'lg')console.log(params.toString())// 'count=10&size=lg' // удалениеparams.delete('count')console.log(params.toString())// 'size=lg' // добавление params.append('size', 'lg') console.log(params.toString()) // 'count=10&size=lg' // удаление params.delete('count') console.log(params.toString()) // 'size=lg'    Скопировать Скопировано Не удалось скопировать   

   Повторное добавление параметра с тем же именем добавит ещё одно значение с таким же именем, а получение всех возможных значений вернёт все добавленные значения:

    params.append('size', 'xl')console.log(params.getAll('size'))// ['lg', 'xl'] params.append('size', 'xl') console.log(params.getAll('size')) // ['lg', 'xl']    Скопировать Скопировано Не удалось скопировать   

   Получение параметров в виде строки:

    const paramsString = params.toString()console.log(paramsString)// 'count=10&size=lg&size=xl' const url = `/catalog/?$`console.log(url)// '/catalog/?count=10&size=lg&size=xl' const paramsString = params.toString() console.log(paramsString) // 'count=10&size=lg&size=xl' const url = `/catalog/?$paramsSting>` console.log(url) // '/catalog/?count=10&size=lg&size=xl'    Скопировать Скопировано Не удалось скопировать   

   Как понять

   Скопировать ссылку «Как понять» Скопировано

   Когда нужно сформировать URL, включающий в себя строку поиска, то удобнее всего использовать URL Search Params . Раньше для той же операции нужно было использовать цикл, в котором строка собиралась вручную, а также делать её безопасной для вставки в адрес с помощью encode U R L Component ( ) . Сейчас же можно использовать специальный класс и управлять им с помощью предоставляемого API.

   Как пишется

   Скопировать ссылку «Как пишется» Скопировано

   Создание экземпляра класса

   Скопировать ссылку «Создание экземпляра класса» Скопировано

   При создании URL Search Params мы можем передать аргумент в виде объекта, состоящего из полей со строками/цифрами или поисковую строку из адреса страницы. Это создаст новый экземпляр с уже добавленными в него параметрами.

    const emptyParams = new URLSearchParams()const paramsFromUrl = new URLSearchParams(window.location.search)const params = new URLSearchParams(< minPrice: '1000', maxPrice: '2000' >) console.log(emptyParams.toString())// ''console.log(params.toString())// 'minPrice=1000&maxPrice=2000' const emptyParams = new URLSearchParams() const paramsFromUrl = new URLSearchParams(window.location.search) const params = new URLSearchParams( minPrice: '1000', maxPrice: '2000' >) console.log(emptyParams.toString()) // '' console.log(params.toString()) // 'minPrice=1000&maxPrice=2000'    Скопировать Скопировано Не удалось скопировать   

   Добавление

   Скопировать ссылку «Добавление» Скопировано

   Добавление нового параметра в поиск производится с помощью метода append ( ‘ключ’ , ‘значение’ ) и принимает пару ключ/значение.

    const params = new URLSearchParams() params.append('color', 'red')console.log(params.toString())// 'color=red' const params = new URLSearchParams() params.append('color', 'red') console.log(params.toString()) // 'color=red'    Скопировать Скопировано Не удалось скопировать   

   Запись

   Скопировать ссылку «Запись» Скопировано

   При записи по имени, параметр добавится, если до этого такого не существовало, и заменит значение, если таковой существовал ранее.

    const params = new URLSearchParams() params.set('size', 'lg')console.log(params.toString())// 'size=lg' params.append('size', 'xl')console.log(params.toString())// 'size=lg&size=xl' params.set('size', 'sm')console.log(params.toString())// 'size=sm' const params = new URLSearchParams() params.set('size', 'lg') console.log(params.toString()) // 'size=lg' params.append('size', 'xl') console.log(params.toString()) // 'size=lg&size=xl' params.set('size', 'sm') console.log(params.toString()) // 'size=sm'    Скопировать Скопировано Не удалось скопировать   

   Получение

   Скопировать ссылку «Получение» Скопировано

   С помощью методов get ( ‘ключ’ ) и get All ( ‘ключ’ ) можно читать уже хранящиеся параметры.

   • get ( ) — вернёт первое добавленное в поле значение;
   • get All ( ) – вернёт все значения, добавленные в поле.

    const params = new URLSearchParams() params.append('size', 'lg')console.log(params.get('size'))// 'lg' params.append('size', 'xl')console.log(params.get('size'))// 'lg'console.log(params.getAll('size'))// ['lg', 'xl'] const params = new URLSearchParams() params.append('size', 'lg') console.log(params.get('size')) // 'lg' params.append('size', 'xl') console.log(params.get('size')) // 'lg' console.log(params.getAll('size')) // ['lg', 'xl']    Скопировать Скопировано Не удалось скопировать   

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

   Скопировать ссылку «Проверка наличия» Скопировано

   has ( ‘ключ’ ) – проверяет, был ли добавлен параметр с таким именем.

    const params = new URLSearchParams() params.append('size', 'lg')console.log(params.has('size'))// trueconsole.log(params.has('count'))// false const params = new URLSearchParams() params.append('size', 'lg') console.log(params.has('size')) // true console.log(params.has('count')) // false    Скопировать Скопировано Не удалось скопировать   

   Получение имён всех параметров

   Скопировать ссылку «Получение имён всех параметров» Скопировано

   Можно получить имена всех параметров, записанных в поиск, используя метод keys ( ) . Результатом выбора будет итератор.

    const params = new URLSearchParams('count=10&size=lg&size=xl') for (let value of params.keys())  console.log(value)>// 'count'// 'size'// 'size' const params = new URLSearchParams('count=10&size=lg&size=xl') for (let value of params.keys())  console.log(value) > // 'count' // 'size' // 'size'    Скопировать Скопировано Не удалось скопировать   

   Если параметр был добавлен несколько раз, он также будет добавлен в итератор в том же количестве, сколько раз был добавлен.

   Получение всех значений параметров

   Скопировать ссылку «Получение всех значений параметров» Скопировано

   Метод values ( ) получает значения параметров аналогично получению имён их параметров из примера выше.

    const params = new URLSearchParams('count=10&size=lg&size=xl') for (let value of params.values())  console.log(value)>// '10'// 'lg'// 'xl' const params = new URLSearchParams('count=10&size=lg&size=xl') for (let value of params.values())  console.log(value) > // '10' // 'lg' // 'xl'    Скопировать Скопировано Не удалось скопировать   

   Получение всех параметров

   Скопировать ссылку «Получение всех параметров» Скопировано

   По аналогии с предыдущими двумя методами entries ( ) получает итератор, содержащий пары ключ/значение.

    const params = new URLSearchParams('count=10&size=lg&size=xl') for (let Getting url params javascript of params.entries())  console.log(key, value)>// count 10// size lg// size xl const params = new URLSearchParams('count=10&size=lg&size=xl') for (let [key, value] of params.entries())  console.log(key, value) > // count 10 // size lg // size xl    Скопировать Скопировано Не удалось скопировать   

   Удаление

   Скопировать ссылку «Удаление» Скопировано

   Удаляет параметр из поиска по ключу delete ( ‘ключ’ ) .

    params.delete('size') console.log(params.toString())// 'count=10' params.delete('size') console.log(params.toString()) // 'count=10'    Скопировать Скопировано Не удалось скопировать   

   Сортировка

   Скопировать ссылку «Сортировка» Скопировано

   Метод sort ( ) предоставляет возможность отсортировать параметры по алфавиту.

    const params = new URLSearchParams('a=1&z=4&d=2&x=3') params.sort()console.log(params.toString())// 'a=1&d=2&x=3&z=4' const params = new URLSearchParams('a=1&z=4&d=2&x=3') params.sort() console.log(params.toString()) // 'a=1&d=2&x=3&z=4'    Скопировать Скопировано Не удалось скопировать   

   Перебор

   Скопировать ссылку «Перебор» Скопировано

   Метод for Each ( ) перебирает значения, содержащиеся в поиске. Функция, переданная в метод, будет вызвана для каждого элемента в поиске и получит три аргумента – название параметра, значение параметра и сам экземпляр поиска.

    const params = new URLSearchParams('count=10&size=lg&size=xl') params.forEach((key, value, params) =>  console.log(key, value, params)>) const params = new URLSearchParams('count=10&size=lg&size=xl') params.forEach((key, value, params) =>  console.log(key, value, params) >)    Скопировать Скопировано Не удалось скопировать   

   Приведение параметров к строке

   Скопировать ссылку «Приведение параметров к строке» Скопировано

   После того как параметры сформированы, можно сохранить их в строку с помощью метода to String ( ) и использовать для обновления адреса страницы.

    const params = new URLSearchParams() params.append('size', 'lg')params.append('size', 'xl') params.toString() const params = new URLSearchParams() params.append('size', 'lg') params.append('size', 'xl') params.toString()    Скопировать Скопировано Не удалось скопировать   

   На практике

   Скопировать ссылку «На практике» Скопировано

   Павел Минеев советует

   Скопировать ссылку «Павел Минеев советует» Скопировано

   Формирование url для запроса в API

   Скопировать ссылку «Формирование url для запроса в API» Скопировано

   Класс URL Search Params хорошо подходит для формирования строки адреса при запросе в API. Например, если нужно сделать запрос с фильтрами или другими параметрами поиска.

    const params =  size: 'xl', count: 10, page: 2,> // формируем строку вручнуюconst paramsString = Object.entries(params) .map( (Getting url params javascript) => `$=$` ) .join('&') fetch(`/catalog/t-shirts?$`) const params =  size: 'xl', count: 10, page: 2, > // формируем строку вручную const paramsString = Object.entries(params) .map( ([key, value]) => `$encodeURIComponent(key)>=$encodeURIComponent(value)>` ) .join('&') fetch(`/catalog/t-shirts?$paramsString>`)    Скопировать Скопировано Не удалось скопировать   

   URL Search Params упрощает решение этой задачи:

    const paramsString = new URLSearchParams( size: 'xl', count: 10, page: 2,>).toString() fetch(`/catalog/t-shirts?$`) const paramsString = new URLSearchParams( size: 'xl', count: 10, page: 2, >).toString() fetch(`/catalog/t-shirts?$paramsString>`)    Скопировать Скопировано Не удалось скопировать   

   Парсинг параметров из URL

   Скопировать ссылку «Парсинг параметров из URL» Скопировано

   Так как URL Search Params может получать параметры в виде строки, то его можно использовать как парсер текущего адреса страницы. Так мы можем без труда модифицировать их и обновлять адрес.

    const params = new URLSearchParams(window.location.search) params.append('size', 'lg') window.location.assign( `$$?$`) const params = new URLSearchParams(window.location.search) params.append('size', 'lg') window.location.assign( `$window.location.origin>$window.location.pathname>?$params.toString()>` )    Скопировать Скопировано Не удалось скопировать   

   Источник

   Читайте также:  Тире при переносе css