Параметры запроса — это забавные строки в URL-адресе после вопросительного знака (?). Вот пример URL с параметром запроса:

https://www.google.com/search?q=what+is+a+url+parameter

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

Этот URL имеет единственный параметр запроса: q. Однако URL-адреса могут иметь несколько параметров. Каждый параметр имеет значение после знака равенства и отделяется от других параметров амперсандом (&). Вам не часто нужно обращаться к ним в интерфейсном Javascript, но когда вам это нужно, спорить с ними будет не так-то просто. В Javascript нет хороших инструментов, помогающих нам работать с параметрами запроса, поэтому нам придется делать большую часть этого самостоятельно.

Чем они хороши?

Параметры запроса позволяют сохранить небольшую часть состояния в URL-адресе. Если вы попробуете пример URL-адреса Google выше, вы заметите, что мой поиск все еще находится в окне поиска Google. Мне не нужно просить вас зайти в Google и ввести тот же поисковый запрос; Я просто даю вам URL-адрес с запросом, уже сохраненным в параметре запроса. Google знает, чтобы показать вам результаты этого поиска. Аналогичным образом вы можете использовать параметры запроса для хранения некоторого состояния вашего приложения. Иногда вы можете даже захотеть узнать об этом состоянии во внешнем интерфейсе. Если это так, этот пост может помочь.

Получение строки параметров

Мы можем использовать объект location window для получения строки параметра. Строка параметра находится в свойстве search.

const queryParamsString = window.location.search.substr(1);

Разбор параметров

Было бы неплохо иметь параметры в виде объекта. Таким образом, если бы мы хотели получить значение параметра с именем name, мы могли бы сделать это следующим образом:

queryParams.name

Мы можем сделать это очень просто, объединив метод split с методом reduce типа массива.

Каждый параметр запроса отделяется амперсандом, поэтому мы разделим строку на него.

queryParamsString.split('&')

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

Уменьшить до объекта

Мы будем использовать reduce, чтобы разделить каждую строку параметров на ее ключ и значение, создав объект из этих ключей и значений.

const queryParams = queryParamsString.split('&').reduce((accumulator, singleQueryParam) => { const [key, value] = singleQueryParam.split('='); accumulator[key] = value; return accumulator; }, {})

Давайте разберем это. У нас есть константа queryParams, которой мы присваиваем значение, возвращаемое остальной частью кода здесь. Мы разбиваем queryParamsString на амперсанд, что дает нам массив строк, каждая из которых содержит строку для одного параметра запроса. Вот как будет выглядеть этот массив, учитывая URL-адрес примера в верхней части сообщения: ['q=what+is+a+url+parameter']

Затем мы уменьшаем этот массив, начиная с пустого объекта в качестве аккумулятора. (Вы найдете пустой объект, переданный непосредственно перед закрывающей скобкой вызова reduce.)

Чтобы сделать это сокращение, мы сначала разбиваем текущую строку параметра по знаку равенства, что дает нам массив с именем параметра в качестве первого значения и значением этого параметра в качестве второго. (Иногда параметры запроса не имеют знак равенства. Мы намеренно не учитываем их здесь, но это может понадобиться вашему приложению.) Мы распаковываем полученный массив и присваиваем его переменным key и value. Это классный новый способ присваивать значения отдельных массивов переменным в ES6.

Наконец, мы добавляем эту новую пару ключ/значение в объект-аккумулятор. Мы используем квадратные скобки, чтобы мы могли использовать имя ключа переменной. Мы присваиваем этому ключу значение.

Как заставить пробелы и специальные символы работать

Приложение в основном готово, но у него есть одна большая проблема. Вы заметите это, когда попытаетесь использовать параметр запроса с пробелом (или другим специальным символом). Поскольку URL-адреса не могут обрабатывать эти символы, они кодируются, чтобы их можно было сохранить в URL-адресе. (Подробности см. в Статье Алана Скоркина об URL-адресах. Прочтите раздел о специальных символах.)

Например, пробел становится %20 в закодированном значении параметра. (Примечание. В примере URL-адреса от Google и во многих других приложениях, использующих параметры поискового запроса, вместо пробела используется знак плюса, а не кодировка URL-адреса. Если вы хотите справиться с этим, вам потребуется написать собственный код. чтобы заменить плюсики на пробелы. Для этого отлично подойдет регулярное выражение.)

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

const queryParams = queryParamsString.split('&').reduce((accumulator, singleQueryParam) => { const [key, value] = singleQueryParam.split('='); accumulator[key] = decodeURIComponent(value); return accumulator; }, {})

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

Попробуйте на детской площадке

Теперь у нас есть все необходимое для базовой обработки параметров запроса. Давайте попробуем! Я создал простое приложение для игровой площадки, чтобы вы могли увидеть, как все сочетается друг с другом, и поэкспериментировать с различными параметрами и значениями запроса. Если вы хотите попробовать, просто поделитесь своим адресом электронной почты ниже. 👇



Площадка параметров URL



Первоначально опубликовано на raddvon.com 28 апреля 2018 г.