Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

使用 URLSearchParams 解析 URL 的查询字符串 #12

Open
maomao1996 opened this issue Sep 30, 2020 · 0 comments
Open

使用 URLSearchParams 解析 URL 的查询字符串 #12

maomao1996 opened this issue Sep 30, 2020 · 0 comments
Labels
JavaScript JavaScript 相关

Comments

@maomao1996
Copy link
Owner

maomao1996 commented Sep 30, 2020

使用 URLSearchParams 解析 URL 的查询字符串

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

语法和使用

// const url = 'https://github.com/search?o=desc&q=URLSearchParams&s=stars&type=Repositories'
const url = 'o=desc&q=URLSearchParams&s=stars&type=Repositories'

// 实例化
const searchParams = new URLSearchParams(url)

// toString 返回搜索参数组成的字符串并进行编码
searchParams.toString() // o=desc&q=URLSearchParams&s=stars&type=Repositories

// 获取指定搜索参数的第一个值
searchParams.get('q') // "URLSearchParams"
searchParams.get('maomao') // null

// 获取指定搜索参数的所有值,返回是一个数组。
searchParams.getAll('type') // ["Repositories"]
searchParams.getAll('maomao') // []

// 判断是否存在指定的搜索参数
searchParams.has('q') // true
searchParams.has('maomao') // false

// 插入一个新搜索参数,添加相同 key 不会替换之前的
searchParams.append('year', '1996')
searchParams.append('year', '1996')
searchParams.toString() // "o=desc&q=URLSearchParams&s=stars&type=Repositories&year=1996&year=1996"

// 设置和搜索参数相关联的值,如果之前存在将会删除
searchParams.set('name', 'maomao')
searchParams.get('name') // "maomao"
searchParams.set('name', 'maomao1996')
searchParams.get('name') // "maomao1996"

// 删除指定名称的所有搜索参数
searchParams.delete('year')
searchParams.toString() // "o=desc&q=URLSearchParams&s=stars&type=Repositories"

// 将键/值对进行排序并返回 undefined 排序顺序是根据键的 Unicode
searchParams.set('a', '1')
searchParams.toString() // "o=desc&q=URLSearchParams&s=stars&type=Repositories&a=1"
searchParams.sort()
searchParams.toString() // "a=1&o=desc&q=URLSearchParams&s=stars&type=Repositories"

// 返回一个 iterator,遍历器允许遍历对象中包含的所有键
for (const key of searchParams.keys()) {
  console.log(key)
}

// 返回一个 iterator,遍历器允许遍历对象中包含的所有值
for (const value of searchParams.values()) {
  console.log(value)
}

// 返回一个 iterator,遍历器允许遍历对象中包含的所有值
for (const [key, value] of searchParams.entries()) {
  console.log(key, value)
}

冷知识

query 上的 "" key

const searchParams = new URLSearchParams('?=maomao')
searchParams.get('') // "maomao"

MDN 详细介绍点这里

相关 polyfill

[email protected] 未包含 URLSearchParams

@maomao1996 maomao1996 added the JavaScript JavaScript 相关 label Mar 2, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
JavaScript JavaScript 相关
Projects
None yet
Development

No branches or pull requests

1 participant