JavaScript로 URL 매개 변수를 얻는 방법

URL 매개 변수 (쿼리 문자열 매개 변수 또는 URL 변수라고도 함)는 URL을 통해 클라이언트와 서버간에 페이지와 서버간에 소량의 데이터를 보내는 데 사용됩니다. 검색 쿼리, 링크 권장 사항, 제품 정보, 사용자 선호도 등과 같은 다양한 유용한 정보를 포함 할 수 있습니다.

이 기사에서는 JavaScript를 사용하여 URL 매개 변수를 구문 분석하고 조작하는 방법을 보여줍니다.

키 포인트

URL 매개 변수 또는 쿼리 문자열 매개 변수는 URL을 통해 페이지 또는 고객과 서버간에 소량의 데이터를 보내는 데 사용되며 검색 쿼리, 링크 권장 사항, 제품 정보, 사용자 기본 설정 등과 같은 유용한 정보를 포함 할 수 있습니다. 최신 브라우저의 URLSearchParams 인터페이스는 다음을 포함하여 URL 매개 변수를 쉽게 파싱하고 조작 할 수 있습니다. 특정 매개 변수와 관련된 모든 값을 반환하는 데 사용됩니다. 이전 브라우저의 경우 PolyFill을 사용할 수 있거나 개발자는 URL의 쿼리 문자열을 수신하고 데이터를 객체 형식으로 리턴하는 자체 쿼리 문자열 구문 분석 기능을 만들 수 있습니다.

URL 매개 변수 형식은 명확하게 정의되지 않았으며 다를 수 있으며 개발자는 특정 사용 사례에 따라 코드를 테스트하고 조정해야합니다. URL을보다 복잡하게 조작 해야하는 경우 Query-String 및 Uri.js와 같은 특정 라이브러리를 사용할 수 있습니다.

• get url 매개 변수
URLSearchParams 인터페이스 덕분에 현대식 브라우저에서는 훨씬 쉬워졌습니다. URL의 쿼리 문자열을 처리하기위한 일련의 유틸리티 방법을 정의합니다.
• URL이 get()라고 가정하고 has()를 사용할 수 있습니다. 쿼리 문자열을 얻을 수 있습니다. getAll() 그런 다음 urlsearchparams를 사용하여 쿼리 문자열의 매개 변수를 구문 분석 할 수 있습니다.
그런 다음 결과에 대한 메소드를 호출 할 수 있습니다.
• 예를 들어,
는 주어진 검색 매개 변수와 관련된 첫 번째 값을 반환합니다.
• 기타 유용한 방법
매개 변수가 존재하는지 확인하십시오

를 사용하여 특정 매개 변수가 존재하는지 확인할 수 있습니다.

매개 변수의 모든 값을 얻으십시오 를 사용하여 특정 매개 변수와 관련된 모든 값을 반환 할 수 있습니다. 반복 매개 변수 urlsearchparams는 또한 일반적으로 사용되는 객체 반복 메소드를 제공하여 키, 값 및 항목을 반복 할 수 있습니다.

브라우저 지원

urlsearchparams에 대한 브라우저 지원이 좋습니다. 글을 쓰는 시점에서는 모든 주요 브라우저에서 지원됩니다.

https://example.com/?product=shirt&color=blue&newuser&size=m Internet Explorer와 같은 이전 브라우저를 지원 해야하는 경우 Polyfill을 사용할 수 있습니다. ,이 튜토리얼의 나머지 부분을 계속 읽고 직접 작성하는 방법을 배울 수 있습니다. 자신의 쿼리 문자열 구문 분석 이전 섹션에서 사용 된 URL을 계속 사용하겠습니다.

이것은 모든 URL 매개 변수를 간결한 개체로 제공하는 함수입니다.

당신은 그것이 어떻게 어떻게 작동하는지 볼 수 있지만, 먼저 몇 가지 사용 예제가 있습니다. (Codepen 데모 부분은 CodePen 코드를 직접 포함시킬 수 없기 때문에 여기에서 생략됩니다) 이 함수를 사용하기 전에 알아야 할 것들

우리의 함수는 w3c 사양에 표시된 것처럼 매개 변수가

문자로 분리된다고 가정합니다. 그러나 URL 매개 변수 형식은 일반적으로 잘 정의되지 않으므로 때때로 또는

<code class="language-javascript">const queryString = window.location.search;
console.log(queryString);
// ?product=shirt&color=blue&newuser&size=m</code>

를 구분 제로 볼 수 있습니다.

매개 변수에 동일한 부호가 없거나 동일한 부호가 있지만 값이없는 경우 기능은 여전히 ​​유효합니다.

반복 매개 변수의 값은 배열에 배치됩니다.

<code class="language-javascript">const urlParams = new URLSearchParams(queryString);</code>

코드에 넣을 수있는 함수 만 필요하면 지금 완료되었습니다. 기능의 작동 방식을 이해하려면 계속 읽으십시오.

다음 섹션에서는 함수, 객체 및 배열을 포함한 일부 JavaScript를 이해한다고 가정합니다. 리뷰가 필요한 경우 MDN JavaScript 참조를 확인하십시오.

<code class="language-javascript">const product = urlParams.get('product');
console.log(product);
// shirt

const color = urlParams.get('color');
console.log(color);
// blue

const newUser = urlParams.get('newuser');
console.log(newUser);
// 空字符串</code>

기능은 어떻게 작동합니까

일반적 으로이 함수는 URL의 쿼리 문자열 (물음표 이후 파운드 마크 이전)을 취하고 간결한 개체 양식으로 데이터를 출력합니다.

우선,이 코드 줄은 URL을 지정하면 물음표 뒤에 모든 것을 얻는다는 것을 의미합니다. 그렇지 않으면 창의 URL을 사용합니다. 다음으로, 우리는 매개 변수를 저장할 객체를 만들 것입니다 : . 쿼리 문자열이 있으면 구문 분석을 시작합니다. 먼저 쿼리 문자열의 일부가 아니기 때문에 로 시작하는 부분을 제거해야합니다.

이제 쿼리 문자열을 구성 요소로 분할 할 수 있습니다.

이것은 다음과 같이 배열을 제공합니다 :
• 다음은이 배열을 반복하고 각 항목을 키와 값으로 나눕니다. & 키와 값을 단일 변수에 할당하겠습니다. 매개 변수 값이 없으면 매개 변수 이름이 존재 함을 나타 내기 위해 ;로 설정합니다. 유스 케이스에 따라 원하는 대로이 설정을 변경할 수 있습니다. & 선택적으로, 모든 매개 변수 이름과 값을 소문자로 설정할 수 있습니다. 이런 식으로, 누군가가 대신
와 같은 URL로 트래픽을 보내고 스크립트가 나오는 상황을 피할 수 있습니다. (이런 일이 발생하는 것을 보았습니다.) 그러나 쿼리 문자열이 케이스에 민감해야한다면이 부분을 마음대로 생략 할 수 있습니다.

<code class="language-javascript">const queryString = window.location.search;
console.log(queryString);
// ?product=shirt&color=blue&newuser&size=m</code>

다음으로, 우리는

에서받을 수있는 다양한 유형의 입력을 처리해야합니다. 이것은 인덱스 배열, 비 인덱스 어레이 또는 일반 문자열 일 수 있습니다. paramName 인덱스 배열 인 경우 해당

가 배열이되어 값을 올바른 위치에 삽입하려고합니다. 비 인덱스 배열 인 경우 해당

가 배열이되어 요소를 밀어 넣기를 원합니다. 문자열 인 경우 속성이 이미 존재하지 않는 한 객체에 일반 속성을 생성하고 paramValue를 할당하려고합니다. 전달 된 를 해당 배열로 밀어 넣으십시오. paramValue 이것을 설명하기 위해, 여기에 몇 가지 예 입력과 우리가 기대하는 출력이 있습니다. paramValue 이것은이 기능을 구현하는 코드입니다 : <em> <return> 마지막으로, 우리는 매개 변수와 값이 포함 된 객체를 반환합니다. </return></em> <l> URL이 공백 (로 인코딩)과 같은 인코딩 된 특수 문자가있는 경우 아래 그림과 같이 원래 값을 얻도록 해독 할 수도 있습니다. <code>paramValue 디코딩 된 것을 해독하지 않거나 스크립트가 잘못 될 수 있도록주의하십시오. 특히 백분율이 관련된 경우 스크립트가 잘못됩니다. paramValue 어쨌든 축하합니다! 이제 URL 매개 변수를 얻는 방법을 알고 있으며 그 과정에서 다른 팁을 배우기를 희망합니다.

결론
이 기사의 코드는 URL 쿼리 매개 변수를 얻는 대부분의 일반적인 사용 사례에 적합합니다. 드문 분리기 또는 특수 형식과 같은 에지 케이스를 처리하는 경우 그에 따라 테스트하고 조정해야합니다.

<code class="language-javascript">const urlParams = new URLSearchParams(queryString);</code>

URL로 더 많은 작업을 수행하려면 Query-String 및 Medialize URI.JS와 같은 특정 라이브러리를 사용할 수 있습니다. 그러나 기본적으로 문자열 작동이므로 일반적으로 순수한 JavaScript를 사용하는 것이 더 합리적입니다. 자신의 코드를 사용하든 라이브러리를 사용하든 모든 것을 확인하고 사용 케이스에 효과가 있는지 확인하십시오.

문자열을 사용하는 것을 좋아한다면 문자열 분할에 대한 기사를 확인하고 문자열을 숫자로 변환하며 숫자를 문자열과 서수로 변환하십시오. 보다 심층적 인 JavaScript 지식을 보려면 "JavaScript : Newbie에서 Ninja, Second Edition"을 읽으십시오.

<code class="language-javascript">const product = urlParams.get('product');
console.log(product);
// shirt

const color = urlParams.get('color');
console.log(color);
// blue

const newUser = urlParams.get('newuser');
console.log(newUser);
// 空字符串</code>

(텍스트에서 내용이 고도로 복제되어 있기 때문에 FAQ 부품이 여기에서 생략됩니다)

위 내용은 JavaScript로 URL 매개 변수를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!