Що робить window.location?

JavaScriptJunior~2 хв читання

window.location - це вбудований об'єкт браузера, який зберігає й керує адресою поточної сторінки (URL). З його допомогою можна отримати, змінити або перенаправити користувача на іншу адресу.

Визначення

window.location - це об'єкт, що представляє поточний URL в адресному рядку браузера. Він також відомий як location, тому що window. можна опустити.

1. Приклад: перегляд поточного URL

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"
}

2. Основні властивості `window.location`

Властивість	Що повертає	Приклад
`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"`

3. Приклад: використання

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

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

Можна змінювати адресу сторінки кількома способами

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

javascript

window.location.href = 'https://google.com';

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

Спосіб 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); // (застаріле) примусово з сервера

5. Приклад: робота з 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"

6. Зміна hash (якоря)

javascript

window.location.hash = '#about';

Це не перезавантажує сторінку, а просто прокручує до потрібного елемента з id="about" або викликає подію hashchange.

Підсумок

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

Запам'ятай просто: window.location - це "адресний рядок JavaScript". З ним можна:

дізнатися, де ти перебуваєш,

перейти куди потрібно,

оновити сторінку,

або змінити частину URL без перезавантаження.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.