乐趣区

关于javascript:3分钟搞定获取-URL-查询参数值

jiezi

3 分钟搞定：获取 URL 查问参数值

在前端开发工作中，利用 URL 进行参数传递是一项非常常见的办法。在页面跳转时，通过 URL 携带某些信息，如状态、id、辨别页面起源的字段值等。因而，学习理解如何获取 URL 查问参数值是很重要的。

js 代码手撸

利用 JavaScript 代码手撸一个函数，对 URL 查问参数进行解析。这是形式灵便度高，能够进行更多个性化的操作。

const getSearchParams = (url) => {
  // 获取查问参数前的 ? 对应的索引地位
  const searchIndex = url.indexOf('?')
  // 截取出查问参数字符串，并依据 & 将其宰割成一个个 name=bruce 模式字符串组成的数组
  const searchParamsArray = url.slice(searchIndex + 1).split('&')
  // 遍历数组，组成查问参数对象
  return searchParamsArray.reduce((pre, cur) => {const [key, value] = cur.split('=')
    return {
      ...pre,
      // 须要应用 decodeURIComponent 对参数进行解码
      [key]: decodeURIComponent(value),
    }
  }, {})
}

// {name: 'bruce', type: 'blog'}
getSearchParams('https://www.example.com?name=bruce&type=blog')

利用 URLSearchParams

const searchParams = new URLSearchParams('name=bruce&type=blog')

searchParams.get('name') // 'bruce'
searchParams.get('type') // 'blog'
searchParams.has('type') // true

要把所有查问参数转换为对象，须要搭配应用 entries() 和 Object.fromEntries() 办法。

entries() 办法返回一个 iterator，还需进一步转换为对象。

const searchEntries = searchParams.entries();
Object.fromEntries(searchEntries) // {name: 'bruce', type: 'blog'}

须要留神的是，URLSearchParams 只能解析查问字符串，不能解析残缺的 URL。因而若要应用其解析查问参数，须要当时提取出 URL 地址的查问字符串。

const params = new URLSearchParams('https://www.example.com?name=bruce&type=blog')

params.get('name') // null
params.get('https://www.example.com?name') // 'bruce'

参考链接：MDN-URLSearchParams

利用 URL

const params = new URL('https://www.example.com?name=bruce&type=blog')
const searchParams = params.searchParams

searchParams.get('name') // 'bruce'
searchParams.get('type') // 'blog'

URL 可对 URL 地址进行更多维度的解析，其中 searchParams 和 URLSearchParams 返回的对象雷同。

参考链接：MDN-URL

退出移动版