Как получить значения параметров строки запроса (query string) в JavaScript?

Основное решение: URLSearchParams (современный способ)

Самый простой и надёжный способ — использовать встроенный объект URLSearchParams. Он поддерживается всеми современными браузерами и Node.js (начиная с версии 18). Этот метод автоматически обрабатывает декодирование спецсимволов (например, %20 превращается в пробел).

// Пример URL: https://example.com/page?name=John&age=30&city=NewYork
const params = new URLSearchParams(window.location.search);

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

// Получить все значения параметра (если он повторяется)
const cities = params.getAll('city'); // ["NewYork"]

// Проверить, существует ли параметр
if (params.has('name')) {
  console.log('Параметр name найден');
}

// Перебрать все параметры
params.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

// Получить массив всех ключей
const keys = [...params.keys()]; // ["name", "age", "city"]

Что делать, если у вас не URL, а просто строка запроса?

Если у вас есть только строка запроса (например, из переменной), вы также можете использовать URLSearchParams:

const queryString = '?name=John%20Doe&age=30';
const params = new URLSearchParams(queryString);
console.log(params.get('name')); // "John Doe" (пробел корректно декодирован)

Как получить query string из текущего URL?

Используйте свойство window.location.search — оно возвращает часть URL после знака вопроса:

const searchString = window.location.search; // "?name=John&age=30"
const params = new URLSearchParams(searchString);

Важные моменты:

• Декодирование: URLSearchParams автоматически декодирует закодированные символы (например, %20 → пробел, %26 → &).
• Повторяющиеся параметры: Если один параметр встречается несколько раз (например, ?color=red&color=blue), используйте getAll('color').
• Отсутствие параметра: Если параметра нет, get() вернёт null.
• Совместимость: URLSearchParams не поддерживается в Internet Explorer. Если вам нужно поддерживать IE, используйте полифилл или старый метод (см. альтернативный ответ).

Пример полного использования на странице:

// HTML: <div id="output"></div>
const params = new URLSearchParams(window.location.search);
const output = document.getElementById('output');

output.innerHTML = `
  <p>Имя: ${params.get('name') || 'не указано'}</p>
  <p>Возраст: ${params.get('age') || 'не указан'}</p>
  <p>Город: ${params.get('city') || 'не указан'}</p>
`;

function getQueryParam(param) {
  const queryString = window.location.search.substring(1);
  const regex = new RegExp('[?&]' + param.replace(/[\[\]]/g, '\\$&') + '(=([^&#]*)|&|#|$)');
  const results = regex.exec(window.location.href);
  
  if (!results || !results[2]) return null;
  return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

// Использование:
const name = getQueryParam('name'); // "John"
console.log(name);