目录
URL构造函数
作用
创建并返回指定url对象
语法
new URL(url,[base])
- url(必填): 若是url 是相对 URL,则会将 base 用作基准 URL,如果 url 是绝对 URL,则无论参数base是否存在,都将被忽略
- base: 是一个表示基准 URL 的 DOMString,在 url 是相对 URL 时,它才会起效。如果未指定,则默认为 ‘’
- 举例说明
// 由于第一个参数为相对URL,会将第二个参数作为基路径 // https://www.baidu.com/s?wd=2222 new URL('/s?wd=2222', 'https://www.baidu.com')
// 由于第一个参数为绝对URL,会将第二个参数忽略 // https://www.baidu.com new URL('https://www.baidu.com','https://www.baidu.com')
返回值
返回值为一个URL对象
包含以下属性
[1]包含location对象的属性;
const urlObj = new URL('/s?wd=2222&id=111', 'https://www.baidu.com')
console.log( urlObj )
// 1. 获取完整的url
console.log(urlObj.href) // https://www.baidu.com/s?wd=2222&id=111
// 2. 获取完整域名(带有协议)origin
console.log(urlObj.origin) // https://www.baidu.com
// 3. 获取域名(不带协议)host
console.log(urlObj.host) // www.baidu.com
// 4. 获取协议名 protocol
console.log(urlObj.protocol) // https:
// 5. 获取域名后面拼接的url
console.log(urlObj.pathname) // /s
// 6. 获取参数 ‘?参数名=参数值&参数名=参数值’
urlObj.search.split('?')[1].split('&').forEach(item=>{
const arr = item.split('=')
const obj={}
obj[arr[0]] = arr[1]
console.log('params', obj) // {wd: '2222'} {id: '111'}
})
[2]searchParams属性
- 只读属性
- 返回值为 URLSearchParams对象
- 不会直接显示属性
- 通过点语法也获取不到
- 需要通过指定方法获取
- 获取指定属性
const urlObj = new URL('/s?wd=2222&id=111', 'https://www.baidu.com') const { searchParams } = urlObj // 通过get方法获取仅能获取第一个指定属性的值 const id = searchParams.get('id') // 111 // 通过getAll方法获取可以获取所有的指定属性的值 const ids = searchParams.getAll('id') // ['111','222']
- 判断属性是否存在
const urlObj = new URL('/s?wd=2222&id=111', 'https://www.baidu.com') const { searchParams } = urlObj console.log(searchParams.has('id')) // true console.log(searchParams.has('obj')) // false
- 获取指定属性
构造函数的特定方法
URL.createObjectURL
-
语法
-
URL.createObjectURL(object)
-
object参数可以是一个 File对象 或 Blob对象; 不可是远程链接!
-
URL.createObjectURL('http://test2.clipworks.com:8666/api/thirdSite/downloadTemplate') // 报错 Failed to execute 'createObjectURL' on 'URL'
-
-
-
返回值
URL.revokeObjectURL
-
作用:释放一个之前已经存在的、通过调用
URL.createObjectURL()
创建的 URL 对象 -
语法
-
URL.revokeObjectURL(object)
-
object:通过调用
URL.createObjectURL()
创建的 URL 对象
-
应用
[1]获取url携带参数
-
(1)通过location对象获取参数(繁琐)
-
const { search } = location const paramsArr = search.split('?')[1].split('&') const id = paramsArr[0].split('=')[1] // 111 const name = paramsArr[1].split('=')[1] // 222
-
-
(2)通过创建URl对象获取参数(简单)
-
const { searchParams } = new URL(window.location) const id = searchParams.get('id') // 111 const name = searchParams.get('name') // 222
-
[2]创建本地url
const xhr = new XMLHttpRequest()
xhr.open('POST','https://file2.clipworks.com/4c217acc09226795a7ebb8461ddf548f/20220726/469c1056-749d-4c47-819e-35f91c70e163')
xhr.responseType = 'blob'
xhr.send()
xhr.onload = function(){
const url = URL.createObjectURL(xhr.response)
console.log('结果', url) // 本地url
}
[3]为每个文件生成一个uuid
// uuid是独一无二的
const blobUrl = URL.createObjectURL(new Blob())
file[0].uuid = blobUrl.slice(blobUrl.lastIndexOf('/') + 1)
// 主动释放内存
URL.revokeObjectURL(blobUrl)