Как получить значения GET-параметров из URL на JavaScript?

Использование URLSearchParams (современный способ)

Самый простой и надёжный способ — использовать встроенный API URLSearchParams. Он поддерживается во всех современных браузерах (Chrome, Firefox, Safari, Edge) и Node.js (начиная с v18). Вот как это работает:

// Получаем строку запроса
const queryString = window.location.search;
// Создаём объект URLSearchParams
const params = new URLSearchParams(queryString);

// Получаем одно значение
const name = params.get('name'); // "John"
const age = params.get('age');   // "25"

// Получаем все значения (если параметр повторяется)
const ids = params.getAll('id'); // ["1", "2"]

// Проверяем наличие параметра
if (params.has('city')) {
  console.log('Город указан');
}

// Перебираем все параметры
for (const [key, value] of params.entries()) {
  console.log(`${key}: ${value}`);
}

// Преобразуем в обычный объект
const obj = Object.fromEntries(params.entries());
// { name: "John", age: "25", city: "New York" }

Важно: URLSearchParams автоматически декодирует URL-кодированные символы (%20 → пробел, %26 → &). Вам не нужно вручную вызывать decodeURIComponent().

Создание полного объекта с поддержкой массивов

Если вам нужен более структурированный объект, который учитывает повторяющиеся ключи как массивы, используйте такой код:

function getQueryParams() {
  const params = new URLSearchParams(window.location.search);
  const result = {};

  for (const [key, value] of params.entries()) {
    // Если ключ уже существует, превращаем в массив
    if (result.hasOwnProperty(key)) {
      if (!Array.isArray(result[key])) {
        result[key] = [result[key]];
      }
      result[key].push(value);
    } else {
      result[key] = value;
    }
  }

  return result;
}

// Пример использования
const params = getQueryParams();
console.log(params.name); // "John" (строка)
console.log(params.id);   // ["1", "2"] (массив, если параметр повторяется)

Старый способ (для поддержки Internet Explorer)

Если вам нужно поддерживать очень старые браузеры (IE11 и ниже), используйте ручной парсинг:

function getQueryParamsLegacy() {
  const query = window.location.search.substring(1); // Убираем '?'
  if (!query) return {};

  return query.split('&').reduce((acc, pair) => {
    const [key, value] = pair.split('=').map(item => 
      decodeURIComponent(item.replace(/\+/g, ' '))
    );
    
    if (acc.hasOwnProperty(key)) {
      acc[key] = Array.isArray(acc[key]) 
        ? [...acc[key], value] 
        : [acc[key], value];
    } else {
      acc[key] = value;
    }
    
    return acc;
  }, {});
}

Рекомендация: Используйте URLSearchParams — это стандарт, который работает быстро и безопасно. Для старых браузеров можно добавить полифилл.

// Пример с произвольным URL
const url = new URL('https://example.com/page?name=John&age=25');
const name = url.searchParams.get('name'); // "John"

// Текущий URL
const currentUrl = new URL(window.location.href);
const params = Object.fromEntries(currentUrl.searchParams);

function getHashParams() {
  const hash = window.location.hash.substring(1); // Убираем '#'
  return new URLSearchParams(hash);
}

// npm install query-string
import queryString from 'query-string';

const parsed = queryString.parse(window.location.search);
// { name: "John", age: "25" }