Вы когда-нибудь хотели понять, как URL-адреса работают в JavaScript? Если это так, то вы пришли в нужное место!
В этой статье мы углубимся в тему анализа URL-адресов в JavaScript и поймем, как получить доступ к определенным данным из строки URL-адреса.
Мы сделаем это, разбив компоненты URL-адреса на их отдельные части, такие как имя хоста, путь, запрос и хэш, и проверив каждый из них.
Мы также расскажем о нескольких важных советах и рекомендациях по работе со строками URL в JavaScript, так что дочитайте до конца!
В конечном счете, эта статья — универсальный источник всего, что связано с анализом URL-адресов с помощью JavaScript.
Так что расслабьтесь и приготовьтесь освоить основы работы с URL-адресами в JavaScript!
Что такое анализ URL-адресов и почему это должно вас волновать?
Когда вы создаете веб-приложение, понимание анализа URL-адресов является важным навыком. Это процесс разбиения адреса веб-страницы на части для облегчения взаимодействия с ним.
Поняв синтаксический анализ URL-адресов, вы сможете в полной мере использовать возможности вашего веб-сайта для быстрой и легкой навигации по страницам и информации.
Анализ URL полезен не только для навигации; он также обеспечивает более простой способ изменения веб-сайтов и доступа к данным. С помощью синтаксического анализа URL-адресов вы можете передавать переменные и параметры на разные страницы с помощью строки запроса, создавая динамические возможности для пользователей, изменяя то, что отображается на странице, без обновления всей страницы.
Вы также можете получить доступ к базам данных, используя часть пути URL-адреса, чтобы ваше веб-приложение могло извлекать данные из них без необходимости включать их в форму или аналогичное поле ввода.
Наконец, вы можете использовать якоря (фрагменты, начинающиеся с #
), чтобы упростить навигацию по веб-сайту.
Обзор методов разбора URL-адресов в JavaScript
Разбиение URL-адреса на составные части является важной частью веб-разработки. Поняв структуру URL-адреса, вы сможете легко взаимодействовать с серверными службами и получать данные из удаленных источников.
В JavaScript есть несколько методов, которые вы можете использовать для анализа URL-адресов и получения от них дополнительной информации. К ним относятся URL
, URLSearchParams
, URLSearchParamsAPI
, location
и window.location
.
У каждого метода есть свои преимущества и недостатки — давайте рассмотрим каждый из них.
URL
: Собственный объектURL
позволяет создавать URL-адреса, манипулировать ими, запрашивать их части или задавать новые значения для их компонентов. Он также предоставляет некоторые полезные функции, такие как строки кодирования/декодирования, которые содержат конфиденциальную информацию, такую как пароли или другие личные данные.URLSearchParams
: этот метод создает объект пар ключ-значение, соответствующих параметрам запроса URL-адреса. Вы можете использовать его для создания различных параметров и установки их значений по мере необходимости.URLSearchParamsAPI
: этот API предоставляет доступ к основным функциям объектаURLSearchParams
, позволяя вам эффективно манипулировать URL-адресами, например, перебирать все элементы в URL-адресе без необходимости самостоятельно анализировать их вручную.location
: Свойство возвращает объект, представляющий текущее местоположение, включая имя хоста, путь, компоненты поиска и хеш-функции, что позволяет создавать ссылки из вашего приложения без необходимости вручную создавать URL-адреса каждый раз, когда они вам нужны.window.location
: Подобноlocation
, это свойство также возвращает объект
Понимание имени хоста в анализе URL-адресов JavaScript
Имя хоста — это доменное имя, которое вы используете для посещения веб-страницы или веб-сайта. Обычно это выглядит так: www.example.com
. В некоторых случаях вы также можете использовать IP-адреса, например https://216.58.208.46
.
Вы можете получить имя хоста текущей страницы, которую вы посещаете, с помощью метода location.hostname
API в JavaScript:
let hostname = window.location.hostname;
Этот метод API возвращает строку с доменным именем (именем хоста) текущей страницы, которую вы посещаете (например, www.example.com
).
У метода Hostname API также есть два других полезных метода, которые можно использовать для возврата более конкретной информации о доменном имени, например об используемых протоколах (например, http или https). Это location.protocol
и location.port
.
Например, если ваше имя хоста www.example.com
, и вы используете HTTPS для доступа к нему, то этот код вернет его как таковой:
let protocol = window.location.protocol; // returns "https:" let port = window.location.port; //returns "" (empty string)
Но если вы используете HTTP вместо HTTPS, то эти два метода вместо этого вернут это:
let protocol = window .location .protocol; // returns "http:" let port = window .location .port; //returns "80" (default HTTP port number)
Понимание имени пути в анализе URL-адресов JavaScript
Теперь, когда мы понимаем, что такое имя хоста и строки запроса, давайте рассмотрим четвертую и последнюю часть синтаксического анализа URL: путь в JavaScript.
Имя пути описывает расположение файла или ресурса на веб-сервере. Он начинается с косой черты /
, за которой следует имя каталога. Допустим, вы хотите получить доступ к index.html
, который находится в папке blog
, в которой находятся фильмы, музыка, литература и т. д. Путь будет выглядеть примерно так: /blog/films/index.html
.
Например, если вы стилизуете свою HTML-страницу с помощью CSS, имя пути позволит вам узнать, где находится ваш файл CSS — в нашем примере это будет что-то вроде /blog/films/css/style.css
.
Давайте посмотрим, как получить путь с помощью JavaScript! Все, что вам нужно сделать, это использовать этот фрагмент кода ниже:
let url = new URL('https://example.com/blog/films'); let getpathname = url.pathname; // '/blog/films'
Вы можете попробовать это сами здесь. По умолчанию, если вы не укажете конкретный файл для своих пользователей, то index.html
будет использоваться в качестве документа по умолчанию на большинстве веб-серверов, как упоминалось ранее.
Понимание того, как строки запросов и хэши работают в анализе URL-адресов JavaScript
Теперь, когда вы лучше понимаете имена хостов, пути и параметры, давайте взглянем на следующие части URL: строку запроса и хэш.
Строки запроса и хэши используются для указания дополнительных частей URL-адреса.
Строки запроса очень полезны для передачи контекстной информации о странице на сервер.
Хэш используется для указания определенной части страницы, которая будет отображаться сразу после загрузки.
Чтобы понять, что такое строки запроса и хэши, давайте посмотрим на этот пример:
http://example.com/search?q=javascript#hashtag
.
В этом примере q=javascript
представляет собой поисковый запрос, который мы передаем на наш сервер, а #hashtag
представляет якорь, с помощью которого мы можем заставить нашу страницу перейти непосредственно к этой части страницы после загрузки.
Доступ к строкам запроса и хэшам можно получить с помощью объекта window.location
в JavaScript.
Чтобы получить доступ к строке запроса нашего примерного URL-адреса, нам нужно вызвать window.location.search
, который вернет нам ?q=javascript
.
Чтобы получить доступ только к значению, нам нужно использовать синтаксис window.location.search.split('=')[1]
, который даст нам javascript
.
Точно так же для хэшей мы можем использовать window.location.hash
, что вернет нам только #hashtag
.
Работа с URL-адресами с использованием синтаксиса деструктурирования ES6
Следующим шагом в понимании того, как анализировать URL-адрес в JavaScript, является изучение того, как использовать синтаксис деструктурирования ES6. Это немного более продвинутый, чем предыдущие методы, которые мы рассмотрели, но также и самый удобный.
Используя синтаксис деструктурирования ES6, вы можете разбить части URL-адреса на отдельные переменные.
Для этого все, что вам нужно сделать, это заключить URL-адрес в фигурные скобки и использовать знак =
для присвоения переменных: const { protocol, hostname, port } = new URL(url)
.
Это назначит каждой части строки URL (протокол, имя хоста и порт) свою собственную переменную, которую вы можете свободно использовать в своем коде.
Этот метод особенно полезен для присвоения свойств внутри объекта или для передачи аргументов функции.
Пример:
const { protocol, hostname, port } = new URL(url); const user = { protocol: protocol, domain: hostname, port: port };
Теперь давайте посмотрим на некоторые примеры.
Пример 1: Анализ имени хоста из URL-адреса
Чтобы проанализировать имя хоста, используйте свойство hostname
экземпляра URLSearchParams
. Это вернет часть имени хоста данного URL:
let href = "https://www.example.com:8080/search#fragment?q=hello"; let url = new URLSearchParams(href); console.log(url.hostname); // Output: www.example.com
В приведенном выше примере мы выходим из системы с именем хоста в нашей консоли и получаем вывод www.example.com
.
Вот как мы легко узнаем, что является частью имени хоста данного URL-адреса, используя JavaScript!
Пример 2: Парсинг имени пути из URL
Мы также можем проанализировать путь из заданного URL-адреса, используя JavaScript следующим образом:
let href = "https://www.example.com/path/to/file"; let url = new URLSearchParams(href); console.log(url.pathname); // Output: /path/to/file
В нашем примере кода мы создаем экземпляр URLSearchParams
, а затем используем его свойство pathName
, чтобы получить доступ только к сегменту пути из этого конкретного URL-адреса; в данном случае это `/path
Заключение
В целом, синтаксический анализ URL-адресов является важной частью веб-разработки, и JavaScript предоставляет мощный набор параметров для легкого анализа URL-адресов.
Свойства имени хоста, пути, запроса и хэша позволяют разбивать URL-адреса на составные части, упрощая создание веб-приложений и управление контентом.
Выполняя шаги, описанные в этом руководстве, вы сможете быстро и легко анализировать URL-адреса, что на один шаг приблизит вас к вашим целям.
Читать далее
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.