get() - получение параметра из URLSearchParams

get() - это метод объекта URLSearchParams, который возвращает значение параметра из строки запроса.

Строка запроса - это часть URL после ?.

https://learn-javascript.ru/search?q=javascript&page=2

В этом адресе есть параметры q и page. Метод get() позволяет получить их значения без ручного разбора строки.

const params = new URLSearchParams("q=javascript&page=2");

console.log(params.get("q")); // "javascript"
console.log(params.get("page")); // "2"

Синтаксис

params.get(name)

Где name - имя параметра, значение которого нужно получить.

Метод возвращает:

строку, если параметр найден
null, если параметра нет

const params = new URLSearchParams("q=javascript");

console.log(params.get("q")); // "javascript"
console.log(params.get("sort")); // null

get() только читает значение и не изменяет объект URLSearchParams.

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

Если у вас уже есть строка параметров, её можно передать в URLSearchParams.

const params = new URLSearchParams("category=courses&page=3");

const category = params.get("category");
const page = params.get("page");

console.log(category); // "courses"
console.log(page); // "3"

Строку можно передавать как с ?, так и без него.

const params = new URLSearchParams("?q=javascript&page=2");

console.log(params.get("q")); // "javascript"

Это удобно при работе с window.location.search.

const params = new URLSearchParams(window.location.search);

const query = params.get("q");

Использование вместе с URL

Если есть полный адрес, сначала создают объект URL, а затем читают параметры через searchParams.

const url = new URL("https://learn-javascript.ru/search?q=javascript&page=2");

console.log(url.searchParams.get("q")); // "javascript"
console.log(url.searchParams.get("page")); // "2"

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

const url = new URL("https://learn-javascript.ru/catalog?category=books&page=2");

const category = url.searchParams.get("category");
const page = url.searchParams.get("page");

console.log(category); // "books"
console.log(page); // "2"

Важно: URLSearchParams работает именно с параметрами, а не со всем URL целиком. Для полного адреса лучше использовать new URL().

Если параметра нет

Если параметр отсутствует, get() вернёт null.

const params = new URLSearchParams("q=javascript");

console.log(params.get("page")); // null

Поэтому для значений по умолчанию часто используют оператор ??.

const params = new URLSearchParams("q=javascript");

const page = params.get("page") ?? "1";

console.log(page); // "1"

?? подставляет значение справа только тогда, когда слева null или undefined.

Это аккуратнее, чем ||, если пустая строка может быть нормальным значением.

const params = new URLSearchParams("q=");

const query = params.get("q") ?? "javascript";

console.log(query); // ""

Здесь параметр q есть, просто его значение пустое.

Пустой параметр и отсутствующий параметр

Пустой параметр и отсутствующий параметр - не одно и то же.

const params = new URLSearchParams("q=");

console.log(params.get("q")); // ""
console.log(params.get("page")); // null

Если нужно проверить именно наличие параметра, используйте has().

const params = new URLSearchParams("q=");

console.log(params.has("q")); // true
console.log(params.has("page")); // false

get() отвечает на вопрос “какое значение?”, а has() - “есть ли такой параметр?“.

get() возвращает строки

Значения параметров URL всегда читаются как строки.

const params = new URLSearchParams("page=2&active=true");

console.log(params.get("page")); // "2"
console.log(params.get("active")); // "true"

Если нужно число, преобразуйте значение явно.

const params = new URLSearchParams("page=2");

const page = Number(params.get("page") ?? "1");

console.log(page); // 2

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

const params = new URLSearchParams("active=true");

const isActive = params.get("active") === "true";

console.log(isActive); // true

Если параметр повторяется несколько раз

Один и тот же параметр может встретиться в URL несколько раз.

const params = new URLSearchParams("tag=javascript&tag=dom&tag=async");

console.log(params.get("tag")); // "javascript"

get() в такой ситуации возвращает только первое значение.

Если нужны все значения, используйте getAll().

console.log(params.getAll("tag")); // ["javascript", "dom", "async"]

Это важно для фильтров, тегов, выбранных категорий и других случаев, где один ключ может иметь несколько значений.

Кодирование и обычное значение

В URL пробелы, русские буквы и некоторые символы кодируются. При чтении через get() вы получаете обычное значение.

const url = new URL("https://learn-javascript.ru/search?q=уроки javascript");

console.log(url.searchParams.get("q")); // "уроки javascript"

Это одна из причин использовать URL и URLSearchParams, а не разбирать строку адреса вручную.

Практический пример

Допустим, на странице каталога нужно прочитать фильтры из адреса.

function getCatalogFilters() {
  const url = new URL(window.location.href);

  return {
    category: url.searchParams.get("category") ?? "all",
    sort: url.searchParams.get("sort") ?? "new",
    page: Number(url.searchParams.get("page") ?? "1"),
  };
}

const filters = getCatalogFilters();

console.log(filters);

Если адрес такой:

https://learn-javascript.ru/catalog?category=books&sort=price&page=2

функция вернёт объект с прочитанными значениями.

Частые ошибки

Ожидать undefined, если параметра нет

const params = new URLSearchParams("q=javascript");

console.log(params.get("page")); // null

get() возвращает null, а не undefined.

Забывать, что значение приходит строкой

const params = new URLSearchParams("page=2");

console.log(params.get("page") + 1); // "21"

Если нужно число, сначала преобразуйте значение.

const page = Number(params.get("page") ?? "1");

console.log(page + 1); // 3

Использовать get() для нескольких значений

const params = new URLSearchParams("tag=javascript&tag=dom");

console.log(params.get("tag")); // "javascript"

Если параметр может повторяться, берите все значения через getAll().

console.log(params.getAll("tag")); // ["javascript", "dom"]

Быстрая памятка

get() читает значение параметра из URLSearchParams
метод принимает имя параметра
если параметр есть, возвращается строка
если параметра нет, возвращается null
пустое значение возвращается как ""
get() возвращает первое значение, если параметр повторяется
для всех значений одного параметра используйте getAll()
для проверки наличия параметра используйте has()
числа и boolean-значения нужно преобразовывать вручную
с полным адресом удобно работать через new URL(...).searchParams.get(...)

Коротко

get() нужен, чтобы получить значение одного query-параметра из URLSearchParams. Он возвращает строку, null для отсутствующего параметра и только первое значение, если параметр повторяется. Для полного URL обычно берут new URL(address).searchParams.get("name"), а для нескольких значений используют getAll().