URL 和 URLSearchParams以前我们要对地址栏中的URL地址进行分析处理，需要自己进行字符串分析。实际上，

在实际开发中，我们最常打交道的就是URL，而URL地址本质上就是一串特殊的字符串

而我们经常需要获取URL中的相关信息，直接去操作字符串是十分不方便的

所以浏览器为我们提供了URL对象和URLSearchParams对象以简化我们操作URL的方式

URLSearchParams

// 字符串头部的？是可以省略的
const queryStr = '?name=Klaus&age=25'
const queryArr = [['name', 'klaus'], ['age', 25]]
const queryObj = {
  name: 'Klaus',
  age: 25
}

// 可以通过URLSearchParams构造函数来创建查询对象实例
// 可以传入的参数类型为查询字符串，表示查询字符串的二维数组或用于描述查询字符串的对象
const searchParams1 = new URLSearchParams(queryStr)
const searchParams2 = new URLSearchParams(queryStr)
const searchParams3 = new URLSearchParams(queryObj)
console.log(searchParams1, searchParams2, searchParams3)

实例方法

方法	说明
append	添加新的键值对作为查询参数如果存在重复的键，会新增值而不会覆盖
delete	删除已存在的查询参数
get	返回指定关键字对象的值
getAll	以数组形式返回所有当前查询关键字对应的值
has	返回布尔值，`true`或者`false`，是否包含某个查询关键字
entries	返回查询参数们的迭代器对象，我们可以使用for-of 迭代该迭代器对象获得所有的键值对
keys	返回一个迭代器对象，允许迭代该对象中所有的关键字
values	返回一个迭代器对象，允许迭代该对象中所有的关键字值
forEach	此方法可以遍历查询对象
set	新增属性和属性值，有则覆盖，无则添加
sort	按照key的Unicode码顺序进行升序排序
toString	将URLSearchParams实例对象转换为对象的查询字符串

const searchStr = 'name=Klaus&age=23'
const searchParams = new URLSearchParams(searchStr)

// searchParams.entries方法 可以将 URLSearchParams实例转换为 可迭代对象
// 而在对URLSearchParams实例对象进行for-of方法的时候，会自动调用URLSearchParams实例的entries方法
// for (const [key, value] of searchParams) === for (const [key, value] of searchParams.entries)
for (const [key, value] of searchParams) {
  console.log(key, value)
}

const searchStr = 'name=Klaus&age=23'
const searchParams = new URLSearchParams(searchStr)

// URLSearchParams实例的entries形式和对象形式之间的相互转换

// URLSearchParams实例 -> entries
const entries = searchParams.entries()
console.log(entries)
// => URLSearchParams Iterator { [ 'name', 'Klaus' ], [ 'age', '23' ] }

// entries -> object
const obj = Object.fromEntries(entries)
console.log(obj) // => { name: 'Klaus', age: '23' }

// object -> URLSearchParams实例
console.log(new URLSearchParams(obj))
// => URLSearchParams { 'name' => 'Klaus', 'age' => '23' }

URL

URL接口用于解析、构造、规范化和编码URL。其构造的实例支持若干属性和方法，可以用来读写URL相关的属性值

// 参数1 - 相对地址或者绝对地址
// 需要设置base参数，如果是绝对地址，则会忽略base设置
// 如果url是URL实例对象，会自动调用toString方法转成字符串并作为参数值传入

// 参数2 - 如果URL地址是相对地址，则需要这个参数，作为baseUrl
// 如果url是URL实例对象，会自动调用toString方法转成字符串并作为参数值传入
// 默认值为空字符串
const base = 'https://www.example.com'
console.log(new URL('foo', base).href) // => https://www.example.com/foo
console.log(new URL('foo', base).toString()) // => https://www.example.com/foo

// URL在生成URL实例时，会自动将url和base进行拼接
let base = 'https://www.example.com/study/a/b/c'

console.log(new URL('sp/icon', base).href) // => https://www.example.com/study/a/b/sp/icon
console.log(new URL('./sp/icon', base).href) // => https://www.example.com/study/a/b/sp/icon

console.log(new URL('../sp/icon', base).href) // => https://www.example.com/study/a/sp/icon

// url链接地址以/结尾，所以上一层目录为study/a/b
console.log(new URL('../sp/icon', base + '/').href) // => https://www.example.com/study/a/b/sp/icon

// 如果第一个参数以/开头，那么就表示是绝对路径，其会替换原本的pathname
console.log(new URL('/sp/icon', base).href) // => https://www.example.com/sp/icon

// 没有协议的url认为是相对地址，协议取自base地址
// 生成的url地址如果没有pathname的时候，会自动以/结尾
console.log(new URL('//image.example.com', 'https://www.example.com').href) // => https://image.example.com/

// url为绝对地址，base参数被忽略
console.log(new URL('https://image.example.com', base).href); // => https://image.example.com/

属性

属性名	属性值	示例
href	完整的URL地址	www.example.com:8080/study/a/b/c…
host	主机名 + 端口号	www.example.com:8080
hostname	主机名	www.example.com
port	端口号	8080
protocol	协议以 : 结尾	https:
origin	协议 + 主机名 + 端口号唯一一个只读属性	www.example.com:8080
pathname	URL中的目录+文件名	/study/a/b/c
search	以?开头的查询字符串	?name=Klaus
searchParams	查询字符串对应的URLSearchParams实例对象

实例方法

URL有两个实例方法 toString()和toJSON()

他们的功能是一致的，都是直接返回URL实例对象的href属性

静态方法

方法名	功能
createObjectURL	可以把File，Blob或者MediaSource对象变成一个一个唯一的blob URL 返回值是一个URL对象
revokeObjectURL	撤消之前使用`URL.createObjectURL()`创建的URL对象

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas"></canvas>

    <script>
      const canvasEl = document.getElementById('canvas')
      
      // 将canvas对象 转换为以base64地址形式表示的链接
      const dataUrl = canvasEl.toDataURL()
      let blobUrl

      canvasEl.toBlob(blob => {
        // 将blob对象转换为对应的blob协议url
        blobUrl = URL.createObjectURL(blob)

        console.log(new URL(blobUrl))
      })
    </script>
  </body>
</html>