Отримати значення рядка запиту в JavaScript

Мітка часу: 21 липня 2022 р., 12:22

В URL-адресі значення рядка запиту часто надають інформацію про запит, наприклад параметри для пошуку або ідентифікатор об’єкта, який ви використовуєте. Якщо будь-яка бізнес-логіка або логіка запиту обробляється в інтерфейсі, важливо знати, як отримати значення рядка запиту з URL-адреси. Існує кілька способів досягти цього, деякі з яких ми побачимо тут.

URLSearchParams

Команда URLSearchParams інтерфейс підтримується всіма основними версіями браузера, крім IE 11. Він працює, аналізуючи рядок запиту URL-адреси та надаючи спосіб доступу до значень. Наприклад:

let params = new URLSearchParams('q=node&page=2');
params.get('q'); 
params.get('page');

Одним із недоліків цього інтерфейсу є те, що ви повинні передати йому лише рядок запиту URL-адреси. Якщо ви працюєте з поточною URL-адресою браузера, це легко зробити, оскільки ви можете просто пропустити window.location.search. Якщо ви працюєте з будь-якою іншою URL-адресою, вам потрібно буде проаналізувати та передати рядок запиту окремо.

Щоб розібрати параметри запиту в об’єкт, використовуйте URL.searchParamsс .entries() метод, який повертає an Iterator пар ключ/значення, а також Object.fromEntries щоб перетворити його на об’єкт.

let params = new URLSearchParams('q=node&page=2');
let entries = params.entries();
Object.fromEntries(entries);

Об'єкт URL

Команда URL API також підтримується всіма основними версіями браузерів, крім IE 11. Він пропонує більш гнучкий спосіб аналізу URL-адрес, а також надає спосіб доступу до значень рядка запиту. Наприклад:

const url = new URL('https://stackabuse.com/search?q=node&page=2');
const searchParams = url.searchParams;

searchParams.get('q'); 
searchParams.get('page');

url.searchParams це той самий тип об’єкта екземпляра, який повертає URLSearchParams.

Команда url об’єкт вище також має всі частини URL-адреси, розбиті на частини. Наприклад:

url.href; 
url.origin; 
url.protocol; 
url.host; 
url.hostname; 
url.port; 
url.pathname; 
url.search; 
url.hash;

Чистий JavaScript

Якщо з будь-якої причини ви не можете отримати доступ до наведених вище API або хочете мати більше контролю над синтаксичним аналізом, ви можете використати наступний код, щоб розібрати рядок запиту в об’єкт.

function getQueryParams(url) {
    const paramArr = url.slice(url.indexOf('?') + 1).split('&');
    const params = {};
    paramArr.map(param => {
        const [key, val] = param.split('=');
        params[key] = decodeURIComponent(val);
    })
    return params;
}

примітки: Існує багато способів аналізу параметрів запиту в простому JS, деякі складніші (і надійніші), ніж інші. Це лише один із способів, з якого було адаптовано ця суть.

Потім ми можемо використовувати цю звичайну функцію JS, щоб розібрати один параметр запиту в рядок:

getQueryParams('https://stackabuse.com/search?q=node&page=2')

Часова мітка:

Більше від Stackabuse