当前位置: 萬仟网 > IT编程>开发语言>JavaScript > 不要再造轮子了:聊一聊 JavaScript 的 URL 对象是什么?

不要再造轮子了:聊一聊 JavaScript 的 URL 对象是什么?

2019年12月05日 15:35  | 萬仟网IT编程  | 我要评论

本文由葡萄城技术团队于博客园翻译并首发

转载请注明出处:,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。

 

如果我们自己编写从url中分析和提取元素的代码,那么有可能会比较痛苦和麻烦。程序员作为这个社会中最“懒”的群体之一,无休止的重复造轮子必然是令人难以容忍的,所以大多数浏览器的标准库中都已经内置了url对象。

那么现在,有了它,我们就可以将url字符串作为参数传递给url的构造函数,并创建它的实例解析url内容了吗?答案是:“是的!”。

要使用url构造函数创建url对象,我们在以下代码中使用new来创建:

new url('https://www.grapecity.com.cn');

在上面的代码中,我们创建了一个绝对地址的url对象的实例。但同时,我们还可以传入一个相对地址作为第一个参数,并把相对地址的基础url作为第二个参数来创建一个url对象。可能比较拗口,我们举个栗子:

new url('/developer', 'https://www.grapecity.com.cn');

看上面的代码,第二个基础url参数必须是一个有效的绝对地址,而不可以是一个相对的地址片段,它必须要以http://或https://开头,我们还可以在下面的代码中以类似于链式定义的方式来使用:

const gcurl = 'https://www.grapecity.com.cn/';

const gcdevurl = new url("/developer", gcurl);

const gcurl2 = new url(gcurl);

const gcslnurl = new url('/solutions', gcurl2);

const url = new url('aboutus', gcslnurl);

如果每个参数使用tostring()的话,我们的执行结果应该如下:

第二个参数是可选参数,只有当第一个参数是相对地址时才应传入。我们传入的字符串或url对象被转换为usvstring对象,该对象对应于一组unicode标量值可能的序列集合。在我们的代码中,我们可以将它们视为常规字符串。如果两个参数都是相对地址,或者基础url和相对地址一起无效,则会抛出typeerror异常。我们可以直接将url对象传递给第二个参数,因为url对象的tostring方法将在构造函数中操作之前将url对象转换为完整的url字符串。

url对象可以具有以下属性:

hash,host,hostname,href,origin,username/password,pathname,port,protocol,search等属性,接下来,让我们一起来了解一下它们吧!

hash属性

hash属性能获得url中位于#号后的部分。由于字符串没有经过百分比解码,因此仍然对如下所示的特殊符号进行编码。它们使用下面的映射进行编码。在编码过程中,左侧的字符将转换为右侧的字符:

  • ‘:’ — %3a
  • ‘/’ — %2f
  • ‘?’ — %3f
  • ‘#’ — %23
  • ‘[‘ — %5b
  • ‘]’ — %5d
  • ‘@’ — %40
  • ‘!’ — %21
  • ‘$’ — %24
  • “‘“ — %27
  • ‘(‘ — %28
  • ‘)’ — %29
  • ‘*’ — %2a
  • ‘+’ — %2b
  • ‘,’ — %2c
  • ‘;’ — %3b
  • ‘=’ — %3d
  • ‘%’ — %25
  • ‘ ‘ — %20 或者 +

例如,我们有这样的url字符串,,然后我们可以直接取出hash属性值,如下所示:

const exampleurl = new url('https://www.grapecity.com.cn/developer/spreadjs#price');
console.log(exampleurl.hash);

在运行结果中,我们在console.log语句中得到‘#price’。该属性是一个usvstring,当我们像上面那样获取它时,它会被转换为字符串。因为它不是只读属性,所以我们也可以像下面的代码中那样直接为它赋值:

exampleurl.hash = '#newhash';

例如:

const exampleurl = new url('https://www.grapecity.com.cn/developer/spreadjs#price'); 
exampleurl.hash ='#newprice'; 
console.log(exampleurl.hash);

我们通过href属性就能获得更新后的url https://www.grapecity.com.cn/developer/spreadjs#newhash

host 属性

url对象的host属性是包含主机名的usvstring。如果端口包含在: 之后,则我们还将获得主机的端口号。例如,如果我们有:

const exampleurl = new url('http://huozige.grapecity.com.cn:8080/');
console.log(exampleurl.host);

我们就能获得huozige.grapecity.com.cn:8080。与其他usvstring属性一样,当我们检索它时,它会转换为字符串。同样的,它也不是只读属性,所以我们也可以像hash属性一样为它赋值:

const exampleurl = new url('http:// huozige.grapecity.com.cn:8080/功能演示');
exampleurl.host = 'es.grapecity.com.cn:80';
console.log(exampleurl);

这样我们一样能够获得全新的url。

hostname 属性

使用hostname属性,可以从url得到端口外的主机名:

const exampleurl = new url('http:// huozige.grapecity.com.cn:8080/功能演示');
console.log(exampleurl.hostname)

你同样也可以像修改其他属性一样修改hostname属性,例如:

exampleurl.hostname = ‘newexample.com’;

href 属性

url对象的href属性包含了传入url对象的整个地址字符串,例如:

const exampleurl = new url('https://www.grapecity.com.cn/developer/spreadjs#price');
console.log(exampleurl.href);

打出来的就是我们传给url构造函数的内容,和其他属性一样,href属性也不是只读的。

origin 属性

区别于其他属性,origin是一个只读属性,它将为你返回具有url来源的unicode序列化usvstring。origin的结构是由传入的url类型决定的,对于http或https 的链接,得到的origin将会为 协议(http/https)+ (://) + 域名 + (:端口),一般情况下,默认端口将会被忽略。对于blob 链接,origin返回的则是blob:后面的部分。例如:

const url1 = new url("https://www.grapecity.com.cn/:443")
const url2 = new url("blob:https://www.grapecity.com.cn/:443")
console.log(url1.origin);
console.log(url2.origin)

你将会得到

username & password属性

username和password属性也是可写属性,它能提取域名前的用户名和密码部分的内容,例如:

const url = new url('https://username:password@www.grapecity.com.cn');
console.log(url.username);
console.log(url.password);
url.username = “username1”;
url.password = “password1”;
console.log(url.username);
console.log(url.password);

pathname属性

这个属性是指获得传入url的第一个斜杠(/) 后面除参数外的部分,例如:

const url = new url ("https://www.grapecity.com.cn/developer/spreadjs#price")
console.log(url.pathname);

port属性

port属性是指可以获得传入url地址的端口值,这个属性也是可写的。

const url = new url('http://huozige.grapecity.com.cn:8080/功能演示');
console.log(url.port);

protocol属性

可以获得传入url地址参数的协议名,一般是指类似http:,https:,ftp:,file:等这样的协议。

const url = new url('https://www.grapecity.com.cn/');
console.log(url.protocol);

search属性

可以获得传入url地址参数?后的部分,但该属性只能获得整个查询字符串,如若需要了解各个参数的值,可以使用searchparams属性。

const url = new url('https://www.grapecity.com.cn:443?key1=value1&key2=value2');
console.log(url.search);

searchparams属性

search属性只为我们获取了整个参数字符串,如果有把字符串解析为键值对,这时候searchparams属性就派上了用场,该属性将获得一个urlsearchparams对象,该对象具有列出查询字符串键值对列表的能力,例如,要获取参数列表,我们可以这样使用。

const url = new url(' https://www.grapecity.com.cn/?key1=value1&key2=value2'); 
console.log(url.searchparams.get('key1')); 
console.log(url.searchparams.get('key2'));

从第一个console.log语句中获得value1,从第二个console.log语句中获得value2。urlsearchparams对象有一个get方法,通过键名获取给定查询字符串键的值。

静态方法

url构造函数里有2个静态方法,它有createobjecturl()方法和revokeobjecturl()方法。

url.createobjecturl()静态方法会创建一个 domstring,其中包含一个表示参数中给出的对象的url。这个 url 的生命周期和创建它的窗口中的 document 绑定。这个新的url 对象表示指定的 file 对象或 blob 对象。

url.revokeobjecturl()方法会释放一个通过url.createobjecturl()创建的对象url. 当你要已经用过了这个对象url,然后要让浏览器知道这个url已经不再需要指向对应的文件的时候,就需要调用这个方法。

总结

最后为大家带来一张表,希望能更好的帮助大家通览

 

有了url对象,操纵和从url中提取部分不再是一件痛苦的事情,因为我们不必自己编写所有代码来完成这项工作。大多数浏览器的标准库中都内置了url对象。现在我们可以将url作为字符串传递给url构造函数并创建url的实例。然后,我们可以使用方便的值属性和方法来操作并获得我们想要的url部分。

最后,有什么问题,欢迎直接留言。

 

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

◎已有 0 人评论

Copyright © 2020  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com