在开发前端页面时候，经常会用到跳转页面，在页面进行交互的时候，经常会用到参数携带，我们一般处理方法就是在路由的后面携带我们需要传递的参数。

URL拼接即字符串拼接，在最开始的时候，我们对字符串的拼接都是用+号进行拼接的

var name = "张三"
console.log("hello my name is " + name) //  hello my name is 张三

后面有了模版字符串``，就省去了+号这个繁写的操作

var name = "张三"
console.log(`hello my name is ${name}`) //  hello my name is 张三

但无轮是+号还是`` 处理起来比较麻烦，当字符串中含有大量变量时候，不仅阅读起来比较困难，遇到问题排查也比较费力，后续的维护更加困难。

于是在JS中就引入了URL构造器，可以更加简单优雅的处理url。
URL接口用于解析、构造、规范化和编码URL。其构造的实例支持若干属性和方法，可以用来读写URL相关的属性值。

基本语法：

var myUrl = new URL(url, [base])

URL构造函数中传入的地址必须是绝对地址，非绝对地址就会报错，如果第一个参数是相对地址，那么后面的base必须有是觉得地址，若第一个是觉得地址，第二个可不传参

URL实例对象的属性和方法：

var url = new URL('https://www.zhangxinxu.com:80/wordpress/?s=url#comments');
var ftp = new URL('ftp://username:password@192.168.1.1/path/file');

基本方法和属性：

hash：URL地址中的锚链值，包含字符串’#‘，例如这里url.hash的返回值是’#comments’。
host：URL地址中host主机地址，包括协议端口号，这里url.host的返回值是’www.zhangxinxu.com:80’。
hostname：URL地址中主机名称，不包括端口号，这里url.hostname的返回值是’www.zhangxinxu.com’。
href：完全的URL地址。
origin [只读]：返回URL地址的来源，会包含URL协议，域名和端口。这里url.origin的返回值是’https://www.zhangxinxu.com:80’。
password：返回URL地址域名前的密码。ftp协议中比较常见。这里ftp.password的返回值是’password’。
username：返回URL地址域名前的用户名。ftp协议中比较常见。这里ftp.username的返回值是’username’。
pathname：返回URL中的目录+文件名。例如这里ftp.pathname的返回值是’/path/file’。
port：返回URL地址中的端口号。例如这里url.port的返回值是’80’，ftp.port的返回值是’‘。
protocol：返回URL地址的协议，包括后面的冒号’:‘。例如这里url.protocol的返回值是’https:’，ftp.protocol的返回值是’ftp:‘。
search：返回URL地址的查询字符串，如果有参数，则返回值以问号’?‘开头。例如这里url.search的返回值是’?s=url’。
searchParams：返回一个URLSearchParams对象，可以调用URLSearchParams对象各种方法，对查询字符串进行非常方便的处理

与参数相关的操作

基本用法：

const baseUrl = "https://www.raise3d.com"
const detail= "detail"
const url = new URL(`paramsSpec/${detail}`, baseUrl)
console.log(url) // "https://www.raise3d.com/paramsSpec/detail"

给url进行添加参数

const baseUrl = "https://www.raise3d.com"
const detail = "detail"
let url = new URL(`paramsSpec/${detail}`, baseUrl)
url.searchParams.append("factory", "F1")
url.searchParams.append("type", "AD830")
console.log(url) //"https://www.raise3d.com/paramsSpec/detail?factory=F1&type=AD830"

给url进行添加参数时，是以一个数组作为参数添加到url中

const baseUrl = "https://www.raise3d.com"
let url = new URL(baseUrl)
const paramsArr = ['apple', 'banana', 'orange'];
url.searchParams.set("fruit", paramsArr.join(","))
console.log(url.toString())  
//https://www.raise3d.com/?fruit=apple%2Cbanana%2Corange
//这里的%2C是表示, 是编码进行转义了

获取url参数

const urlString = "https://www.raise3d.com/paramsSpec/detail?factory=F1&type=AD830"
let url = new URL(urlString)
console.log(url.searchParams.get("factory")) //F1
console.log(url.searchParams.get("type"))  //AD830

获取url参数, 获取以数组模式拼接的参数

const urlString = "https://www.raise3d.com/paramsSpec/detail?fruit=apple,orange,banana"
let url = new URL(urlString)
console.log(url.searchParams.get("fruit")) // apple,orange,banana

处理多个同名参数
例如：?array=value1&array=value2&array=value3，可以使用getAll 来获取参数

const baseUrl = "https://www.raise3d.com"
let url = new URL(baseUrl)//添加多个同名参数
const paramsArr = ['apple', 'banana', 'orange'];
paramsArr.forEach(v => url.searchParams.append("fruit", v))
console.log(url.toString()) // https://www.raise3d.com/?fruit=apple&fruit=banana&fruit=orange// 获取多个同名参数
console.log(url.searchParams.get("fruit")) //apple
console.log(url.searchParams.getAll("fruit")) //["apple","banana","orange"]

除了使用URL构造器处理url相关的事宜外，还可以使用URLSearchParams构造函数，与URL构造函数有异曲同工之秒
URLSearchParams 是一个 JavaScript 内置类，用于处理 URL 查询字符串（query string）的解析和构建。

其方法和URL基本类似，大概简单的列举下：
1、URLSearchParams.append(name, key)：添加新的键值对作为查询参数
2、URLSearchParams.delete(name)：删除已存在的查询参数
3、URLSearchParams.entries()：返回查询参数们的迭代器对象，我们可以迭代该迭代器对象获得所有的键值对
4、URLSearchParams.forEach(callback)：此方法可以遍历查询对象
5、URLSearchParams.get(name)：返回指定关键字对象的值
6、URLSearchParams.getAll(name)：以数组形式返回所有当前查询关键字对应的值
7、URLSearchParams.has(name)：返回布尔值，true或者false，是否包含某个查询关键字
8、URLSearchParams.keys()：返回一个迭代器对象，允许迭代该对象中所有的关键字
9、URLSearchParams.values()：返回一个迭代器对象，允许迭代该对象中所有的关键字值
10、URLSearchParams.set(name, value)：设置参数值，有则替换，无则加冕
11、URLSearchParams.sort()：方法将此对象中包含的所有键/值对就地排序，并返回undefined。排序顺序根据键的Unicode码位
12、URLSearchParams.toString()：把URLSearchParams对象转换成查询字符串

当然对url参数的处理除了用以上方法之外，还可以用正则进行匹配。例如：
使用正则表达式提取参数：

const url = "https://example.com/page?name=John&id=123&category=tech";
const paramsRegex = /[?&]([^=#]+)=([^&#]*)/g;
const paramsRegex2 = /([^?&]+)=([^?&=]*)/g
console.log(paramsRegex.exec(url)) //["?name=John","name","John"]
console.log(paramsRegex2.exec(url)) //["name=John","name","John"]