Создавайте 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. Честно говоря, мне нравится простота и интуитивность его использования, и это меня очень радует, а вас?