浏览器自动补全路径规则

1. 浏览器自动补全路径规则
2. 一个URL由protocol、(hostname、port) = host、pathname、search、hash组成；
3. URLSearchParams的使用注意事项

1. 浏览器自动补全路径规则

我们输入部分路径片段，浏览器会帮我们补充完整的路径，具体规则如下：

总结：浏览器会根据输入的是#、？、/、// 等去做截断。

补充：location.host和location.hostname的区别：

JavaScript 中，大多数情况下，我们不会发现 location.host 与 location.hostname 的区别，因为大多数情况下，我们的网页用的是 80 端口。

他们的区别：

location.host 包含端口，比如是 127.0.0.1:81。如果端口是 80，那么就没有端口，就是 127.0.0.1。

location.hostname 不包含端口，比如是 127.0.0.1。

---

2. 获取location.href的search

方法1：首先将search转换成一个对象

// getUrlVars

function getUrlVars(url) {
    const obj = {};
    url.replace(/[?&]([^&?]+)=([^&?]*)/g, (m, p1, p2) => {
        obj[p1] = p2;
    })
    return obj;
}

方法2：通过URLSearchParams构造函数

https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams/URLSearchParams

URLSearchParams和URL.searchParams是等价的

<script>
    const search = location.search;
    const searchObj = new URLSearchParams(search);
    const res = {};
    for(let s of searchObj) {
        res[s[0]] = s[1]
    }
    console.log(res)
</script>

注意：URLSearchParams 构造函数不会解析完整 URL，但是如果字符串起始位置有 ? 的话会被去除。