url对象---了解url的结构

什么是url

        url是网页网页的地址，通过一个url我们可以访问到网页，同时url也可以用来引用文件(txt,json,jpg,js,css,html)，所以你可以理解成url是一个指示器，它可以指向一个文件，网页，图片，或者音频...

创建一个url对象

创建一个新 URL 对象的语法：

new URL(url, [base])

• url —— 完整的 URL，或者仅路径（如果设置了 base），
• base —— 可选的 base URL：如果设置了此参数，且参数 url 只有路径，则会根据这个 base 生成 URL。

let url = new URL("https://www.bilibili.com/");

 

let newUrl = new URL("cheese","https://www.bilibili.com/");

 

可以看到url对象内展示了很多内部属性，

        对于一个url来说它可以拆分成多个部分，当我们拿到一个很长的url时，通过对象可以很轻松的将其分解，并拿到需要的数据 

url的参数和编码

        url的搜索参数（？后面的search部分）是类似一个map集的可迭代键值对（name-value）（URLSearchParams对象）。map可参考：js语法---map,set结构-CSDN博客

url的搜索参数属性url.searchParams具有以下方法：

• append(name, value) —— 按照 name 添加参数，
• delete(name) —— 按照 name 移除参数，
• get(name) —— 按照 name 获取参数，
• getAll(name) —— 获取相同 name 的所有参数（这是可行的，例如 ?user=John&user=Pete），
• has(name) —— 按照 name 检查参数是否存在，
• set(name, value) —— set/replace 参数，
• sort() —— 按 name 对参数进行排序，很少使用，并且它是可迭代的，类似于 Map。

最常见的两个情况就是，在搜索时和在登录时，

let url = new URL("https://www.bilibili.com/");
let searchUrl = new URL("all",url);

searchUrl.searchParams.set("keyword","JavaScript");//在searchUrl后添加参数
searchUrl.searchParams.set("from_source","webtop_search");
searchUrl.searchParams.set("spm_id_from","333.1007");
searchUrl.searchParams.set("search_source","5");

可以在搜索时的对应的参数看到对应的参数 

当参数带有特殊字符和中文时，url会被自动编码，

let newUrl = new URL("cheese","https://www.bilibili.com/");
newUrl.searchParams.set("user","用户!");
console.log(newUrl);

可以看到被编码后的参数 ，和浏览器中的看到的参数

对于一个普通的字符串url（非url对象），下面有用于编码/解码 URL 的内建函数：

• encodeURI —— 编码整个 URL。
• decodeURI —— 解码为编码前的状态。
• encodeURIComponent —— 编码 URL 组件，例如搜索参数，或者 hash，或者 pathname。
• decodeURIComponent —— 解码为编码前的状态。

// 对于一个 URL 整体，我们可以使用 encodeURI：
let encodeUrl = encodeURI("https://www.bilibili.com?user=用户&！");
console.log(encodeUrl);

// 对于 URL 参数，我们应该改用 encodeURIComponent：
let param = encodeURIComponent("用户&！");
let encodeParam = `https://www.bilibili.com?user=${param}`;
console.log(encodeParam);

 

        可以看到两者的区别， encodeURI 没有对 & 进行编码，因为它对于整个 URL 来说是合法的字符，但是参数中不允许字符出现

 

url扩展：href和src的区别

1、请求资源类型不同

（1） href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。 （2）在请求 src 资源时会将其指向的资源下载并应用到文档中，常用的有script，img 、iframe；

2、作用结果不同

（1）href 用于在当前文档和引用资源之间确立联系；

（2）src 用于替换当前内容；

3、 浏览器解析方式不同

（1）若在文档中添加href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。

（2）当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

更多url相关内容请参考：

URL 对象 (javascript.info)

href和src的区别 - 掘金 (juejin.cn)