Создавайте Querystring как профессионал

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

URL — отличное место для включения некоторых статусов вашего приложения. Преимущество заключается в том, что пользователи могут поделиться с ним URL с установленными фильтрами.

Сложность иногда заключается в том, как получить и обновить эти параметры URL. Честно говоря, в современных браузерах есть изящный API под названием URLSearchParams ✨ Он позволяет нам элегантно извлекать или обновлять параметры URL.

URLSearchParams доступен в node.js и большинстве браузеров.

❤️ Следуй за мной

🤔 Что такое URLSearchParams?

API URLSearchParams позволяет нам очень элегантно читать строку запроса из URL-адреса, и нам больше не нужно делать сложные реализации, в прошлом было необходимо вызывать внешние API или использовать обычные выражения. В этом посте я объясню некоторые функции этого API.

🚀 Начало работы

Первое, что нам нужно сделать, это инициализировать класс, содержащий строку запроса.

const urlSearchParams = new URLSearchParams(`?username=thebug404&fullname=The+Bug`);

Или вы можете получить значения через URL-адрес браузера

const urlSearchParams = new URLSearchParams(window.location.search);

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

📖 Чтение параметров

Чтобы получить конкретный параметр, вы можете использовать метод get()

const userId = urlSearchParams.get("username"); // thebug404

💾 Добавление параметров

Метод append() используется для добавления новых параметров запроса в URL.

urlSearchParams.append("country", "El Salvador")
console.log(urlSearchParams.toString()); // country=El+Salvador

🗑️ Удаление параметров

Метод delete() используется для удаления параметров запроса из URL.

urlSearchParams.delete("fullname");

🔥 Генерация URL

Другой полезный вариант использования — создание URL-адреса с URL-адресами и URLSearchParams под капотом.

const url = new URL("https://domain.com");
url.searchParams.set('username', 'thebug404');
console.log(url.toString()); // https://domain.com/?username=thebug404

💡 Заключение

Как мы видели, создание URL-адресов, получение, добавление и удаление параметров URL-запроса — очень простая задача с этим API. Честно говоря, мне нравится простота и интуитивность его использования, и это меня очень радует, а вас?

❤️ Следуй за мной