Разница между location и location.href в JavaScript

Быстрый ответ

Мы можем использовать как location.href, так и location для переадресации страницы. Они весьма схожи, но имеют небольшие различия. Присвоение через location.href более явное, в то время как использование location является упрощенной записью.

location.href = 'https://www.example.com'; // Явное присваивание
location = 'https://www.example.com'; // Упрощенная запись

Оба метода приведут к переходу на новую страницу, как будто вы используете способность телепортации!

Подробное сравнение: location.href или location

Общие функции

Как location.href, так и location инициируют переадресацию в веб-браузере, практически без разницы в конечном результате на современных платформах. Однако, location.href может быть более понятно для других разработчиков, поскольку оно явно указывает на изменение свойства href в URL.

Подробнее об этом расскажет наш спикер на видео

Совместимость с браузерами: Взгляд назад

location.href обеспечивает большую совместимость с устаревшими браузерами, включая Internet Explorer. Это можно сравнить с универсальным путевым адаптером – он работает везде.

Избегание путаницы с методами

Употребление просто location может вызвать путаницу, особенно когда в коде используются методы вроде location.replace, которые не добавляют переход в историю браузера. В таких случаях ясность имеет важное значение.

Читаемость кода: Приоритет у clarity

Поскольку код чаще всего читают, а не пишут, наличие .href в location.href делает его использование предпочтительнее для лучшего понимания назначения данного кода.

Веб-навигация: Практическое руководство

Присвоение конкретных URL

При присваивании определенного URL, предпочтение следует отдать location.href для большей ясности:

// Установка определенных координат в GPS
location.href = 'https://www.example.com/going-here';
location = 'https://www.example.com/going-here';

Перенаправление без сохранения в истории

Используйте location.replace, чтобы перейти на новый адрес, не оставляя записи о прошлых переходах в истории браузера:

// Как тихо выполнить задание
location.replace('https://www.example.com/secret-mission');

Работа с динамическими URL

При необходимости обработки сложных URL используйте объект URL, после чего присвойте его location.href:

// Компоновка URL по различным элементам
const url = new URL('https://www.example.com');
url.searchParams.append('query', 'javascript');
location.href = url;

Модификация URL как строки

Если вам потребуется поменять URL без перехода на другую страницу, вы можете привести location.href к строке и воспользоваться операцией замены:

// Чтобы переименовать раздел без перехода на другую страницу
const currentUrl = String(location.href);
const newUrl = currentUrl.replace('old-section', 'new-section');

Визуализация

Визуализируем location как дом (🏡), а location.href – как дверь (🚪) этого дома.

`location`:       🔄🏰 // Дом целиком переносится в другое место.
`location.href`:  🔄🚪 // Только дверь поменяет свою локацию, весь дом остаётся на месте.

Изменение location.href означает смену локации двери, а изменение location – перемещает здание целиком:

// Используя `location.href`:
🚪→ (Теперь мы оказываемся в новом месте)

// Используя `location`:
🏡→🏖️ (Дом телепортировался на пляж!)

Читаемость кода и лучшие практики

Ясность и простота кода делают его легко понятным и легко обслуживаемым. Использование location.href снижает риск недопонимания, облегчая его поддержку.

Обратив внимание на совместимость, мы видим что современные браузеры более толерантны, но всегда стоит помнить о возможных нюансах старых версий. location.href в таких случаях поможет избежать проблем.

Полезные материалы

1. Window: свойство location — Web API | MDN — MDN – всегда актуальный источник информации о JavaScript.
2. Свойство Location href — Базовые знания JavaScript на W3Schools всегда под рукой.
3. В чём разница между window.location и window.location.replace()? – Stack Overflow — Stack Overflow – место, где вы можете найти ответы на свои вопросы.
4. Объект URL — Тщательный анализ работы с URL в JavaScript.
5. Перенаправление веб-страницы | CSS-Tricks — Рекомендации и лучшие практики по перенаправлению страниц от CSS-Tricks.
6. web.dev — Современные веб-разработки и передовые практики на web.dev.