Нам, как интерфейсному разработчику, часто приходится работать и обрабатывать URL-адреса. Наиболее распространенным из них является получение значений параметров, содержащихся в URL-ссылке. Друзья, которые используют разработку фреймворка, могут найти это очень простым, поскольку фреймворк предоставляет нам множество методов для удобного получения параметров, передаваемых по URL-ссылке. Но иногда мы не можем полагаться на фреймворк и для получения параметров приходится использовать нативный JS. Этот вопрос тоже часто встречается на собеседованиях. Сегодня мы вручную разберем код и воспользуемся собственным JS, чтобы получить значения параметров URL-ссылки.
. Существует несколько способов получения параметров URL-ссылок с использованием собственного JS. Сегодня мы по очереди объясним наиболее распространенные из них:
использование обычного сопоставления,
использование встроенного метода тега,
использование метода разделения,
использование URLSearchParams. метод
Это очень стандартный метод. Ключевым моментом является то, что нам необходимо понимать регулярные выражения.
Код следующий:
<скрипт>
//Используйте регулярное выражение let url = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
// // Возвращаем объект-параметр function queryURLParams(url) {
let шаблон = /(w+)=(w+)/ig; //Определение регулярного выражения let parames = {} //Определение объекта параметра url.replace(pattern, ($, $1, $2) => {
параметры[$1] = $2;
});
возвращаемые параметры;
}
console.log(queryURLParams(url))
</script> Целью приведенного выше кода является определение регулярных выражений и использование метода замены, среди которых
1 и $2 соответственно обозначают имя=слон, имя, слон и т. д. Вы можете изучить это самостоятельно для более детального использования replace в сочетании с регулярными выражениями.
Эффект реализации:
используется людьми редко, так как все-таки имеет некий черный технологический смысл. Его принцип заключается в основном в использовании тега a для получения некоторых встроенных атрибутов, таких как href, hash, search и других атрибутов.
Код следующий:
<скрипт>
let URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100#smallpig"
функция queryURLParams(url) {
// 1. Создаем тег let link = document.createElement('a');
ссылка.href = URL;
let searchUrl = link.search.substr(1); // Получаем строку после вопросительного знака let hashUrl = link.hash.substr(1 // Получаем значение после # let obj = {}; object/ / 2. Сохраните hashUrl в объекте? obj['HASH'] = hashUrl : null // #Есть ли значение let list = searchUrl.split("&");
for (пусть я = 0; я <list.length; я++) {
let arr = list[i].split("=");
obj[arr[0]] = arr[1];
}
вернуть объект;
}
console.log(queryURLParams(URL))
</script> В приведенном выше коде сначала создается тег a, а затем каждая часть URL-адреса может быть получена на основе атрибутов тега a. Это на самом деле чем-то похоже на переход маршрутизации Vue для получения параметров.
Эффект реализации:
Этот метод использует тот факт, что разделение может разделить строку на массив на основе определенного символа и умело разделить каждый параметр.
Код следующий:
<скрипт>
пусть URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
функция queryURLParams(URL) {
// const url = location.search; // В проекте вы можете напрямую получить строку после символа "?" в URL-адресе с помощью метода поиска let url = URL.split("?")[1];
let obj = {}; // Объявляем объект параметра let arr = url.split("&"); // Разделяем на массив с амперсандом for (let i = 0; i < arr.length; i++) {
let arrNew = arr[i].split("="); // Разделение на массивы с помощью "=" obj[arrNew[0]] = arrNew[1];
}
вернуть объект;
}
console.log(queryURLParams(URL))
</script> Если код загрузки используется в реальном проекте, вы можете напрямую использовать location.search для получения строки после «?». Для удобства демонстрации для разделения используется разделение.
Эффект реализации:
Метод URLSearchParams позволяет нам очень удобно получать параметры URL, но есть определенные проблемы совместимости. Официальный сайт объясняет это следующим образом:
Интерфейс URLSearchParams определяет некоторые практические методы для обработки строк запроса URL.
Этот интерфейс предоставляет нам специальные методы для обработки параметров URL. Здесь мы только рассказываем, как получить значения параметров URL. Для более подробного использования вы можете обратиться к официальному сайту.
Код следующий:
<скрипт>
пусть URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
функция queryURLParams(URL) {
пусть url = URL.split("?")[1];
const urlSearchParams = новый URLSearchParams (url);
const params = Object.fromEntries(urlSearchParams.entries());
возвращаемые параметры
}
console.log(queryURLParams(URL))
</script> Здесь мы в основном используем только две строки основного кода для реализации анализа параметров. Следует отметить, что urlSearchParams.entries() возвращает итератор протокола итерации, поэтому нам нужно использовать метод Object.fromEntries() для преобразования списка пар ключ-значение в объект.
Что касается протокола итерации, вы можете обратиться к официальному сайту:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols
для достижения эффекта:
совместимость:
Вы можете видеть, что наш интерфейс несовместим с IE, источником всего зла.
Здесь представлены четыре метода для реализации анализа значений параметров URL-ссылок. Среди них наиболее широко используемым является метод разделения. urlSearchParams постепенно становится восходящей звездой, и существует множество способов сделать его совместимым с IE.
[Рекомендуемые соответствующие видеоуроки: веб-интерфейс]
Выше описано, как получить параметры URL-адреса в JavaScript? Для получения подробных объяснений четырех распространенных методов обратитесь к другим статьям по теме на китайском веб-сайте PHP для получения дополнительной информации!
