JavaScript의 URL 관련 콘텐츠 소개(코드 포함)

이 글은 JavaScript의 URL(코드 포함)에 대한 소개를 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

WeChat 메시지 프롬프트 소리와 함께 Xiaosi는 "페이지 데이터를 요청할 수 없는 이유를 모르겠습니다.

axios.get('users', {
    params: { ids: [1, 2, 3] }
})

Xiaoeryi는 쿼리의 배열 전송 방법으로 인해 발생할 가능성이 가장 높다는 것을 확인했습니다. 백엔드가 구문 분석 배열 ID를 구현하기 때문에 :[5, 6, 100] 다음과 같은 방법이 있을 수 있습니다:

bracket: ids[]=1&ids[]=2&ids[]=3
index: ids[0]=1&ids[1 ]=2&ids[3]= 3
comma: ids=1,2,3
none: ids=1&ids=2&ids=3

Xiao Si는 문제를 별도로 테스트한 후 해결했습니다. 이는 또한 Xiao Er에게 Brother가 겪었던 문제를 상기시켰습니다. Little Panda도 개발할 때 이 문제에 부딪혔고 온라인에서 검색한 결과 다른 사람들이 qs 라이브러리의 stringify 직접 코드를 사용하여 원리가 무엇이든 간에 이를 실행하는 것을 발견했습니다. 지금.

우리는 매일 URL을 다루고 있지만 모든 사람이 URL을 이해하는 것은 아닙니다.

모든 사람이 코드가 실행되는 이유를 탐구하지는 않습니다.

원래 모양 표시

URL() 개체를 사용하여 URL 주소를 원래 모양으로 빠르게 되돌릴 수 있습니다.

Script

const url = new URL('http://www.pushme.top/users?sort_by=asc#page=userlist')
console.log(url)

Output

{
    hash: "#page=userlist"
    host: "www.pushme.top"
    hostname: "www.pushme.top"
    href: "http://www.pushme.top/users?sort_by=asc#page=userlist"
    origin: "http://www.pushme.top"
    password: ""
    pathname: "/users"
    port: ""
    protocol: "http:"
    search: "?sort_by=asc"
    searchParams: URLSearchParams {}
    username: ""
}

작은 크기에 이렇게 많은 속성이 있을 줄은 몰랐습니다. url 주소. 여기서는 주로 해시와 검색에 대해 설명하겠습니다.

읽을 때 위아래로 볼 필요가 없도록 콘솔을 열고 스크립트를 실행하는 것이 좋습니다.

호스트와 호스트 이름

예민한 학생들은 호스트와 호스트 이름이 정확히 같다는 것을 발견했을 것입니다. 왜 그럴까요?

우리가 개발할 때 자주 보는 localhost:8080을 떠올려보세요. 포트번호 8080이 여기에 나오는데, 우리가 보통 어떤 웹사이트를 방문할 때는 포트번호를 가져오지 않습니다. 이는 URL 주소의 기본 포트 번호가 80번이기 때문에 잘 살펴보면 위의 포트 값이 비어 있음을 알 수 있습니다.

호스트와 호스트 이름의 차이점은 포트가 있는 경우 호스트에는 포트 번호가 포함되지만 호스트 이름에는 포함되지 않는다는 것입니다.

protocol 및 Origin

protocol은 프로토콜을 의미합니다. 가장 일반적인 것은 http와 https입니다. 물론 이제 프로토콜을 입력하지 않으면 브라우저가 자동으로 추가합니다. URL()에 프로토콜을 포함하면 오류가 보고됩니다. Origin은 프로토콜과 호스트로 구성됩니다.

search and searchParams

Basics

?search=a 쿼리는 첫 번째 ?로 시작하고 줄의 끝이나 #으로 끝납니다. 일부 데이터를 백엔드에 전달하는 데 사용됩니다. 데이터는 &로 구분되고 값은 =로 구분됩니다. 코드를 통해 이해해 봅시다.

const query = 'id=1&sort=asc&hello=world';
// 对 & 分割取得数据对
const data = query.split('&').reduce((data,keyValue) => {
    const [ key, value ] = keyValue.split('=');
    return (data[key] = value, data);
}, {});

// 输出 {id: "1", sort: "asc", hello: "world"}
console.log(data);

이것은 쿼리에서 가장 기본적인 데이터 쌍 조합입니다. 물론 배열의 처음 4개 표현식에는 추가 처리가 필요합니다. 이는 키 수집과 판단에 지나지 않습니다. 가치. 하지만 이 부분은 기본적으로 우리를 위한 백엔드 프레임워크에서 처리됩니다. 프론트엔드는 qs, query-string, qss와 같은 라이브러리를 사용하여 완성할 수도 있습니다.

주제 제외: 이 라이브러리에는 코드가 거의 없으며 읽을 가치가 있으며 새로운 것을 얻을 수 있습니다.

더하기 기호 및 공백

매일 사용하는 Baidu와 Google의 이러한 세부 사항에 주의를 기울였는지 모르겠습니다.

Enter https://www.baidu.com/s?wd=작은이 +pushmetop 검색 상자 페이지에 나타나는 것은 웨이터 pushmetop이고 주소 표시줄의 URL 주소에 있는 +는 마술처럼 공백으로 변합니다.
https://www.baidu.com/s?wd=小two pushmetop을 입력하세요. 검색창에 나타나는 것은 Xiaoer pushmetop이고, 주소 표시줄의 URL 주소 공백은 %20이 됩니다.
https://www.baidu.com/s?wd=작은이%2Bpushmetop을 입력하세요. 검색창에 나타나는 것은 작은이+pushmetop이고, 주소 표시줄에 있는 URL 주소의 %2B는 +가 됩니다.

특정한 이유로 Wikipedia에서 예약 문자의 퍼센트 인코딩에 대해 확인할 수 있습니다.

URL 인코딩

Nuggets와 같은 웹사이트의 링크를 클릭하면 http://www.pushmetop.com?redirect=xxxxx와 유사한 URL 주소가 빠르게 깜박이게 됩니다. 리디렉션에 해당하는 리디렉션 주소는 다음과 같습니다. %. 왜 왜곡되었나요?

점프해야 하는 링크가 www.test.com?hello=world&id=1이라고 가정해 보겠습니다. 전체 링크를 연결하는 방법은 다음과 같습니다.

http://www.pushmetop.com?redirect=www.test.com?hello=world&id=1

초기 정의에 따르면解析值 和 预期值완전히 다릅니다.

The 구문 분석된 값

{
    "redirect": "www.test.com?hello=world",
    "id": "1"
}

예상 값

{
    "redirect": "www.test.com?hello=world&id=1"
}

이 문제를 해결하기 위해 URL 인코딩이 탄생했습니다.

encodeURIComponent() 및 decodeURIComponent()를 권장합니다.

encodeURI() 및 decodeURI()는 전자를 비교하면 "; / ? : @ & = + $ , #" 문자를 인코딩하지 않습니다.

escape() 및 unescape()는 더 이상 사용되지 않습니다.

예

let redirect = 'www.test.com?hello=world&id=1';
redirect = encodeURIComponent(redirect);

let url = `http://www.pushmetop.com?redirect=${redirect}`;
url = new URL(url)

// 输出: www.test.com?hello=world&id=1
console.log(url.searchParams.get('redirect'))

hash

#hash 中 fragment 以 # 为开始 行尾 为结束。在 回到顶部 中有提到过利用hash锚点来进行跳转，如果大家注意观察的话会发现 hash 的改变不会引起页面的刷新。

在 Angular.js、Vue Router 等库中，会利用在 html5 中提供了 history 的一系列操作，来帮助我们不刷新页面管理  url。但是在一些旧的浏览器上并不兼容时，会利用 hash 不会主动触发浏览器 reload 的特性来修改 location.hash 来管理路由。 当然 hash 的另外一个特点是可以被保存为书签，也是一大优点。

hash 的小妙用也可以像 query 那样利用 & 和 = 来存取数据，当然你也可以定制属于你的规则。

href 和 pathname

href 为整个 url地址。而 pathname 属性包含 URL 的整个路径部分。它跟在 host （包括 port）后面，排在 query 或 hash 组成部分的前面且被 ASCII 问号（?）或哈希字符（#）分隔。

username 和 password

username 和 password 在日常使用中很少用，它们可以合称为 auth。该字符串跟在 protocol 和双斜杠（如果有）的后面，排在 host 部分的前面且被一个 ASCII 的 at 符号（@）分隔：

http://username:password@www.pushme.top/test/blah?something=123

结尾

本来只是想讨论 hash 和 search ，结果全都过一遍，今天就辛苦大家了。

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的的JavaScript教程视频栏目！

위 내용은 JavaScript의 URL 관련 콘텐츠 소개(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!