JavaScript中URL的相关内容介绍（附代码）
陪伴着微信新闻的提醒音 小四 发来一段代码说 不知道为什么恳求不到页面数据：
axios.get('users', {
params: { ids: [1, 2, 3] }
})小二一看大约率是 query 中数组传递方式引发的，由于后端实现解析数组 ids:[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
小四离别测试后便把问题解决了，这也让小二想起 小熊猫哥哥 在开发的时候，也碰到过这个问题网上一搜发明别人用 qs 库中的 stringify 直接代码一试没报错能运转，不管它的道理是啥，此刻想想挺可怕的。
虽然每天和 URL 打交道但并不是所有人都懂它。关于为什么代码能运转也不是所有人都会去深究它。
现真相
利用 URL() 对象可以快速的把一个 url地址 打回真相：
足本
const url = new URL('http://www.pushme.top/users?sort_by=asc#page=userlist')
console.log(url)输出
{
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地址 里面竟然有这么多属性，在这里主要会讲解的 hash 和 search。
引荐翻开操纵台把足本运转一下，这样阅读的时候就不需要上下对比查看了。
host 和 hostname
眼尖的同学必定发明了 host 和 hostname 竟然千篇一律这是为什么呢？
回忆一下开发经常在见到的 localhost:8080，这里显现了端标语 8080 而平常使用拜访一些网站的时候却没有带上端标语。这是由于 url地址 会默许端标语为 80，所以你细心看看会发明上面 port 的值为空。
而 host 和 hostname 的不同便是有 port 的时候 host 会包括端标语，而 hostname 不会包括。
protocol 和 origin
protocol 指的便是 和谈 最常见的有 http 和 https，当然此刻阅读器再不输入和谈时会主动帮你加上，不外在 URL() 不带上和谈可是会报错的哦。origin 则为 protocel 和 host 拼接组成。
search 和 searchParams
根基
?search=a 中 query 以第一个?开端至行尾或#完毕。用于向后端传递一些数据，数据使用 & 停止分隔，值使用 = 分隔。通过一段代码来懂得一下：
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);这就是 query 最根基的数据对的组合方式，当然开头的四种 数组 的表达方式需要停止别的的处置，无外乎就是对 key 的收集 和 value 的推断。不外这部分根本上后端的框架都帮我们处置好了，前端也可以使用 qs、query-string、qss 等库来完成。
题外话：这几个库代码都挺少的，值得一读说不定有新收成。
加号与空格
每天使用的 baidu 和 谷歌 中不知道大家有没有主要到这几个细节：
输入 https://www.baidu.com/s?wd=小二+pushmetop 搜索框中显现的是小二 pushmetop，地址栏中url地址的 + 奇妙的变成了 空格。
输入 https://www.baidu.com/s?wd=小二 pushmetop 搜索框中显现的是小二 pushmetop，地址栏中url地址的 空格 的变成 %20。
输入 https://www.baidu.com/s?wd=小二%2Bpushmetop 搜索框中显现的是小二+pushmetop，地址栏中url地址的 %2B 的变成 +。
详细缘由可以查看 维基百科 关于 保存字符的百分号编码 。
URL 编码
在 掘金 等网站点击链接都会快速的出现相似 http://www.pushmetop.com?redirect=xxxxx 的 url地址，会发明 redirect 对应的重定向地址会是一堆夹带 % 的乱码这是为什么呢？
让我们假设需要跳转的链接是 www.test.com?hello=world&id=1,把整个链接拼接起来则为：
http://www.pushmetop.com?redirect=www.test.com?hello=world&id=1
按照一开端的定义 解析值 和 预测值 完全不一样了：
解析值
{
"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的相关内容介绍（附代码）的具体内容，更多请关注百分百源码网其它相关文章！
