Learn JavaScript

has() - проверка параметра в URLSearchParams

has() - это метод объекта URLSearchParams, который проверяет, есть ли параметр в строке запроса.

Он возвращает true или false.

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

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

has() нужен, когда важно узнать не значение параметра, а сам факт его присутствия в URL.

Синтаксис

params.has(name)

Где name - имя параметра, который нужно проверить.

Результат:

  • true, если параметр есть
  • false, если параметра нет
const params = new URLSearchParams("category=books");

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

Метод ничего не изменяет. Он только проверяет текущие параметры.

Проверка обычного параметра

Простой пример:

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

if (params.has("q")) {
  console.log("Поисковый запрос есть");
}

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

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

if (url.searchParams.has("q")) {
  console.log("Нужно выполнить поиск");
}

has() и get()

has() проверяет наличие параметра.

get() возвращает значение параметра.

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

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

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

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

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

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

Параметр может быть пустым.

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

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

has() вернул true, потому что параметр q действительно есть в URL.

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

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

if (value !== null && value !== "") {
  console.log("Значение заполнено");
}

Query-флаги

Иногда параметр используют как флаг: важно только наличие имени.

Например:

https://learn-javascript.ru/catalog?debug

Такой параметр можно проверить через has().

const params = new URLSearchParams("debug");

console.log(params.has("debug")); // true
console.log(params.get("debug")); // ""

Это удобно для режимов вроде preview, debug, modal, когда само значение не так важно.

const url = new URL("https://learn-javascript.ru/page?preview");

const isPreview = url.searchParams.has("preview");

console.log(isPreview); // true

Повторяющиеся параметры

Если параметр встречается несколько раз, has() всё равно вернёт true.

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

console.log(params.has("tag")); // true

Метод проверяет имя параметра, а не количество значений.

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

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

Проверка конкретного значения

В современных браузерах у has() есть вариант со вторым аргументом.

params.has(name, value)

Он проверяет, есть ли параметр с указанным именем и значением.

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

console.log(params.has("tag", "javascript")); // true
console.log(params.has("tag", "async")); // false

Если нужна максимально простая и предсказуемая проверка, можно использовать getAll() и includes().

const hasDomTag = params.getAll("tag").includes("dom");

console.log(hasDomTag); // true

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

С полным адресом удобнее работать через объект URL.

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

console.log(url.searchParams.has("category")); // true
console.log(url.searchParams.has("sort")); // false

Например, можно понять, нужно ли брать значение из URL или подставить настройку по умолчанию.

function getPageFromUrl(address) {
  const url = new URL(address);

  if (!url.searchParams.has("page")) {
    return 1;
  }

  return Number(url.searchParams.get("page"));
}

console.log(getPageFromUrl("https://learn-javascript.ru/catalog")); // 1
console.log(getPageFromUrl("https://learn-javascript.ru/catalog?page=3")); // 3

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

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

Адрес может быть таким:

https://learn-javascript.ru/catalog?favorites

Проверка:

function shouldShowFavorites(address) {
  const url = new URL(address);

  return url.searchParams.has("favorites");
}

console.log(shouldShowFavorites("https://learn-javascript.ru/catalog?favorites"));
// true

console.log(shouldShowFavorites("https://learn-javascript.ru/catalog"));
// false

Здесь параметр работает как переключатель: есть в URL - режим включён, нет - выключен.

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

Думать, что has() проверяет непустое значение

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

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

has() проверяет наличие параметра. Пустое значение всё равно считается существующим параметром.

Проверять наличие через get()

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

if (params.get("q")) {
  console.log("Параметр есть");
}

Такой код не выполнится, потому что get("q") вернёт пустую строку.

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

if (params.has("q")) {
  console.log("Параметр есть");
}

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

  • has() проверяет наличие параметра в URLSearchParams
  • метод возвращает true или false
  • has() не изменяет параметры
  • пустое значение всё равно считается параметром
  • has() отличается от get(): он проверяет наличие, а не возвращает значение
  • повторяющийся параметр тоже даёт true
  • для всех значений используйте getAll()
  • с полным адресом удобно работать через url.searchParams.has(...)
  • query-флаги вроде ?preview удобно проверять через has()

Коротко

has() нужен, чтобы проверить, есть ли query-параметр в URLSearchParams. Он возвращает boolean и не смотрит на то, пустое значение или нет. Если нужно получить само значение, используйте get(), а если параметр может повторяться несколько раз - getAll().