URlSearchParams构造函数获取URL参数的方法

URL的各个部分组成

• url的hash部分

const myURL = new URL('https://ddong345:8080/article/foo#index);
//获取
console.log(myURL.hash)//===>#index
//设置
myURL.hash='bar'
console.log(myURL.href);
//=>https://ddong345:8080/article/foo#bar

-url的host部分(主机)

const myURL = new URL('https://ddong345:8080/article/foo#index);
console.log(myURL.host);//=>ddong345:8080
//同样可以设置，这里就不展示了

• url的hostname部分(主机名)

const myURL = new URL('https://ddong345:8080/article/foo#index);
console.log(myURL.hostname);//=>ddong345

• url的origin部分

const myURL = new URL('https://ddong345:8080/article/foo#index);
console.log(myURL.origin);//=>https://ddong345

• url的pathname部分(路径)

const myURL = new URL('https://ddong345:8080/article/foot?2);
console.log(myURL.pathname);//=>/article/foot

• url的port部分

端口值可以是空字符串，在这种情况下端口取决于协议/方案：

协议	端口
ftp	21
文件
http	80
https	443
ws	80
wss	443

const myURL = new URL('https://ddong345:8080);
console.log(myURL.port);//=>8080

• url的protocol部分

const myURL = new URL('https://ddong345:8080);
console.log(myURL.protocol);//=>https

• url的search部分

const myURL = new URL('https://ddong345:8080/article/foot?2);
console.log(myURL.search);//=>?2

如何获取URL参数的方法

有的时候项目里就要获取到url里的参数，这个时候可以用到URlSearchParams构造函数进行获取
注：URlSearchParams兼容性不好，在ie浏览器运用时，它会报URLSearchParams未定义,

（1）安装url-search-params-polyfill

npm install --save url-search-params-polyfill

（2）在需要URLSearchParams的文件引入

import 'url-search-params-polyfill'

1.页面跳转的时候，获取某个参数
//window.location='https://ddong345/article/details?name=dong'是整个url
let params = new URLSearchParams(new URL(window.location).search);
console.log(params.get('name'))//print dong

• 获取参数

2.也可以这样去获取
const myURL = new URL('https://ddong345:8080/article/details?name=dong');
console.log(myURL.searchParams.get('name'));//print dong

• append( name, value)添加指定的键/值

//append可以添加多个相同的键名
myURL.searchParams.append('age', '1');
myURL.searchParams.append('age', '6');
console.log(myURL.href);//=>https://ddong345:8080/article/details?name=dong&age=1&age=6&grend=6#bar

• 检查参数

myURL.searchParams.has('age')
//==>true

• 删除参数及其对应的值

myURL.searchParams.delete('age');
console.log(myURL.href);//=>https://ddong345:8080/article/details?name=dong#bar

• entries():返回一个iterator可以遍历所有键/值对的对象

let params = new URLSearchParams(new URL('https://ddong345/article/details?name=dong').search);
for(var pair of params.entries()) {
    console.log(pair[0]+ ', '+ pair[1]); 
 }
//  name    dong

• sort()按键名排序

//https://ddong345:8080/article/details?name=dong&age=1#bar
myURL.searchParams.sort();
console.log(myURL.href)//=>https://ddong345:8080/article/details?age=1&name=dong#bar

• set(name, value）设置键名和值

//如果设置相同的键，后面一个会覆盖之前的键名和值，所以要设置新的键名
//https://ddong345:8080/article/details?name=dong&age=1&#bar
myURL.searchParams.set('name','mei')
console.log(myURL.href)
//https://ddong345:8080/article/details?name=mei&age=1&#bar

• toString():返回搜索参数组成的字符串

//https://ddong345:8080/article/details?name=dong#bar
myURL.searchParams.toString()
//==>name=dong

使用这个方法时，在各个浏览器会不一样，比如在ie11就不支持，需要兼容

下载
npm install url-search-params-polyfill --save
//Main.js添加代码
import 'url-search-params-polyfill';

以上大概就是这样滴，欢迎各位博主指教，相互学习
😀😀😀😀😀