获取浏览器路径（URL）中指定名字的 query 参数的值的几种方法

获取浏览器路径（URL）中指定名字的 query 参数的值的几种方法

history 模式下

const getQueryByNameHistory = name => {
  return new URL(location.href).searchParams.get(name)
  // 或
  // return new URLSearchParams(location.search).get(name)
}

hash 模式下

const getQueryByNameHash = name => {
  return new URLSearchParams(location.hash.split('?')[1]).get(name)
}

判断是否是 hash 模式

const isHashMode = location.hash !== ''
// 或
const isHashMode = location.search === ''
// 或
const isHashMode = location.href.includes('#')
// 或
const isHashMode = location.href.indexOf('#') !== -1  // 或用 lastIndexOf

通用方法

const getQueryByName = name => {
  const queryList = location.href.split('?')[1]?.split('&') || []
  const curQuery = queryList.find(item => item.includes(name)) // 或用 filter 方法

  return curQuery?.split('=')[1] || ''
}

示例

// history 模式下，URL 地址为：https://developer.mozilla.org/zh-CN/?id=a1
getQueryByNameHistory('id') // "a1"
getQueryByNameHash('id') // null
getQueryByName('id') // "a1"

// hash 模式下，URL 地址为：https://developer.mozilla.org/zh-CN/#path?id=a1
getQueryByNameHistory('id') // null
getQueryByNameHash('id') // "a1"
getQueryByName('id') // "a1"

注意

• URL 在各环境下兼容性见文档详细
• URLSearchParams 在各环境下兼容性见文档详细
• getQueryByName 里面使用的部分语法和方法也是需要注意处理向下兼容的