Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «window.location». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

**`window.location` це вбудований об'єкт браузера, який зберігає адресу поточної сторінки (URL) і дозволяє нею керувати: прочитати, змінити або перенаправити користувача на іншу адресу.** Через його властивості (`href`, `protocol`, `host`, `hostname`, `port`, `pathname`, `search`, `hash`, `origin`) ви розбираєте URL на частини, а через методи керуєте навігацією: `assign(url)` переходить і залишає запис в історії, `replace(url)` переходить без запису (кнопка «Назад» не поверне), `reload()` перезавантажує сторінку. Присвоєння `location.href` рівносильне `assign()`. Зміна `location.hash` не перезавантажує сторінку, а лише прокручує до елемента і кидає подію `hashchange`.

```javascript
console.log(location.hostname); // example.com
console.log(location.search);   // ?id=42

location.replace('https://example.com/logout'); // без запису в історії
```

**Ключове:** `window.location` це «адресний рядок у вигляді об'єкта»: читає поточний URL і керує переходами, а `replace()` відрізняється від `assign()` тим, що не зберігає сторінку в історії.

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**`window.location` це об'єкт, який представляє поточний URL в адресному рядку браузера, і одночасно інструмент навігації.** Його також називають просто `location`, бо префікс `window.` можна опустити.

## Теорія

### TL;DR

- `window.location` зберігає адресу поточної сторінки і дозволяє нею керувати.
- Читання: `href`, `protocol`, `host`, `hostname`, `port`, `pathname`, `search`, `hash`, `origin`.
- Перехід: присвоєння `location.href`, `location.assign(url)`, `location.replace(url)`.
- `replace()` не залишає запису в історії, тому кнопка «Назад» не спрацює.
- `location.reload()` перезавантажує сторінку.
- Query-параметри зручно розбирати через `new URLSearchParams(location.search)`.
- Зміна `location.hash` не перезавантажує сторінку і кидає подію `hashchange`.

### Швидкий приклад

```javascript
console.log(window.location);
```

Приклад виведення в консоль:

```javascript
Location {
  href: "https://example.com/path/page.html?user=123#section",
  protocol: "https:",
  host: "example.com",
  pathname: "/path/page.html",
  search: "?user=123",
  hash: "#section"
}
```

### Основні властивості

| Властивість | Що повертає | Приклад |
| --- | --- | --- |
| `href` | Повний URL | `"https://example.com/path?page=1#info"` |
| `protocol` | Протокол | `"https:"` або `"http:"` |
| `host` | Домен і порт | `"example.com"` або `"localhost:3000"` |
| `hostname` | Тільки домен | `"example.com"` |
| `port` | Номер порту | `"3000"`, якщо вказаний |
| `pathname` | Шлях після домену | `"/path/page.html"` |
| `search` | Рядок запиту (query params) | `"?page=1&sort=asc"` |
| `hash` | Якір (частина після `#`) | `"#section"` |
| `origin` | Тільки протокол, домен і порт | `"https://example.com"` |

На практиці це виглядає так:

```javascript
console.log(location.href);      // повна адреса сторінки
console.log(location.hostname);  // example.com
console.log(location.pathname);  // /articles/js
console.log(location.search);    // ?id=42
console.log(location.hash);      // #comments
```

### Перенаправлення користувача

Змінити адресу сторінки можна кількома способами.

**Спосіб 1: напряму змінити `href`**

```javascript
window.location.href = 'https://example.com/dashboard';
```

Повне перенаправлення, аналог кліку по посиланню.

**Спосіб 2: метод `assign()`**

```javascript
window.location.assign('https://example.com/login');
```

Теж перенаправляє, але зберігає поточну сторінку в історії браузера. Тобто користувач може натиснути «Назад».

**Спосіб 3: метод `replace()`**

```javascript
window.location.replace('https://example.com/logout');
```

Перенаправлення без збереження в історії, користувач не зможе повернутися назад кнопкою браузера.

**Спосіб 4: перезавантажити сторінку**

```javascript
window.location.reload(); // оновити
window.location.reload(true); // (застаріле) примусово з сервера
```

### Робота з query-параметрами

```javascript
console.log(window.location.search); // "?user=42&theme=dark"

const params = new URLSearchParams(window.location.search);
console.log(params.get('user')); // "42"
console.log(params.get('theme')); // "dark"
```

`URLSearchParams` сам робить декодування, тому не треба вручну різати рядок по `&` і `=`.

### Зміна hash

```javascript
window.location.hash = '#about';
```

Це не перезавантажує сторінку, а просто прокручує до потрібного елемента з `id="about"` або кидає подію `hashchange`. Саме на цьому будувалася hash-навігація в старих SPA.

### Підсумок

| Що робить | Приклад |
| --- | --- |
| Отримує поточний URL | `location.href` |
| Змінює адресу сторінки | `location.href = 'https://example.com'` |
| Перенаправляє зі збереженням історії | `location.assign(url)` |
| Перенаправляє без історії | `location.replace(url)` |
| Оновлює сторінку | `location.reload()` |
| Дістає query-параметри | `location.search`, `URLSearchParams` |
| Змінює hash без перезавантаження | `location.hash = '#id'` |

Коротко: `window.location` це «адресний рядок JavaScript». З ним можна дізнатися, де ти знаходишся, перейти куди треба, оновити сторінку або змінити частину URL без перезавантаження.

### Типові помилки

- **Плутати `assign()` і `replace()`.** Після `replace()` кнопка «Назад» не поверне користувача на попередню сторінку, тому її беруть для logout і редіректів після оплати, а не для звичайної навігації.
- **Різати `location.search` вручну.** `split('&')` ламається на закодованих значеннях і на порожніх параметрах, для цього є `URLSearchParams`.
- **Плутати `host` і `hostname`.** `host` містить порт (`localhost:3000`), `hostname` ні (`localhost`).
- **Використовувати `location.href = ...` в SPA.** Це повне перезавантаження додатка, для внутрішньої навігації потрібен `history.pushState()` або роутер фреймворку.
- **Покладатися на `location.reload(true)`.** Аргумент застарілий і сучасні браузери його ігнорують, обхід кешу робиться заголовками або версійним параметром в URL.
- **Записувати в `location` дані від користувача без перевірки.** Це відкритий редірект: адресу треба звіряти зі списком дозволених або залишати тільки відносний шлях.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати604 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.