Сегодня — по горячим следам — хочу разобрать одну проблему, на которую я уже натыкалась как минимум пару раз 😅 Причём код изначально писала не я даже — ко мне просто приходили и говорили: "ничего не работает!"
Думаю, многие из вас знакомы с объектом
URL. Подробнее можно почитать здесь:https://developer.mozilla.org/ru/docs/Web/API/URL/URL
Сигнатура конструктора:
new URL(url, [base])❗️И вот тут важно быть внимательным — особенно к тому, есть ли слэш `/` в конце base или нет.
Но не только это!
Сравните:
new URL('/clients', 'https://hostname/base').toString();
// 👉 https://hostname/clients (куда делся base?)
new URL('clients', 'https://hostname/base').toString();
// 👉 https://hostname/clients (тоже самое)
new URL('/clients', 'https://hostname/base/').toString();
// 👉 https://hostname/clients (и тут его нету)Но! Если написать вот так:
new URL('clients', 'https://hostname/base/').toString();
// 👉 https://hostname/base/clients ✅📌 Почему так происходит?
Поведение зависит сразу от двух вещей:
1. Заканчивается ли
base на /2. Начинается ли
url с /Если
url начинается с /, он считается абсолютным путём от корня хоста, и весь путь из base будет проигнорирован — даже если base заканчивается слэшем.Поэтому:
*
'**/clients**' → абсолютный путь, затирает всё из base кроме хоста*
'**clients**' → относительный путь, добавляется к base если путь в base заканчивается со / ---
🧠 Вывод:
* Один
/ в начале или конце может полностью изменить итоговую ссылку!---
📚 Подробнее о том, какие есть свойства у объекта
URL, можно почитать здесь:https://htmlacademy.ru/blog/js/url