Самый простой способ получить и создать параметры URL: Javascript

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

Я покажу вам несколько инструментов, которые вы можете использовать для получения этих параметров URL.

Получить URL

Первое, что нам нужно сделать, это получить URL-адрес. На самом деле довольно просто. Все браузеры поддерживают URL-адрес окна с window.location.

const url = window.location

Это было просто.

Получить параметры URL

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

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

Вот код:

const url = window.location; // http://google.com?id=test
const urlObject = new URL(url);
const id = urlObject.searchParams.get('id')
console.log(id) 
// prints 
// test

Если id не существует, идентификатор будет нулевым.

Создать URL с параметрами

Также очень просто создать URL-адрес с параметрами. Мы снова используем инструмент api браузера URLSearchParams().

Вот совместимость этой функции.

URLSearchParams() - действительно отличная функция, и она может принимать множество опций.

Вот список возможных вариантов, которые может использовать конструктор.

const url = new URL('https://example.com?foo=1&bar=2');

// Retrieve params via url.search
// url.search ?foo=1&bar=2
const params = new URLSearchParams(url.search); 

// Pass in a sequence
const params3 = new URLSearchParams([["foo", 1],["bar", 2]]);

// Pass in a record
const params4 = new URLSearchParams({"foo" : 1 , "bar" : 2});

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

const params = { id: 'blahdy' }
const paramString = new URLSearchParams(params)
console.log(`http://google.com?${paramString.toString()}`)

Заключение

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

Также, если вы хотите увидеть еще один классный способ использования URLSearchParams, ознакомьтесь с моим сообщением о Крутых функциях ES2019 в этом году! . Здесь я объясняю новую интересную функцию, которую вы можете использовать с URLSearchParams.

Удачного кодирования!

Подпишись на меня в Твиттере!