URL: примеры (JAVASCRIPT)

Примеры использования

Создание объекта URL с абсолютным адресом:

const url1 = new URL('https://example.com/path?page=1#section');
console.log(url1.hostname);

example.com

Использование базового URL для относительного адреса:

const url2 = new URL('/about', 'https://mysite.com');
console.log(url2.href);

https://mysite.com/about

Работа с параметрами запроса через searchParams:

const url3 = new URL('https://api.site/search');
url3.searchParams.set('q', 'javascript');
url3.searchParams.append('sort', 'date');
console.log(url3.search);

?q=javascript&sort=date

Изменение компонентов URL:

const url4 = new URL('http://oldhost.com/page');
url4.protocol = 'https:';
url4.hostname = 'newhost.com';
console.log(url4.href);

https://newhost.com/page

Альтернативные подходы в JavaScript

URLSearchParams API – отдельный интерфейс для работы только с параметрами запроса, который может использоваться независимо от объекта URL. Предпочтителен при необходимости манипулировать только query-параметрами.

Методы Location объекта window – предоставляют доступ к компонентам URL текущей страницы. Используются для работы с адресом загруженного документа, а не для создания новых URL.

Свойство document.location – аналогично window.location, но специфично для документа. Применяется для перенаправления или анализа текущего URL страницы.

Исторические методы – ранее для разбора URL использовалось создание элемента <a> и анализ его свойств. Этот подход устарел с появлением нативного конструктора URL.

Типичные ошибки

Передача относительного URL без базового:

try {
  const url = new URL('/page');
} catch (err) {
  console.log(err.message);
}

Invalid URL

Некорректный формат URL:

try {
  const url = new URL('not-a-valid-url');
} catch (err) {
  console.log(err.name);
}

TypeError

Игнорирование особенностей кодирования:

const url = new URL('https://example.com');
url.searchParams.set('city', 'Москва');
console.log(url.search);

?city=%D0%9C%D0%BE%D1%81%D0%BA%D0%B2%D0%B0

Попытка изменения свойств URL, созданного из другого объекта:

const original = new URL('https://site.com');
const modified = new URL(original);
modified.hostname = 'newsite.com';
console.log(original.href === modified.href);

false

Изменения в последних версиях

В спецификации URL API продолжается развитие. Важные изменения включают:

• Поддержка интернационализированных доменных имен (IDN) стала более стабильной.
• Улучшена обработка нестандартных портов и пустых значений.
• Метод toJSON() был стандартизирован для сериализации объектов URL.
• Объект URLSearchParams получил дополнительные методы: sort(), forEach().
• Исправлено поведение при работе с credentials в URL (логин и пароль).
• В будущих спецификациях планируется улучшение поддержки относительных URL и протоколов, отличных от HTTP.

Большинство изменений направлено на улучшение совместимости со стандартами WHATWG и RFC 3986.

Расширенные примеры

Создание URL с параметрами из объекта:

function createURL(base, params) {
  const url = new URL(base);
  Object.entries(params).forEach(([key, value]) => {
    url.searchParams.append(key, value);
  });
  return url;
}
const url = createURL('https://api.example.com/data', {
  limit: 10,
  offset: 5,
  fields: 'id,name'
});
console.log(url.href);

https://api.example.com/data?limit=10&offset=5&fields=id%2Cname

Нормализация и сравнение URL:

function normalizeURL(urlString) {
  const url = new URL(urlString);
  url.protocol = url.protocol.toLowerCase();
  url.hostname = url.hostname.toLowerCase();
  url.pathname = url.pathname.replace(/\/$/, '');
  url.searchParams.sort();
  return url.href;
}
const url1 = normalizeURL('HTTPS://Example.com/path/?b=2&a=1');
const url2 = normalizeURL('https://example.com/path?a=1&b=2');
console.log(url1 === url2);

true

Работа с файловыми URL:

const fileURL = new URL('file:///C:/Users/Документы/file.txt');
console.log(fileURL.pathname);
const relativeFile = new URL('image.png', fileURL);
console.log(relativeFile.href);

/C:/Users/Документы/file.txt
file:///C:/Users/Документы/image.png

Извлечение всех параметров в объект:

function getParams(urlString) {
  const url = new URL(urlString);
  const params = {};
  url.searchParams.forEach((value, key) => {
    if (params[key]) {
      params[key] = Array.isArray(params[key]) ? 
        [...params[key], value] : [params[key], value];
    } else {
      params[key] = value;
    }
  });
  return params;
}
const testURL = 'https://site.com?color=red&color=blue&size=large';
console.log(getParams(testURL));

{ color: ['red', 'blue'], size: 'large' }

Создание безопасного URL с валидацией:

function safeRedirect(destination, allowedDomains) {
  try {
    const url = new URL(destination, window.location.origin);
    if (!allowedDomains.includes(url.hostname)) {
      return '/'; // Возвращаем безопасный fallback
    }
    return url.href;
  } catch {
    return '/';
  }
}
const allowed = ['mysite.com', 'trusted.com'];
console.log(safeRedirect('https://evil.com/data', allowed));

/

Аналоги в других языках программирования

Python (urllib.parse):

from urllib.parse import urlparse, urlunparse
result = urlparse('https://python.org/docs?q=url#intro')
print(result.netloc)  # python.org
new = result._replace(scheme='http')
print(urlunparse(new))

python.org
http://python.org/docs?q=url#intro

PHP (parse_url):

$url = 'https://php.net/manual?func=parse_url#example';
$parts = parse_url($url);
echo $parts['host'];  // php.net

php.net

Java (java.net.URL):

import java.net.URL;
URL url = new URL("https://java.com/download");
System.out.println(url.getHost());

java.com

C# (System.Uri):

Uri uri = new Uri("https://docs.microsoft.com/dotnet");
Console.WriteLine(uri.Host);

docs.microsoft.com

Основные отличия от JavaScript: в Python функция возвращает именованный кортеж, в PHP – ассоциативный массив, в Java и C# – объекты с методами получения компонентов. JavaScript предоставляет более интегрированный API через свойство searchParams.