логотип PurpleSchool
логотип PurpleSchool

URLSearchParams в JavaScript

Автор

Дмитрий Фандорин

URLSearchParams - это встроенный в браузер API, который позволяет получить или отформатировать поисковые параметры из URL. Это удобный инструмент для работы с URL-адресами, который может быть использован для получения, добавления, удаления и изменения параметров поиска в URL.

URLSearchParams может быть использован для получения параметров поиска из текущего URL-адреса, используя свойство window.location.search.

Пример:

const searchParams = new URLSearchParams(window.location.search);
console.log(searchParams.get('query')); // выводит значение параметра "query" из текущего URL

Форма записи

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

Для создания экземпляра класса URLSearchParams необходимо вызвать конструктор класса с параметром, содержащим строку запроса.

Пример:

const searchParams = new URLSearchParams('param1=value1&param2=value2');

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

Добавление параметров поиска в URL осуществляется с помощью метода append(name, value). Он добавляет параметр с указанным именем и значением в конец строки запроса.

Пример:

searchParams.append('param3', 'value3');

Запись параметров

Запись параметров поиска в URL осуществляется с помощью метода set(name, value). Он устанавливает значение для параметра с указанным именем.

Пример:

searchParams.set('param1', 'newvalue');

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

Получение значения параметра поиска из URL осуществляется с помощью метода get(name). Он возвращает значение параметра с указанным именем.

Пример:

console.log(searchParams.get('param1')); // выводит "newvalue"

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

Проверка наличия параметра поиска в URL осуществляется с помощью метода has(name). Он возвращает true, если параметр с указанным именем присутствует в URL, и false в противном случае.

Пример:

console.log(searchParams.has('param1')); // выводит true
console.log(searchParams.has('param4')); // выводит false

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

Получение списка имен всех параметров поиска в URL осуществляется с помощью метода keys(). Он возвращает итератор, который перебирает имена всех параметров.

Пример:

for (const paramName of searchParams.keys()) {
  console.log(paramName);
}

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

Получение списка всех значений параметров поиска в URL осуществляется с помощью метода values(). Он возвращает итератор, который перебирает все значения параметров.

Пример:

for (const paramValue of searchParams.values()) {
  console.log(paramValue);
}

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

Получение списка всех параметров поиска в URL осуществляется с помощью метода entries(). Он возвращает итератор, который перебирает все параметры и их значения в формате [name, value].

Пример:

for (const [paramName, paramValue] of searchParams.entries()) {
  console.log(paramName + ': ' + paramValue);
}

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

Удаление параметра поиска из URL осуществляется с помощью метода delete(name). Он удаляет параметр с указанным именем из строки запроса.

Пример:

searchParams.delete('param1');

Сортировка параметров

Сортировка параметров поиска в URL осуществляется с помощью методаsort(). Он упорядочивает параметры по их именам в алфавитном порядке.

Пример:

searchParams.sort();

Перебор параметров

Перебор параметров поиска в URL осуществляется с помощью итератора, который возвращает метод Symbol.iterator.

Пример:

for (const param of searchParams) {
  console.log(param);
}

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

Приведение параметров поиска в URL к строке осуществляется с помощью метода toString(). Он возвращает строку, содержащую параметры поиска в URL.

Пример:

const searchParamsString = searchParams.toString();
console.log(searchParamsString);

Заключение

URLSearchParams - это удобный инструмент для работы с параметрами поиска в URL. Он предоставляет множество методов для получения, добавления, удаления и изменения параметров поиска в URL. При использовании URLSearchParams необходимо учитывать, что он доступен только в браузере и не поддерживается в Node.js.

Стрелочка влевоwindow.history в JavaScriptsetTimeout() в JavaScriptСтрелочка вправо

Все гайды по Javascript

Как работает метод trim() - JavaScriptКак работает метод toUpperCase() - JavaScriptКак работает метод toLowerCase() - JavaScriptКак работает метод substring() - JavaScriptКак работает метод startsWith() - JavaScriptКак работает метод split() - JavaScriptКак работает метод slice() - JavaScriptКак работает метод search() - JavaScriptКак работает метод replaceAll() - JavaScriptКак работает метод replace() - JavaScriptКак работает метод repeat() - JavaScriptКак работает метод padStart() - JavaScriptКак работает метод padEnd() - JavaScriptКак работает метод matchAll() - JavaScriptКак работает метод match() - JavaScriptКак работает метод localeCompare() - JavaScriptКак работает свойство length - JavaScriptКак работает метод lastIndexOf() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод fromCodePoint() - JavaScriptКак работает метод fromCharCode() - JavaScriptКак работает метод endsWith() - JavaScriptКак работает метод concat() - JavaScriptКак работает метод codePointAt() - JavaScriptКак работает метод charCodeAt() - JavaScriptКак работает метод charAt() - JavaScript
Итератор в JavaScript
try...catch в JavaScriptError в JavaScript
Событие wheel в JavaScriptСобытие unload в JavaScriptСобытие touch в JavaScriptСобытие submit в JavaScriptСобытие scroll в JavaScriptСобытие reset в JavaScriptМетод .preventDefault() в JavaScriptСобытие mouseover в JavaScriptСобытие mouseout в JavaScriptСобытие load в JavaScriptСобытие keyup в JavaScriptСобытие keydown в JavaScriptСобытие invalid в JavaScriptСобытие input в JavaScriptСобытийная модель Event в JavaScriptОбъект события Event в JavaScriptСобытие DOMContentLoaded в JavaScriptСобытие dblclick в JavaScriptСобытие click в JavaScriptСобытие change в JavaScriptСобытие beforeunload в JavaScript
Как работает метод some() - JavaScriptКак работает метод reverse() - JavaScriptКак работает метод reduce() - JavaScriptКак работает метод map() - JavaScriptКак работает метод isArray() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод find() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript
Открыть базу знаний