← Назад к вопросам

Что такое URI?

1.7 Middle🔥 121 комментариев
#JavaScript Core

Комментарии (1)

🐱
deepseek-v3.2PrepBro AI6 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Что такое URI (Uniform Resource Identifier)

URI (Uniform Resource Identifier) — это фундаментальная концепция в компьютерных науках и веб-технологиях, представляющая собой унифицированный (единый) способ идентификации ресурса. Ресурсом может быть что угодно: веб-страница, изображение, документ, служба (сервис), электронный адрес или даже физический объект. URI служит "адресом" или "имем", которое позволяет однозначно определить ресурс в определенном контексте, чаще всего в сети Интернет. Это обобщенное понятие, которое включает два основных подтипа: URL и URN.

Основные компоненты и структура URI

Общая структура URI, согласно стандарту, может включать следующие компоненты:

[scheme:]//[authority][path][?query][#fragment]
  • Схема (Scheme): Определяет протокол или метод доступа к ресурсу. Это первая часть URI, которая указывает на "правила игры". Наиболее известные примеры: http, https, ftp, mailto, file.
  • Авторитет (Authority): Часть, которая идентифицирует "владельца" или источник ресурса. Чаще всего это включает домен (host) и иногда порт (port). Например, example.com:8080.
  • Путь (Path): Указывает на конкретный ресурс "внутри" авторитета, подобно пути к файлу в файловой системе. Например, /docs/index.html.
  • Запрос (Query): Дополнительные параметры, передаваемые ресурсу. Начинается с символа ? и состоит из пар ключ-значение (например, ?search=term&page=2).
  • Фрагмент (Fragment): Референс на определенную часть внутри ресурса. Начинается с символа #. В HTML это обычно идентификатор элемента (например, #chapter-1).

Различия между URL и URN

Важно понимать разницу между двумя основными типами URI:

  • URL (Uniform Resource Locator) — это URI, который не только идентифицирует ресурс, но и предоставляет информацию о месте его расположения и методе доступа к нему. URL отвечает на вопросы "Что это?" и "Как и где его найти?". Практически все адреса, которые мы вводим в браузер, являются URL.

    // Пример URL для веб-страницы
    const pageUrl = 'https://www.example.com/products/index.html?id=123#specs';
    
  • URN (Uniform Resource Name) — это URI, который предназначен для уникальной и постоянной идентификации ресурса по его имени, независимо от его текущего местоположения или способа доступа. URN должен оставаться неизменным даже если ресурс перемещается. Идеальным примером является ISBN для книг или UUID для цифровых объектов. Классический пример схемы URN — urn:isbn:0451450523. Однако в практике веб-разработки URN используются значительно реже, чем URL.

URI в контексте Frontend разработки

Для Frontend Developer понимание URI критически важно в нескольких ключевых областях:

  1. Работа с API и HTTP-запросами: Мы постоянно формируем URI для обращения к эндпоинтам backend-серверов.

    // Создание URI для запроса к API с параметрами
    const baseUrl = 'https://api.example.com/v1/users';
    const userId = 42;
    const requestUri = `${baseUrl}/${userId}/posts?limit=10&offset=0`;
    // Получится: https://api.example.com/v1/users/42/posts?limit=10&offset=0
    fetch(requestUri)
      .then(response => response.json());
    
  2. Манипуляции с адресной строкой браузера и History API: Мы читаем и изменяем текущий URI страницы для реализации динамической навигации в одностраничных приложениях (SPA).

    // Получение текущего URI и его компонентов
    const currentUri = window.location.href; // Полный URL
    const path = window.location.pathname; // Путь
    const queryParams = new URLSearchParams(window.location.search); // Параметры запроса
    const fragment = window.location.hash; // Фрагмент
    
    // Изменение URI через History API (без полной перезагрузки страницы)
    history.pushState({}, '', '/new-page?filter=active');
    
  3. Валидация и безопасность (Security): Необходимо правильно обрабатывать URI, чтобы избежать инъекций или неправильных запросов. Важно использовать безопасные методы конструирования URI вместо простой конкатенации строк.

    // Более безопасный способ построения URI с параметрами
    const url = new URL('https://api.example.com/search');
    url.searchParams.set('q', 'frontend');
    url.searchParams.set('sort', 'date');
    console.log(url.href); // https://api.example.com/search?q=frontend&sort=date
    
  4. Абсолютные и относительные URI: Frontend разработчик должен четко понимать разницу между абсолютными URI (начинаются со схемы, например, https://cdn.com/image.jpg) и относительными URI (определяются относительно текущего контекста, например, /assets/script.js или ../images/icon.png). Относительные URI широко используются для ссылок на ресурсы внутри проекта.

Заключение

URI — это не просто "адрес в интернете". Это строго стандартизированная (RFC 3986) и всеобъемлющая система идентификации, которая лежит в основе работы всего веба. Для фронтенд-разработчика глубокое понимание URI, его структуры, типов (URL/URN) и безопасных методов работы с ним является обязательным. Это позволяет эффективно взаимодействовать с API, управлять состоянием приложения через адресную строку, корректно ссылаться на ресурсы и писать более надежный и безопасный код. В современном JavaScript для этих задач активно используются объекты URL и URLSearchParams.