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

Нативный JavaScript позволяет легко получить параметры строки 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 адресе могут присутствовать два ключа с одинаковым именем. В нынешнем своём виде 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().

Читайте также: Как получить соответствующие условию прямые потомки через CSS и JS.

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

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 в формате объекта. Он защищён от проблем в случае наличия нескольких параметров с одинаковым именем.