JavaScript中URL的相关内容介绍（附代码）(2)-木庄网络博客

题外话：这几个库代码都挺少的，值得一读说不定有新收获。

加号与空格

每天使用的百度和谷歌中不知道大家有没有主要到这几个细节：

输入 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,把整个链接拼接起来则为：

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 符号（@）分隔：