URL 和 URLSearchParams

·  阅读 275
URL 和 URLSearchParams

URL

这是我参与8月更文挑战的第30天,活动详情查看:8月更文挑战

const url = new URL('https://www.example.com:8080/mock/foo/?s=url#foo')

console.log(url)
/*
  => {
    href: "https://www.example.com/mock/foo?s=url", --- 完成的URL地址
    hash: '#foo' --- 包含字符串'#'的锚点值
    host: "www.example.com:8080" --- 含端口号的主机地址
    hostname: "www.example.com" --- 不含端口号的主机地址
    
    origin: "https://www.example.com:8080", --- 包含协议,域名和端口的URL地址 
    																				--- 只读属性(修改不报错,但是没有任何效果 --- 静默修改)
    
    pathname: "/mock/foo", --- url的路径 (转换后会移除最后的斜杠)
    port: "8080", --- 端口号, 不设置使用默认端口号的时候,会返回空字符串
    protocol: "https:", --- 协议,包括后面的冒号
    search: "?s=url", --- 查询字符串, 没有查询字符串的时候返回空串,有的时候返回以?开头的字符串 
    searchParams: url对应的urlSearchParams对象,方便我们对查询字符串进行处理
  }
*/
复制代码

基本使用

let url = new URL(url, [base])
复制代码
参数类型说明
urlstring相对地址或者绝对地址
如果是相对地址,需要设置base参数
如果是绝对地址,则会忽略base参数
basestring使用这个参数作为相对计算的基础地址
如果URL地址是相对地址,那么这个参数是必须的
如果不设置该参数,则会按照空字符串进行处理
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

// 向上一层URL层级深度
console.log(new URL('../sp/icon', base).href) 
// => https://www.example.com/study/a/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/sp/icon
复制代码
let base = 'https://www.example.com'

// 没有协议的url认为是相对地址,协议取自base地址
console.log(new URL('//image.example.com', 'http://www.example.com').href)  
// => http://image.example.com

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
复制代码

静态方法

  • URL.createObjectURL(object)
    • 可以把File,Blob等对象变成一个唯一的blob URL
  • URL.revokeObjectURL(objectURL)
    • 撤消之前使用URL.createObjectURL()创建的URL对象

URLSearchParams

URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。

可以通过URLSearchParams接口来实现查询字符串和对象之间的相互转换

从而使查询字符串的操作变得十分的便捷,不需要自己分割或正则处理

URLSearchParams构造函数可以传递三种类型的参数:

URL查询字符串

// 传入的查询字符串既可以以?开头,也可以不以问号开头
let params = new URLSearchParams('?name=Klaus&age=23')
console.log(params.get('age')) // => 23
复制代码

数组形式

// 参数为数组,每一个的key和value构成对应的子数组
let params = new URLSearchParams([['name', 'Klaus'], ['age', 23]])
console.log(params.get('age')) // => 23
复制代码

对象形式

let params = new URLSearchParams({ name: 'Klaus', age: 23 })
console.log(params.get('age')) // => 23
复制代码

append

append() 插入一个指定的键/值对作为新的搜索参数。

即使原本的key已经存在,也不会覆盖,而是重新新增一个同名key值

let params = new URLSearchParams()

params.append('foo', 'bar')
params.append('foo', 'baz')

console.log(params.get('foo')) // => bar
console.log(params.getAll('foo')) // => ['bar', 'baz']
复制代码

delete

从搜索参数列表里删除指定的搜索参数及其对应的值

如果一个key对应多个value的时候,所有的value都会被移除

let params = new URLSearchParams()

params.append('foo', 'bar')
params.append('foo', 'baz')

params.delete('foo')
console.log(params.get('foo')) // => null
复制代码

get

获取指定搜索参数的第一个值

多个相同键名,只取第一个

没搜索到的,返回null

let params = new URLSearchParams()

console.log(params.get('foo')) // => null
复制代码

getAll

获取指定搜索参数的所有值

如果有多个值,返回数组

没有值,返回空数组

let params = new URLSearchParams()

params.append('foo', 'bar')
params.append('foo', 'baz')

console.log(params.getAll('baz')) // => null
console.log(params.getAll('foo')) // => ['bar', 'baz']
复制代码

has

返回 Boolean 判断是否存在此搜索参数所对应的值

let params = new URLSearchParams()

params.append('foo', 'bar')
params.append('foo', 'baz')

console.log(params.has('baz')) // => false
console.log(params.has('foo')) // => true
复制代码

set

设置一个搜索参数的新值,假如原来有多个值将删除其他所有的值

let params = new URLSearchParams()

params.set('foo', 'bar')
params.set('foo', 'baz')

console.log(params.get('foo')) // => 'baz'
console.log(params.getAll('foo')) // => ['baz']
复制代码

toString

返回搜索参数组成的字符串,可直接使用在URL上

let params = new URLSearchParams()

params.set('name', 'Klaus')
params.set('age', 24)

// 输出的结果是没有 ?的
console.log(params.toString()) // => name=Klaus&age=24
复制代码

forEach

常规forEach()方法

let params = new URLSearchParams()

params.set('name', 'Klaus')
params.set('age', 24)

params.forEach((v, k) => {
  console.log('key', k)
  console.log('value', v)
})
复制代码

sort

按键名进行字典排序

let params = new URLSearchParams()

params.set('name', 'Klaus')
params.set('age', 24)

params.sort()
console.log(params.toString()) // => age=24&name=Klaus
复制代码

keys

返回包含了键/值对的所有键名的iterator对象

let params = new URLSearchParams()

params.set('name', 'Klaus')
params.set('age', 24)

for (let iter of params.keys()) {
  console.log(iter)
  /*
   =>
     name
     age
 */
}
复制代码

values

返回包含了键/值对的所有的iterator对象

let params = new URLSearchParams()

params.set('name', 'Klaus')
params.set('age', 24)

for (let iter of params.values()) {
  // 使用迭代器返回的数据都是字符串类型的
  // 所以这里的age会被转换为字符串类型
  console.log(iter)
  /*
   =>
     Klaus
     24
 */
}
复制代码

entrires

返回包含了键/值对的所有键值对的iterator对象

let params = new URLSearchParams()

params.set('name', 'Klaus')
params.set('age', 24)

for (let iter of params.entries()) {
  // 使用迭代器返回的数据都是字符串类型的
  // 所以这里的age会被转换为字符串类型
  console.log(iter)
  /*
    =>
      ['name', 'Klaus']
      ['age', '24']
  */
}
复制代码
分类:
前端