Как получить значения строки запроса текущей страницы в JavaScript?

Строка запроса — это часть URL, которая содержит данные, отправляемые на сервер. Она обычно начинается с символа ?, за которым следуют пары "ключ=значение", разделенные символом &. Например, в следующем URL строка запроса состоит из параметров id и name:

https://example.com/page? id=123&name=John

Чтобы получить значения из строки запроса в JavaScript, мы можем использовать встроенный объект URL, который предоставляет удобные методы для работы с URL-адресами.

Пример кода

Вот простой пример, который демонстрирует, как получить параметры из строки запроса:

// Получаем текущий URL
const currentUrl = window.location.href;

// Создаем объект URL из текущего URL
const url = new URL(currentUrl);

// Используем метод searchParams для получения значений параметров
const id = url.searchParams.get('id');
const name = url.searchParams.get('name');

// Выводим значения в консоль
console.log(`ID: ${id}`);
console.log(`Name: ${name}`);

В этом коде мы:

Обработка всех параметров

Если вы хотите получить все параметры строки запроса в виде объекта, вы можете использовать цикл:

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

for (const [key, value] of urlParams.entries()) {
    params[key] = value;
}

// Выводим все параметры в консоль
console.log(params);

В этом примере мы используем URLSearchParams для создания объекта, который содержит все параметры. Затем мы проходимся по всем парам ключ-значение с помощью for...of и добавляем их в объект params.

Примечания

• Обратите внимание, что значения в строке запроса могут быть закодированы (например, пробелы могут быть представлены как %20). JavaScript автоматически декодирует эти значения при их получении с помощью методов URLSearchParams.
• Если параметр отсутствует в строке запроса, метод get() вернет null.

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