JavaScript에서 쿼리 문자열 값을 얻는 방법

Javascripteseo Kwoli Munjayeol Gabs Eul Eodneun Bangbeob



URL의 쿼리 문자열 값은 검색 매개변수와 같은 요청에 대한 정보를 자주 제공합니다. 쿼리 문자열을 사용하여 HTTP 프로토콜을 사용하는 웹 페이지를 요청할 수 있습니다. 때때로 스크립트에서 쿼리 문자열 속성을 가져와야 할 수도 있습니다. 또한 프런트 엔드에서 비즈니스 또는 요청 논리를 처리하는 경우 URL에서 쿼리 문자열 데이터를 추출하는 방법을 알아야 합니다.

이 블로그에서는 JavaScript에서 쿼리 문자열 값을 가져오는 절차를 정의합니다.

JavaScript에서 쿼리 문자열 값을 얻는 방법?

JavaScript에서 쿼리 문자열 값을 가져오려면 다음 메서드를 사용합니다.







방법 1: URL API와 get() 메서드를 사용하여 쿼리 문자열 값 가져오기

사용 ' URL API ' 이랑 ' 가져 오기() ” 메서드를 사용하여 JavaScript에서 쿼리 문자열 값을 가져옵니다. URL(Uniform Resource Locator)은 특정 인터넷 리소스를 찾는 방법입니다. 일반적으로 프로토콜(예: ' http ' 또는 ' https '), 도메인 이름(예: ' example.com ') 및 경로(예: ' /path/to/resource '). URL은 웹 페이지에 액세스하고, 파일을 다운로드하고, 인터넷의 쿼리 문자열 값을 비롯한 기타 리소스에 액세스하는 데 사용됩니다.




쿼리 문자열과 함께 URL을 저장하는 변수를 만듭니다.



~였다 urlQueryString = 'https://www.example.com/page.html?keyword=SearchText &fullname=jennyConvey &click=Submit' ;

'를 전달하여 URL 개체를 호출합니다. urlQueryString ”:

~였다 쿼리스트링 = 새로운 URL ( urlQueryString ) ;

키 '를 전달하여 get() 메서드를 사용합니다. 예어 ”를 검색하여 searchParams 속성으로 값을 가져옵니다. JavaScript에서 URL 개체의 searchParams 속성은 URL의 쿼리 문자열을 나타냅니다. URL의 쿼리 문자열을 문자열이 아닌 개체로 조작하는 방법을 제공합니다.

~였다 가치 1 = queryString. searchParams . 가져 오기 ( '예어' ) ;
콘솔. 통나무 ( '키워드 값: ' + 가치 1 ) ;

키를 get() 메서드에 전달하여 쿼리 문자열에서 두 번째 값을 가져오고 콘솔에 출력합니다.

~였다 값2 = queryString. searchParams . 가져 오기 ( '이름' ) ;
콘솔. 통나무 ( '전체 이름 값: ' + 값2 ) ;

마찬가지로 문자열에서 세 번째 값을 가져옵니다.

~였다 값3 = queryString. searchParams . 가져 오기 ( '딸깍 하는 소리' ) ;
콘솔. 통나무 ( '클릭의 가치: ' + 값3 ) ;

쿼리 문자열의 값이 성공적으로 검색된 것을 볼 수 있습니다.

방법 2: get() 메서드와 함께 URLSearchParams를 사용하여 쿼리 문자열 값 가져오기

URL검색 매개변수 ” 인터페이스는 JavaScript에서 쿼리 문자열에서 값을 검색하는 데 사용할 수 있습니다. URL의 쿼리 문자열을 평가하고 값에 액세스할 수 있는 매체를 제공합니다. URL의 쿼리 문자열 부분만 보내야 하며 ' 창.위치.검색 ”를 URLSearchParams()의 매개변수로 사용합니다.


쿼리 문자열을 저장하는 변수를 만듭니다.

~였다 urlQueryString = 'keyword=SearchText &fullname=jennyConvey &click=제출' ;

문자열을 ' URL검색 매개변수 ' 상호 작용:

~였다 쿼리스트링 = 새로운 URL검색 매개변수 ( urlQueryString ) ;

' 키의 값을 가져옵니다. 성명 '를 사용하여 쿼리 문자열에서 가져 오기() ' 방법:

~였다 가치 1 = queryString. 가져 오기 ( '이름' ) ;
콘솔. 통나무 ( '전체 이름 값: ' + 가치 1 ) ;

산출

메모 : 사용 ' const queryString = 새 URLSearchParams(window.location.search) ” 라이브/현재 URL을 가져옵니다.

현재 URL을 가져온 후 여기에서 쿼리 문자열을 가져오고 URLSearchParams의 인스턴스를 만들고 쿼리 문자열을 전달합니다. 마지막으로 get() 메서드를 사용하여 쿼리 문자열에서 특정 매개 변수의 값을 가져옵니다.

방법 2: values() 메서드와 함께 URLSearchParams를 사용하여 쿼리 문자열 값 가져오기

'를 사용할 수도 있습니다. 값() ” 메서드를 URLSearchParams 인터페이스와 함께 사용하여 쿼리 문자열의 값을 검색합니다. 문자열의 모든 값에 한 번에 액세스하는 데 도움이 됩니다.


쿼리 문자열을 URLSearchParams 인터페이스에 전달하고 ' 쿼리스트링 ”:

~였다 쿼리스트링 = 새로운 URL검색 매개변수 ( urlQueryString ) ;

'에서 values() 메서드를 호출합니다. ~을 위한 ” 루프를 사용하여 쿼리 문자열의 모든 값을 가져옵니다.

~을 위한 ( const queryString 값. ( ) ) {
콘솔. 통나무 ( ) ;
}

모든 문자열 값이 가져온 것을 볼 수 있습니다.

JavaScript에서 쿼리 문자열 값을 가져오는 것이 전부입니다.

결론

쿼리 문자열 값을 가져오려면 ' URL API ' 이랑 ' 가져 오기() ” 방법과 “ searchParam ' 기인하다. JavaScript에서 URL 개체의 searchParams 속성은 URL의 쿼리 문자열을 나타냅니다. '를 사용할 수도 있습니다. URL검색 매개변수 ”와 인터페이스 가져 오기() ” 방법 또는 “ 값() ' 방법. 이 블로그에서는 JavaScript에서 쿼리 문자열 값을 가져오는 절차를 설명했습니다.