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

本文摘自PHP中文网，作者不言，侵删。

本篇文章给大家带来的内容是关于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地址打回原形：

脚本

1 2	`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);