프론트엔드 개발자로서 우리는 URL을 조작하고 처리해야 하는 경우가 많습니다. 가장 일반적인 것은 URL 링크에 전달되는 매개변수 값을 얻는 것입니다. 프레임워크 개발을 사용하는 친구는 이것이 매우 간단하다고 생각할 수 있습니다. 왜냐하면 프레임워크는 URL 링크에 의해 전달되는 매개변수를 편리하게 얻을 수 있는 많은 방법을 제공하기 때문입니다. 하지만 때로는 프레임워크에 의존할 수 없고 매개변수를 얻기 위해 네이티브 JS를 사용해야 하는 경우도 있습니다. 이는 인터뷰에서 자주 접하는 질문이기도 합니다. 오늘 우리는 코드를 직접 분해하고 기본 JS를 사용하여 URL 링크 매개변수 값을 얻을 것입니다.
일반 매칭 사용,
태그 내장 방법 사용,
분할 방법 사용,
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는 각각 이름=코끼리, 이름, 코끼리 등을 나타냅니다. 정규식과 결합된 대체의 자세한 사용법을 직접 학습할 수 있습니다.
실현 효과:
사람들이 거의 사용하지 않는데, 이는 결국 약간의 암울한 기술 의미를 갖기 때문입니다. 그 원칙은 주로 a 태그를 사용하여 href, 해시, 검색 및 기타 속성과 같은 일부 내장 속성을 얻는 것입니다.
코드는 다음과 같습니다.
<스크립트>
URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100#smallpig"로 설정하세요.
함수 queryURLParams(url) {
// 1. 태그 생성 let link = document.createElement('a');
link.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 (let i = 0; i < list.length; i++) {
let arr = list[i].split("=");
obj[arr[0]] = arr[1];
}
반환 객체;
}
console.log(queryURLParams(URL))
</script> 위의 코드에서는 먼저 a 태그가 생성된 다음 a 태그의 속성을 기반으로 URL의 각 부분을 얻을 수 있습니다. 이는 실제로 매개변수를 얻기 위한 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와 호환되게 만드는 방법은 많습니다.
[추천 관련 동영상 튜토리얼: 웹 프론트엔드]
위 내용은 JavaScript에서 URL 매개변수를 얻는 방법입니다. 4가지 일반적인 방법에 대한 자세한 설명은 PHP 중국어 웹사이트의 다른 관련 기사를 참고하세요!
