Как получить параметры строки URL адреса на нативном js

Предположим у нас имеется ссылка. Перед нами стоит задача получить параметры строки URL адреса в виде объекта с парами ключ / значение. Давайте разберемся, как это сделать.

Создание вспомогательной функции

Начнем с создания вспомогательной функции getParams(). Она будет принимать URL адрес в качестве аргумента. В случае его отсутствия по умолчанию она должна использовать window.location.

function getParams (url = window.location) {
    let params = {}; // Создаем объект для параметров
    return params; // Функция будет возвращать заполненный объект
}

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

Способ получить параметры строки URL адреса

Теперь займемся извлечением нужных данных из URL. Для этого нам потребуются объекты URL() и URLSearchParams(). Мы не будем рассматривать их в этой статье, так как более подробно о них можно прочитать в другом посте.

Объект URLSearchParams() имеет метод forEach(), который можно использовать для циклического перебора всех параметров. С его помощью мы будем получать их и передавать в объект.

URL адрес мы передадим в конструктор new URL(), а затем вызовем метод forEach() для свойства searchParams. Внутри метода forEach() мы добавим ключ и его значение в объект. При этом декодировать ничего не потребуется. Объект URLSearchParams() сделает это за нас автоматически.

function getParams (url = window.location) {
    let params = {};

    new URL(url).searchParams.forEach(function (val, key) {
        params[key] = val; // Пушим пары ключ / значение (key / value) в объект
    });
    
    return params;
}

Как обработать одинаковые параметры строки URL адреса

Мы получили работающий код, но можем столкнуться с проблемой. Дело в том, что в URL адресе могут присутствовать два ключа с одинаковым именем — seasoning.

В нынешнем своем виде getParams() будет включать только последний ключ. Каждый последующий ключ с одинаковым именем будет затираться новым.

Давайте напишем проверку и определим, существует ли уже такой ключ в объекте. Если да, то превратим его в массив, добавим существующее значение и запушим в объект.

function getParams (url = window.location) {
    let params = {};
    
    new URL(url).searchParams.forEach(function (val, key) {
        if (params[key] !== undefined) { // Проверяем параметр на undefined
        /* Проверяем, существует ли в объекте идентичный ключ
        *  Если существует, то превращаем его в массив, добавляем текущее значение
        *  и пушим новое
        */
        params[key] = [params[key]]; 
        params[key].push(val);
        } else {
            params[key] = val;
        }
    });
    return params;
}

Однако этот способ отлично работает только при наличии двух одинаковых ключей. Если же их окажется больше, то значение этого ключа уже будет массивом и создание нового вызовет проблемы.

Для этого необходимо сначала сделать проверку, является ли params[key] уже массивом. Для этого воспользуемся методом Array.isArray().

Финальный код

function getParams (url = window.location) {
    let params = {};
    
    new URL(url).searchParams.forEach(function (val, key) {
        if (params[key] !== undefined) { // Проверяем параметр на undefined
        /* Проверяем, имеется ли в объекте аналогичный params[key] 
        *  Если его нет, то добавляем его в объект
        */
        if (!Array.isArray(params[key])) {
            params[key] = [params[key]];
        }
        params[key].push(val);
        } else {
            params[key] = val;
        }
    });
    console.log(params);
    return params;
}

// Запускаем функцию и передаем в нее URL
getParams(url);

// Получаем в консоль
/* 
    {sandwich: "beef salad", bread: "wheat", seasoning: Array(2)}
    bread: "wheat"
    sandwich: "beef salad"
    seasoning: Array(2)
    0: "ketchup"
    1: "mayonnaise"
    length: 2
    __proto__: Array(0)
    __proto__: Object

*/

Теперь мы получили работающий код, который позволяет получить параметры строки URL в формате объекта. Он защищен от проблем в случае наличия нескольких параметров с одинаковым именем. А метод Array.isArray() имеет полную поддержку всеми современными браузерами.