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.

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

Источник https://medium.com/@frontman/js-%D0%B7%D0%B0%D1%80%D0%B8%D1%81%D0%BE%D0%BA%D0%B2%D0%B8-%D0%BD%D0%B0-%D1%82%D0%B5%D0%BC%D1%83-url-b8d99c501cf2