JS URL () 및 URLSearchParams () API 인터페이스 상세 소개

첫째,이 두 API가 사용되는 이유를 빠르게 이해합니다.

과거에는 주소 표시 줄의 URL 주소를 분석하고 처리해야했고 문자열을 직접 분석해야했습니다. 예를 들면 다음과 같습니다.

https://www.zhangxinxu.com/wordpress/?s=url

s매개 변수 뒤에 있는 값 이 무엇인지 알고 싶다면 문자 잘라 내기 및 일치 또는 정기적 인 일치를 수행해야하는 경우가 많습니다.

실제로 브라우저에는 이제 URL을 처리하기위한 기본 제공 API 인터페이스가 있으며이 API URLSearchParams()도 URL().

예를 들어 얻은 s쿼리 매개 변수 값은 다음과 같이 직접 될 수 있습니다.

새 URL ( 'https://www.zhangxinxu.com/wordpress/?s=url') .searchParams.get ( 's');

또는:

new URLSearchParams ( '? s = url'). get ( 's');

둘째, 먼저 URLSearchParams ()의 구문을 이해합시다.

문법

// URL 쿼리 문자열 
var myUrlSearchParams = new URLSearchParams (strSearchParams); 
// 쿼리 문자 시퀀스 
var myUrlSearchParams = new URLSearchParams (arrSearchSequence); 
// 쿼리 키 값 객체 
var myUrlSearchParams = new URLSearchParams (objSearchKeyValue);

매개 변수

strSearchParams

URL 쿼리 문자열입니다. 사용법 힌트 :

var params1 = new URLSearchParams ( '? s = url');

또는 현재 주소 표시 줄 주소의 쿼리 문자열을 인스턴스화합니다.

var params2 = new URLSearchParams (location.search);

arrSearchSequence

배열 형식의 쿼리 문자 시퀀스입니다. 예 :

var params3 = new URLSearchParams ([[ 's', 'url'], [ 'someId', 1]]);

objSearchKeyValue

키-값 쌍 형식의 쿼리 개체입니다. 예 :

var params4 = new URLSearchParams ({ "s": "url", "someId": 2})

세 가지, URLSearchParams 인스턴스 메서드

위 실행 new URLSearchParams()의 반환 값 myUrlSearchParams은 URLSearchParams의 인스턴스입니다.

이 URLSearchParams 인스턴스에는 다음과 같은 많은 메서드가 포함되어 있습니다.

URLSearchParams.append (이름, 키)

새 키-값 쌍을 쿼리 매개 변수로 추가합니다. 예 :

var params = new URLSearchParams ( '? s = url'); // 물음표없이 직접 할 수도 있습니다. 's = url ' 
params.append ('from ','zxx '); 
// 이때 쿼리 문자열은 다음과 같습니다. 의 = url & from = zxx '

URLSearchParams.delete (이름)

기존 쿼리 매개 변수를 삭제합니다. 예 :

var params = new URLSearchParams ( '? s = url'); 
params.delete ( 's'); 
// 현재 쿼리 문자열은 다음과 같습니다.

URLSearchParams.entries ()

쿼리 매개 변수의 반복기 객체를 반환합니다. 모든 키-값 쌍을 얻기 위해 반복기 객체를 반복 할 수 있습니다. 예를 들어 for..of 사용하십시오 .

var searchParams = new URLSearchParams ( "s = url & from = zxx"); 
// 모든 키-값 쌍 표시 
(var pair of searchParams.entries ()) { 
   console.log (pair [0] + ','+ pair [ 1]); 
}

콘솔 입력 결과는 다음을 표시합니다.

URLSearchParams.forEach (콜백)

이 메서드는 쿼리 개체를 순회 할 수 있습니다.

그중에 callback는 각 키-값 쌍의 값과 키라는 두 개의 매개 변수를 지원하는 순회 방법이 있습니다. 신호:

var searchParams = new URLSearchParams ( "s = url & from = zxx"); 
// 출력 값 및 키 콘텐츠 
searchParams.forEach (function (value, key) { 
  console.log (value, key); 
});

URLSearchParams.get (이름)

지정된 키워드 개체의 값을 반환합니다. 예 :

var params = new URLSearchParams ( 's = url & from = zxx'); 
params.get ( 's'); 
// 반환 값 : 'url'

해당 값이 없으면을 반환 null합니다.

URLSearchParams.getAll (이름)

현재 모든 쿼리 키워드에 해당하는 값을 배열 형식으로 반환합니다. 예를 들면 다음과 같습니다.

var params = new URLSearchParams ( 's = url & s = urlsearchparams & from = zxx'); 
params.getAll ( 's'); 
// 返回 值 是 ： [ 'url', 'urlsearchparams']

URLSearchParams.has (이름)

부울 값 true또는 false쿼리 키워드 포함 여부를 반환합니다 .

var params = new URLSearchParams ( '? s = url'); 
params.has ( 's') == true; // 진실

URLSearchParams.keys ()

개체의 모든 키워드를 반복 할 수있는 반복기 개체를 반환합니다. 사용법 힌트 :

var searchParams = new URLSearchParams ( "s = url & from = zxx"); 
// 
(var key of searchParams.keys ()) { 
   console.log (key); 
}에 대한 모든 키 표시

URLSearchParams.values ​​()

객체의 모든 키 값을 반복 할 수있는 반복기 객체를 반환합니다. 사용법 힌트 :

var searchParams = new URLSearchParams ( "s = url & from = zxx"); 
// 
(var value of searchParams.values ​​()) { 
   console.log (value); 
}에 대한 모든 값 표시

URLSearchParams.set (이름, 값)

있는 경우 교체하고 그렇지 않은 경우 크라운을 교체하십시오. 예 :

var params = new URLSearchParams ( 's = url & s = urlsearchparams & from = zxx'); 
params.set ( 's', 'css 世界'); 
params.getAll ( 's'); // 반환 값 : [ 'css世界 ']

이전의 모든 's'쿼리 매개 변수 값 이 대체되는 것을 볼 수 있습니다 . 다음 예는 "아무것도 크라운이 없습니다"를 보여줍니다.

var params = new URLSearchParams ( 's = url'); 
params.set ( 'from', 'zxx'); 
params.toString (); // 结果 是 ： 's = url & from = zxx'

즉, 해당 매개 변수가 없을 때이 매개 변수가 추가됩니다.

URLSearchParams.sort ()

이 메서드는이 객체에 포함 된 모든 키 / 값 쌍을 제자리에 정렬하고을 반환합니다 undefined. 정렬 순서는 키의 유니 코드 코드 포인트를 기반으로합니다. 이 방법은 안정적인 정렬 알고리즘을 사용합니다 (즉, 동일한 키를 가진 키 / 값 쌍 간의 상대적 순서가 유지됨). 예 :

var searchParams = new URLSearchParams ( 'c = 4 & a = 2 & b = 3 & a = 1'); 
// 키-값 쌍 sort 
searchParams.sort (); 
// 정렬 된 쿼리 문자열 표시 
console.log (searchParams.toString ()); // 결과 : a = 2 & a = 1 & b = 3 & c = 4

URLSearchParams.toString ()

URLSearchParams 객체를 쿼리 문자열로 변환합니다. 이 코드는 위의 내용이 여러 번 나타나며 여기서 반복되지 않음을 나타냅니다.

URLSearchParams () 호환성

Edge17 + 지원.

넷째, URL () 구문에 대해 알아 보겠습니다.

URL 인터페이스는 URL을 구문 분석, 구성, 정규화 및 인코딩하는 데 사용됩니다. 생성 된 인스턴스는 URL 관련 속성 값을 읽고 쓰는 데 사용할 수있는 여러 속성 및 메서드를 지원합니다. URL의 일부로 파일 내용을 표시 할 수도 있습니다.

를 사용하기 전에 URL()브라우저가 지원하는지 여부를 판단하는 것이 좋습니다. 예를 들면 다음과 같습니다.

if (window.URL) { 
    // ... 
}

또한 URL 인터페이스는 웹 작업자에서의 사용을 지원합니다.

문법

var myUrl = 새 URL (url, [base])

매개 변수

URL

상대 주소 또는 절대 주소. 상대 주소 인 경우 base매개 변수 를 설정해야 하며 절대 주소 인 경우 base설정 이 무시 됩니다. URL 객체를 url 매개 변수로 사용할 수도 있습니다. 현재 유효한 href값 은 URL 개체의 속성 값 입니다 .

베이스

URL 주소가 상대 주소 인 경우 상대 계산을위한 기본 주소 역할을하는이 매개 변수가 필요합니다. URL 객체를 기본 매개 변수로 사용할 수도 있으며, 이때 값은 URL 객체의 href속성 값 입니다 . 이 매개 변수를 설정하지 않으면 빈 문자열 ''로 처리 됩니다 .

매개 변수 값을 완전한 URL 주소로 결합 할 수없는 경우 TypeError 오류가보고됩니다.

테스트 및 사용 표시

기본 사용법 표시 :

var base = ' 
https://www.zhangxinxu.com '; // 결과 : https://www.zhangxinxu.com/study 
console.log (new URL ( 'study', base) .href); 
/ / 결과 : https://www.zhangxinxu.com/study 
console.log (new URL ( '/ study', base) .href);

URL 객체를 매개 변수로 직접 사용할 수 있습니다.

var base = 'https : 
//www.zhangxinxu.com '; var urlFromBase = new URL ( 'study', base); 
// 결과 : https://www.zhangxinxu.com/study 
console.log (new URL (urlFromBase) .href); 
// 결과 : https://www.zhangxinxu.com/wordpress 
console.log (new URL ( 'wordpress', urlFromBase) .href);

다음은 더 깊은 기본 주소와 다른 상대 주소 형식을 사용한 테스트입니다.

var base = ' 
https://www.zhangxinxu.com/study/a/b/c '; // 결과 : https://www.zhangxinxu.com/study/a/b/sp/icon 
console. log (new URL ( 'sp / icon', base) .href); 
// 결과는 다음과 같습니다 : https://www.zhangxinxu.com/study/a/b/sp/icon 
// 상위 및 낮은 결과는 ./ 및 과도한 노출 상대 주소에 차이가 없음을 보여줍니다. 
console.log (new URL ( './ sp / icon', base) .href); 
// 결과 : https : //www.zhangxinxu. com / study / a / sp / icon 
// 위로 URL 수준 깊이의 한 수준 
console.log (new URL ( '../ sp / icon', base) .href); 
// 결과 : https : // www.zhangxinxu.com/study/a/b/sp/ icon 
// 레벨은 슬래시에 따라 계산됩니다. 
console.log (new URL ( '../ sp / icon', base + '/'). href) ; 
// 결과는 다음과 같습니다 : https://www.zhangxinxu.com / sp / icon 
// 슬래시의 시작은 주소가 
console.log (new URL ( '/ sp / icon', base) 와 일치하기 시작 함을 나타냅니다. .href);

Seeing is believing, 다음은 콘솔 출력입니다.

다음은 서로 다른 도메인 이름 간의 테스트입니다.

var base = 'https 
: //www.zhangxinxu.com '; // 결과 : http://image.zhangxinxu.com 및 https://image.zhangxinxu.com 
// 동의하지 않은 URL은 상대 주소로 간주됩니다. 프로토콜은 기본 주소 
console.log (new URL ( '//image.zhangxinxu.com','http://www.zhangxinxu.com') .href); 
console.log (new URL ( '/ )에서 가져옵니다. / image. zhangxinxu.com ',' 
https: //www.zhangxinxu.com ') .href); // 결과는 
다음과 같습니다 : https://image.zhangxinxu.com // 여기에 url은 완전한 절대 주소이므로 다음 기본 매개 변수를 무시하십시오. 
console.log (new URL ( 'https://image.zhangxinxu.com', base) .href);

다음은 실행 후 결과입니다.

실패한 테스트는 다음과 같습니다.

// 절대 주소가 없으면 오류가보고됩니다. 
console.log (new URL ( ''). href); 
console.log (new URL ( '// image.zhangxinxu.com'). href);

V. URL 인스턴스 개체의 속성 및 메서드

new URL ()의 반환 값은 다음 속성 및 메서드를 포함하는 인스턴스 객체입니다.

속성

알려진 URL 주소는 다음과 같습니다.

var url = new URL ( 'https://www.zhangxinxu.com:80/wordpress/?s=url#comments'); 
var ftp = new URL ( 'ftp : // username : [email protected]/path/file');

해시시

URL 주소의 앵커 체인 값에는 문자열이 포함되어 있습니다. '#'예를 들어 여기서 url.hash반환 값은 '#comments'입니다.

주최자

URL 주소의 호스트 호스트 주소 (프로토콜 포트 번호 포함), 여기서 url.host반환 값은 'www.zhangxinxu.com:80'입니다.

호스트 이름

URL 주소의 호스트 이름에 포트 번호가 포함되어 있지 않습니다. url.hostname반환 값은 'www.zhangxinxu.com'입니다.

href

완성 된 URL 주소입니다.

origin  [읽기 전용]

반환 된 URL 주소의 소스에는 URL 프로토콜, 도메인 이름 및 포트가 포함됩니다. url.origin반환 값 여기에 있다 'https://www.zhangxinxu.com:80'.

암호

URL 주소 도메인 이름 앞의 암호를 반환합니다. ftp 프로토콜에서 더 일반적입니다. ftp.password반환 값 여기에 있다 'password'.

사용자 이름

URL 주소의 도메인 이름 앞의 사용자 이름을 반환합니다. ftp 프로토콜에서 더 일반적입니다. ftp.username반환 값 여기에 있다 'username'.

경로명

URL에 디렉토리 + 파일 이름을 반환합니다. 예를 들어 ftp.pathname, 여기서 반환 값은 '/path/file'입니다.

포트

URL 주소의 포트 번호를 반환합니다. 예를 들어 , 여기서 반환 값 url.port은 '80'이고 ftp.port반환 값은 ''입니다.

실험 계획안

뒤에 콜론을 포함하여 URL 주소의 프로토콜을 반환합니다 ':'. 예를 들어 , 여기서 반환 값 url.protocol은 'https:'이고 ftp.protocol반환 값은 'ftp:'입니다.

검색

URL 주소의 쿼리 문자열을 반환합니다. 매개 변수가있는 경우 반환 값은 물음표로 시작합니다 '?'. 예를 들어 url.search, 여기서 반환 값은 '?s=url'입니다.

searchParams

URLSearchParams 객체를 반환하면 URLSearchParams 객체의 다양한 메서드를 호출 할 수 있으며 쿼리 문자열을 매우 편리하게 처리 할 수 ​​있습니다. 예를 들어 쿼리 키워드에 s해당하는 값 을 알고 싶다면 다음을 수행 할 수 있습니다.

url.searchParams.get ( 's');

방법

toString ()

반환 된 전체 URL 주소는 URL.href의 다른 형식으로 이해할 수 있지만 이는 출력 만 가능하며 값은 수정할 수 없습니다.

toJSON ()

또한 전체 URL 주소를 반환하며 반환 된 문자열은 href속성과 동일합니다.

정적 방법

URL.createObjectURL (객체)

File, Blob 또는 MediaSource 개체를 고유 한 Blob URL로 바꿀 수 있습니다. 매개 변수 object는 File, Blob 또는 MediaSource 개체 일 수 있습니다.

URL.revokeObjectURL (objectURL)

이전에 URL.createObjectURL()만든 URL 개체를 실행 취소 합니다. 이 매개 변수 objectURL는 이전에 URL.createObjectURL()생성 된 URL 의 반환 값을 나타냅니다 .

정적 메소드의 실제 사용 사례
캔버스 교차 도메인 생성 문제를 피하기 위해 Ajax를 사용하여 교차 도메인 이미지를 요청할 때 다음 두 가지 정적 메소드를 사용할 수 있습니다.

var xhr = new XMLHttpRequest (); 
xhr.onload = function () { 
    var url = URL.createObjectURL (this.response); 
    var img = new Image (); 
    img.onload = function () { 
        //이 시점에서 are 캔버스를 사용하여 img 
        // ... 코드 ... 
        // 사진을 다 사용한 후에 메모리를 해제하는 것을 잊지 
        마십시오. URL.revokeObjectURL (url); 
    }; 
    img.src = url; 
} ; 
xhr.open ( 'GET', url, true); 
xhr.responseType = 'blob'; 
xhr.send ();

적합성

Edge 12+ 지원.

여섯,이 두 JS API 폴리 필

호환성 표에서 URLSearchParams는 Edge 17에서만 지원되고 URL은 Edge 12에서만 지원된다는 것을 알 수 있습니다. 호환성이 좋지 않은 것 같지만 실제 프로젝트에서 사용하는 데 방해가되지 않는 이유는 무엇입니까? 폴리 필이 있기 때문입니다.

다음은 최신 ES7 사양에 지원되는 URL 및 URLSearchParams polyfill 프로젝트입니다 : https://github.com/lifaon74/url-polyfill

공식 성명에 따르면 IE 10+와 호환됩니다.

IE9에서 지원합니까 아니면 부분적으로 만 지원됩니까? 대략적으로 테스트 한 후 다음과 같이 결론을 내 렸습니다.

URL () 정적 메서드를 제외한 IE9의 기본 사용이 지원됩니다!

저에게는 충분합니다.

향후 실제 애플리케이션에서 다른 세부 사항이 발견되면 업데이트하십시오.

일곱, 결론

CSS, HTML, JS API 등 웹은 지속적으로 개선되고 있습니다. 이는 표준 및 교차 플랫폼입니다. 과거에 사용자 정의해야했던 많은 메소드와 기능이 이제 기본적으로 브라우저에서 지원됩니다. 이전 언어 프레임 워크의 가치 점점 낮아지고 있습니다.

긴 강을 건너기 전에 원본을 받아들이고, 어렵고 간단하고 쉬운 실현, 제품 지향, 사용자 지향, 미래를 기반으로 배우고 축적 할 때입니다.

제 프론트 엔드 질문을했던 친구들은 Vue와 React에 대해 어떤 질문도 할 필요가 없습니다. 저는 그것들을 사용한 적이 없으며 앞으로도 사용할 것입니다. 그것은 제 방향도 아니고 미래 방향도 아닙니다.