Что такое URL?

Что такое URL (Uniform Resource Locator)

URL - это стандартный способ адресации ресурсов в интернете. Это строка, которая указывает на точное местоположение веб-страницы, API endpoint или файла. За 10+ лет веб-разработки я работаю с URL ежедневно, и понимание его структуры - критически важно.

Определение и назначение

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

https://www.github.com:443/torvalds/linux?tab=readme#installation

Это не просто строка - это структурированный адрес с множеством компонентов.

Структура URL

Полная форма URL содержит следующие части:

scheme://user:password@host:port/path?query#fragment

1. Scheme (Протокол)

https://
http://
ftp://
file://
ws:// (WebSocket)
wss:// (WebSocket Secure)

https - зашифрованный протокол передачи данных (HTTP over SSL/TLS). Это стандарт для веб-приложений. http - незашифрованный протокол (редко используется в production).

2. Host (Хост)

https://example.com
https://api.example.com
https://192.168.1.1
https://localhost

Хост - это имя домена или IP адрес сервера. Браузер использует DNS для преобразования имени домена в IP адрес.

3. Port (Порт)

https://example.com:443  (порт явно указан)
https://example.com      (порт по умолчанию: 443 для HTTPS, 80 для HTTP)
http://localhost:3000    (указан custom port для development)

Порт - это числовой идентификатор процесса на сервере. Порты 80 и 443 используются по умолчанию и часто не пишутся явно.

4. Path (Путь)

https://api.example.com/api/v1/users
https://github.com/torvalds/linux
https://example.com/files/document.pdf

Путь указывает на конкретный ресурс на сервере. Обычно структурирован иерархически, похоже на файловую систему.

5. Query String (Строка запроса)

https://example.com/search?q=javascript&sort=date&limit=10

Запрос содержит параметры для фильтрации или конфигурации запроса:

• Начинается с ?
• Параметры разделены &
• Формат: key=value

6. Fragment (Якорь)

https://developer.mozilla.org/en-US/docs/Web/JavaScript#functions

Фрагмент указывает на определённую часть страницы. Браузер автоматически прокручивает к этому элементу. Фрагмент не отправляется на сервер.

Практические примеры

Полный URL с объяснением каждой части:

https://api.github.com:443/repos/facebook/react/issues?state=open&labels=bug#body
│       │               │   │                         │                      │
│       │               │   │                         │                      └─ Fragment
│       │               │   │                         └─ Query String
│       │               │   └─ Path
│       │               └─ Port (default for HTTPS)
│       └─ Host
└─ Scheme

URL кодирование

Специальные символы в URL должны быть закодированы:

// Пробель кодируется как %20 или +
https://example.com/search?q=hello%20world
https://example.com/search?q=hello+world

// Иные символы:
// & -> %26
// = -> %3D
// # -> %23
// % -> %25

// В JavaScript используй encodeURIComponent
const query = "hello world & friends";
const encoded = encodeURIComponent(query); // "hello%20world%20%26%20friends"
const url = `https://example.com/search?q=${encoded}`;

// Для обратного преобразования
const decoded = decodeURIComponent(encoded);
console.log(decoded); // "hello world & friends"

URL в JavaScript (Web API)

Класс URL для парсинга и работы с URL:

const url = new URL('https://api.example.com/users?id=123&sort=name#details');

console.log(url.protocol);    // "https:"
console.log(url.hostname);    // "api.example.com"
console.log(url.port);        // "" (default port)
console.log(url.pathname);    // "/users"
console.log(url.search);      // "?id=123&sort=name"
console.log(url.hash);        // "#details"

// Работа с query параметрами
const params = url.searchParams;
console.log(params.get('id'));      // "123"
console.log(params.get('sort'));    // "name"

// Изменение параметров
params.set('limit', '10');
params.delete('sort');
console.log(url.toString());
// "https://api.example.com/users?id=123&limit=10#details"

Абсолютные vs Относительные URL

Абсолютный URL - полный адрес:

<a href="https://example.com/about">About</a>
<img src="https://cdn.example.com/logo.png" />

Относительный URL - относительно текущей страницы:

<!-- Текущая страница: https://example.com/blog/post1 -->

<a href="/about">About</a>           <!-- https://example.com/about -->
<a href="post2">Post 2</a>           <!-- https://example.com/blog/post2 -->
<a href="../contact">Contact</a>    <!-- https://example.com/contact -->
<a href="./more">More</a>            <!-- https://example.com/blog/more -->

Относительные URL полезны для переносимости (работают при смене домена) и меньше по размеру.

URL в веб-разработке

REST API endpoints:

GET    /api/v1/users              // Получить всех пользователей
GET    /api/v1/users/123          // Получить пользователя с ID 123
POST   /api/v1/users              // Создать пользователя
PUT    /api/v1/users/123          // Обновить пользователя
DELETE /api/v1/users/123          // Удалить пользователя

// Fetch примеры
fetch('/api/v1/users')
  .then(response => response.json())
  .then(data => console.log(data));

fetch('/api/v1/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Alice', email: 'alice@example.com' })
});

Маршрутизация в Next.js / React Router:

// Next.js динамические маршруты
// /app/posts/[id]/page.tsx
// URL: /posts/123 -> id = "123"

interface Params {
  id: string;
}

export default function PostPage({ params }: { params: Params }) {
  return <h1>Post {params.id}</h1>;
}

// React Router
<Routes>
  <Route path="/users/:id" element={<UserDetail />} />
  <Route path="/posts/:slug" element={<PostDetail />} />
</Routes>

URL Best Practices

1. Структура URL должна быть понятной

✅ /products/electronics/laptops/gaming
❌ /p/e/l/g

1. Используй kebab-case для URL

✅ /blog/my-awesome-post
❌ /blog/MyAwesomePost
❌ /blog/my_awesome_post

1. Избегай redundancy

✅ /api/v1/users/123
❌ /api/v1/users/user/123

1. Query параметры для фильтрации

✅ /products?category=electronics&sort=price&limit=20
❌ /products/electronics/sort_price/limit_20

1. Версионирование API в URL

/api/v1/...
/api/v2/...

Резюме

URL - это адресная система интернета. Структурированная строка, состоящая из протокола, хоста, порта, пути, параметров и якоря. Понимание URL критически важно для веб-разработки: от создания ссылок до работы с API, маршрутизации и SEO. Современный разработчик должен комфортно работать с URL через JavaScript API, браузер и различные фреймворки.