
Предположим у нас имеется ссылка. Перед нами стоит задача получить параметры строки 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() имеет полную поддержку всеми современными браузерами.