JS Зарисовки на тему URL

А вы знали что…

Не зная таких вещей, можно наломать дров

Наверняка вы знаете что, чтобы получить имя домена нужно обратиться к window.location:

window.location.href

При этом не раз слышал на собеседовании что чтобы получить имя домена, надо парсить это свойство. Я думаю что многие знают, что чтобы получить части URL нужно обратиться к соответствующим полям (их там на все части URL):

window.location.host     // medium.com
window.location.hostname // medium.com

Но не все знают, что можно не писать window, так как location будет найден по цепочке, так что это можно писать в любом месте, внутри любой функции как:

const getHostName = () => location.hostname ;

А вы знали, что чтобы получить имя домена в JS можно обратиться так же к document.domain ?

const getHostName = () => document.domain ;

Свойство domain у Document интерфейса получает/устанавливает доменную часть источника происхождения (origin) текущего документа и используется в политике ограничения домена (same origin policy).

Чтобы сделать редирект на другую страницу всегда и везде писали и пишем такой код:

window.location.href = 'https://geekjob.ru'

А вы знали, что можно просто присвоить значение в location и это будет равносильно window.location.href?

location = 'https://geekjob.ru'

Дело в том, что location это не просто глобальное свойство — это setter/getter объект (ну там немного сложнее, но для простоты так). Когда вы присваиваете значение в location, вызывается метод:

location.assign('https://geekjob.ru')

Отсюда могут родиться хитрые вопросы для собеседования: что делает следующий код?

function getLocation() {
   location = 'vacancy.new.hr';
return location
}

console.log( getLocation() ) // ???

Скорее всего будет ответ что есть локальная переменная, которая протекает в глобальную область. На самом деле будет редирект страницы, да. Вот такие вот дела.

Конечно для Node.js это все не актуально. Но для браузеров еще как. Отсюда вывод: настраивайте линтеры так, чтобы не пропускать инициализации, используйте use strict и вот это все.

А знаете ли вы, что чтобы получить текущий URL в виде строки, то не обязательно писать window.location.href ?

Вы можете использовать метод toString():

location.toString()
// или
location+''

А знаете ли вы, что можно так же отправить запрос с параметрами используя location.search ?

location.search = 'a=1&b=2'

И тут точно такой же механизм, страница перезагрузится на текущем URL + добавятся параметры. Удобно, когда нужно отправить на текущий URI данные.

А вы знаете, что все тоже самое можно проделать и с путями?

location.pathname = '/foo/bar'

// вместо
window.location.href = '/foo/bar'

если вам нужно сделать внутренний редирект? Таким образом можно защищаться от разного рода XSS, если у вас пользовательский ввод, так как нельзя просунуть ничего кроме пути:

location.pathname = 'https://google.com'

отредиректит на текущий URL + pathname:

https://medium.com/https://google.com

Такие вот дела.

Ну и в тему, еще вопрос с собеседования, который можно было встретить раньше (может быть где-то и сейчас, почему бы и нет): как распарсить URL ?

Ответы можно дать разные, от регулярок до более чего-то сложного. Но если вы работаете в контексте браузера, то самый простой способ (был) это:

function urlParse(url) {
var location = document.createElement('a');
  location.href = url;
return location
}

console.dir( urlParse('https://geekjob.ru').hostname )

Этот ответ был актуальным до тех пор, пока в браузерах не появилось API:

const location = new URL('https://vacancy.new.hr')

Все современные браузеры поддерживают этот класс и он есть даже в Node.js в глобальной области.

Распарсить query params

В location есть такое поле (мы говорили выше) — search. Оно содержит параметры запроса. Как его распарсить? Раньше приходилось решать эту задачку, а сегодня для этих целей есть API: URLSearchParams :

const query = new URLSearchParams( location.search )

Подробности на MDN.

Такая вот интересная годнота. Вроде многое знакомо и пользуемся чуть ли не каждый день, но всегда есть нюансы, на которые можем просто не обращать внимание.

Лайк, хлопок, шер. Подписывайтесь на Телеграм канал. Следить за обновлениями и прочими материалами от меня можно именно там: @prowebit . В этом канале публикую различные новости и мысли, которых может не быть в этом блоге. Подписывайтесь!

𝔾𝕖𝕖𝕜 🄹🄾🄱 — анонимный поиск работы без палева где можно найти новую работу без проблем на текущем месте. Только для IT, никакого “левого” стафа. Только релевантные предложения. Скоро будет мега апдейт ;)

New.HR — место где помогают найти работу мечты. Работаем только с отборными вакансиями в сфере IT & Digital. Помогаем кандидатам найти работу по душе. Работаем с кандидатами, которые не ищут работу!