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

前端开发作者： 2024-08-22 01:15:01

本文由葡萄城技术团队于博客园翻译并首发转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。如果我们自己编写从URL中分析和提取元素的代码，那么有可能会比较痛苦

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

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

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);

Hash属性

‘:’ — %3A
‘/’ — %2F
‘?’ — %3F
‘#’ — %23
‘[‘ — %5B
‘]’ — %5D
‘@’ — %40
‘!’ — %21
‘$’ — %24
“‘“ — %27
‘(‘ — %28
‘)’ — %29
‘*’ — %2A
‘+’ — %2B
‘,’ — %2C
‘;’ — %3B
‘=’ — %3D
‘%’ — %25
‘ ‘ — %20 或者 +

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

exampleUrl.hash = '#newHash';

const exampleUrl = new URL（'https://www.grapecity.com.cn/developer/spreadjs#price'）; 
exampleUrl.hash ='#newPrice'; 
console.log（exampleUrl.hash）;

Host 属性

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

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

Hostname 属性

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

exampleUrl.hostname = ‘newExample.com’;

Href 属性

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

Origin 属性

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属性

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属性

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

Port属性

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

Protocol属性

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

Search属性

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

searchParams属性

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'））;