집 > 기사 > 웹 프론트엔드 > JavaScript의 URL 개체에 대해 이야기해 보겠습니다.

JavaScript의 URL 개체에 대해 이야기해 보겠습니다.

青灯夜游앞으로: 2020-07-10 16:51:125365검색

URL에서 요소를 분석하고 추출하는 코드를 직접 작성한다면 더 힘들고 번거로울 수 있습니다. 프로그래머는 이 사회에서 가장 "게으른" 그룹 중 하나입니다. 끝없이 바퀴를 재발명하는 것은 용납할 수 없는 일이므로 대부분의 브라우저에는 표준 라이브러리에 URL 개체가 내장되어 있습니다.

이제 이를 통해 URL 문자열을 URL 생성자에 매개변수로 전달하고 해당 인스턴스를 생성하여 URL 콘텐츠를 구문 분석할 수 있습니까? 대답은 "예!"입니다.

URL 생성자를 사용하여 URL 개체를 만들려면 다음 코드에서 new를 사용하여 URL 개체를 만듭니다.

new URL(&#39;https://www.grapecity.com.cn&#39;);

위 코드에서는 절대 주소를 사용하여 URL 개체의 인스턴스를 만듭니다. 그러나 동시에 상대 주소를 첫 번째 매개변수로 전달하고 상대 주소의 기본 URL을 두 번째 매개변수로 전달하여 URL 객체를 생성할 수도 있습니다. 말이 많을 수도 있지만 예를 들어보겠습니다.

new URL(&#39;/developer&#39;, &#39;https://www.grapecity.com.cn&#39;);

위 코드를 보면 두 번째 기본 URL 매개변수는 상대 주소 조각이 아닌 유효한 절대 주소여야 하며 http://로 끝나거나 다음으로 시작해야 합니다. https://, 체인 정의와 유사한 방식으로 다음 코드에서 사용할 수도 있습니다.

const gcUrl = &#39;https://www.grapecity.com.cn/&#39;;

const gcDevUrl = new URL("/developer", gcUrl);

const gcUrl2 = new URL(gcUrl);

const gcSlnUrl = new URL(&#39;/solutions&#39;, gcUrl2);

const Url = new URL(&#39;aboutus&#39;, gcSlnUrl);

각 매개변수가 toString()을 사용하는 경우 실행 결과는 다음과 같아야 합니다. toString()的话，我们的执行结果应该如下：

https://www.grapecity.com.cn/

https://www.grapecity.com.cn/developer

https://www.grapecity.com.cn/

https://www.grapecity.com.cn/solutions

https://www.grapecity.com.cn/aboutus

第二个参数是可选参数，只有当第一个参数是相对地址时才应传入。我们传入的字符串或URL对象被转换为USVString对象，该对象对应于一组Unicode标量值可能的序列集合。在我们的代码中，我们可以将它们视为常规字符串。如果两个参数都是相对地址，或者基础URL和相对地址一起无效，则会抛出TypeError异常。我们可以直接将URL对象传递给第二个参数，因为URL对象的toString方法将在构造函数中操作之前将URL对象转换为完整的URL字符串。

URL对象可以具有以下属性：

Hash,host,hostname,href,origin,username/password,pathname,port,protocol,search等属性，接下来，让我们一起来了解一下它们吧！

Hash属性

hash属性能获得URL中位于#号后的部分。由于字符串没有经过百分比解码，因此仍然对如下所示的特殊符号进行编码。它们使用下面的映射进行编码。在编码过程中，左侧的字符将转换为右侧的字符：

‘:’ — %3A
‘/’ — %2F
‘?’ — %3F
‘#’ — %23
‘[‘ — %5B
‘]’ — %5D
‘@’ — %40
‘!’ — %21
‘$’ — %24
“‘“ — %27
‘(‘ — %28
‘)’ — %29
‘*’ — %2A
‘+’ — %2B
‘,’ — %2C
‘;’ — %3B
‘=’ — %3D
‘%’ — %25
‘ ‘ — %20 或者 +

https://www.grapecity.com.cn/developer

https://www.grapecity.com.cn/

https:/ /www. Grapecity.com.cn/solutions

https://www.grapecity.com.cn/aboutus두 번째 매개변수는 선택 매개변수로 첫 번째 매개변수가 상대 주소인 경우에만 전달해야 합니다. 우리가 전달하는 문자열 또는 URL 개체는 유니코드 스칼라 값의 가능한 시퀀스 집합에 해당하는 USVString 개체로 변환됩니다. 우리 코드에서는 이를 일반 문자열로 처리할 수 있습니다. 두 매개변수가 모두 상대 주소이거나 기본 URL과 상대 주소가 모두 잘못된 경우 TypeError 예외가 발생합니다. URL 객체의 toString 메소드가 생성자에서 작동하기 전에 URL 객체를 완전한 URL 문자열로 변환하기 때문에 URL 객체를 두 번째 매개변수에 직접 전달할 수 있습니다. URL 개체는 다음과 같은 속성을 가질 수 있습니다:

Hash, 호스트, 호스트 이름, href, 출처, 사용자 이름/비밀번호, 경로 이름, 포트, 프로토콜, 검색 및 기타 속성에 대해 함께 알아 보겠습니다.

🎜🎜🎜해시 속성🎜🎜🎜🎜해시 속성은 # 기호 뒤의 URL 부분을 가져올 수 있습니다. 문자열은 퍼센트 디코딩되지 않으므로 아래 표시된 특수 기호는 여전히 인코딩됩니다. 아래 매핑을 사용하여 인코딩됩니다. 인코딩 프로세스 중에 왼쪽 문자가 오른쪽 문자로 변환됩니다: 🎜

':' — %3A🎜
'/' — %2F🎜
'?' — %3F🎜
' #' — %23🎜
'[' — %5B🎜
']' — %5D🎜
'@' — %40🎜
'! ' 코드> — %21🎜
'$' — %24🎜
“' “ — %27🎜
'(' — %28🎜
')' — %29🎜
'*' — %2A🎜
'+' — %2B🎜
',' — %2C🎜
';' — %3B 🎜
'=' — %3D🎜
'%' —%25 code>🎜<li> <code>' '— %20 또는 +🎜🎜🎜예를 들어 URL 문자열이 있습니다. 이와 같이 https://www.grapecity.com.cn/developer/spreadjs#price를 입력한 다음 아래와 같이 Hash 속성 값을 직접 꺼낼 수 있습니다. 🎜
```
const exampleUrl = new URL(&#39;https://www.grapecity.com.cn/developer/spreadjs#price&#39;);
console.log(exampleUrl.hash);
```
🎜실행 결과에서 '#price'를 얻습니다. ' console.log 문에 있습니다. 속성은 USVString이며 위와 같이 가져오면 문자열로 변환됩니다. 읽기 전용 속성이 아니기 때문에 다음 코드와 같이 직접 값을 할당할 수도 있습니다. 🎜
```
exampleUrl.hash = &#39;#newHash&#39;;
```
🎜예: 🎜
```
const exampleUrl = new URL（&#39;https://www.grapecity.com.cn/developer/spreadjs#price&#39;）; 
exampleUrl.hash =&#39;#newPrice&#39;; 
console.log（exampleUrl.hash）;
```
🎜업데이트된 URL https://www.grapecity.com을 통해 얻을 수 있습니다. href 속성 .cn/developer/spreadjs#newHash🎜🎜🎜🎜Host attribute🎜🎜🎜🎜URL 개체의 호스트 속성은 호스트 이름을 포함하는 USVString입니다. 포트가 : 뒤에 포함되면 호스트의 포트 번호도 가져옵니다. 예를 들어 다음과 같은 경우가 있습니다. 🎜
```
const exampleUrl = new URL(&#39;http://huozige.grapecity.com.cn:8080/&#39;);
console.log(exampleUrl.host);
```
我们就能获得huozige.grapecity.com.cn:8080。与其他USVString属性一样，当我们检索它时，它会转换为字符串。同样的，它也不是只读属性，所以我们也可以像hash属性一样为它赋值：
```
const exampleUrl = new URL(&#39;http:// huozige.grapecity.com.cn:8080/功能演示&#39;);
exampleUrl.host = &#39;es.grapecity.com.cn:80&#39;;
console.log(exampleUrl);
```
这样我们一样能够获得全新的URL。

Hostname 属性

使用hostname属性，可以从URL得到端口外的主机名：
```
const exampleUrl = new URL(&#39;http:// huozige.grapecity.com.cn:8080/功能演示&#39;);
console.log(exampleUrl.hostname)
```
你同样也可以像修改其他属性一样修改hostname属性，例如：
```
exampleUrl.hostname = ‘newExample.com’;
```
Href 属性

URL对象的href属性包含了传入URL对象的整个地址字符串，例如：
```
const exampleUrl = new URL(&#39;https://www.grapecity.com.cn/developer/spreadjs#price&#39;);
console.log(exampleUrl.href);
```
打出来的就是我们传给URL构造函数的内容，和其他属性一样，href属性也不是只读的。

Origin 属性

区别于其他属性，Origin是一个只读属性，它将为你返回具有URL来源的Unicode序列化USVString。Origin的结构是由传入的URL类型决定的，对于http或https 的链接，得到的Origin将会为协议（http/https）+ (://) + 域名 + (:端口)，一般情况下，默认端口将会被忽略。对于BLOB 链接，Origin返回的则是BLOB：后面的部分。例如：
```
const url1 = new URL("https://www.grapecity.com.cn/:443")
const url2 = new URL("blob:https://www.grapecity.com.cn/:443")
console.log(url1.origin);
console.log(url2.origin)
```
你将会得到

https://www.grapecity.com.cn

UserName & Password属性

UserName和Password属性也是可写属性，它能提取域名前的用户名和密码部分的内容，例如：
```
const url = new URL(&#39;https://username:password@www.grapecity.com.cn&#39;); console.log(url.username); console.log(url.password); url.username = “username1”; url.password = “password1”; console.log(url.username); console.log(url.password);
```
Pathname属性

这个属性是指获得传入url的第一个斜杠(/) 后面除参数外的部分，例如：
```
const url = new URL ("https://www.grapecity.com.cn/developer/spreadjs#price") console.log(url.pathname);
```
Port属性

Port属性是指可以获得传入Url地址的端口值，这个属性也是可写的。
```
const url = new URL(&#39;http://huozige.grapecity.com.cn:8080/功能演示&#39;); console.log(url.port);
```
Protocol属性

可以获得传入Url地址参数的协议名，一般是指类似http:，https:，ftp:，file:等这样的协议。
```
const url = new URL(&#39;https://www.grapecity.com.cn/&#39;); console.log(url.protocol);
```
Search属性

可以获得传入Url地址参数？后的部分，但该属性只能获得整个查询字符串，如若需要了解各个参数的值，可以使用searchParams属性。
```
const url = new URL(&#39;https://www.grapecity.com.cn:443?key1=value1&key2=value2&#39;); console.log(url.search);
```
searchParams属性

search属性只为我们获取了整个参数字符串，如果有把字符串解析为键值对，这时候searchParams属性就派上了用场，该属性将获得一个URLSearchParams对象，该对象具有列出查询字符串键值对列表的能力，例如，要获取参数列表，我们可以这样使用。
```
const url = new URL（&#39; https://www.grapecity.com.cn/?key1=value1&key2=value2&#39;）; console.log（url.searchParams.get（&#39;key1&#39;））; console.log（url.searchParams.get（&#39;key2&#39;））;
```
从第一个console.log语句中获得value1，从第二个console.log语句中获得value2。URLSearchParams对象有一个get方法，通过键名获取给定查询字符串键的值。

静态方法

URL构造函数里有2个静态方法，它有createObjectURL()方法和revokeObjectURL()方法。

URL.createObjectURL()静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

URL.revokeObjectURL()方法会释放一个通过URL.createObjectURL()创建的对象URL. 当你要已经用过了这个对象URL,然后要让浏览器知道这个URL已经不再需要指向对应的文件的时候,就需要调用这个方法。

总结

最后为大家带来一张表，希望能更好的帮助大家通览

有了URL对象，操纵和从URL中提取部分不再是一件痛苦的事情，因为我们不必自己编写所有代码来完成这项工作。大多数浏览器的标准库中都内置了URL对象。现在我们可以将URL作为字符串传递给URL构造函数并创建URL的实例。然后，我们可以使用方便的值属性和方法来操作并获得我们想要的URL部分。

本文转载自：https://www.cnblogs.com/powertoolsteam/p/urlobject.html

相关教程推荐：JavaScript视频教程

위 내용은 JavaScript의 URL 개체에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：Typescript와 Javascript의 차이점 이해다음 기사：Typescript와 Javascript의 차이점 이해