JavaScript 获取 URL 参数

配图源自 Freepik

前面会介绍一些乱七八糟的东西，请忍耐一下。

URI、URL、URN

提到这三个货，循例丢一张表出来，麻烦用余光一扫而过就算了。

简称	全称	中文名称
URI	Universal Resource Identifier	统一资源标志符
URL	Universal Resource Locator	统一资源定位符
URN	Universal Resource Name	统一资源名称

网上充斥着类似上面表格中的名词解释，还有诸如以下的言论：

URI 包括 URL 和 URN。
URL 可以是 URI，但 URI 不一定是 URL，它可能是 URN。

说真的，这些解释说了跟没说一样，我相信 99% 的人都知道但没用。还记得此前写过一篇文章介绍三者的定义及区别，现在再回头看感觉简直是浪费时间了。

以下这句话，从某乎看到的，我觉得简单明了：

原来 URI 包括 URL 和 URN ，后来 URN 没流行起来，导致几乎目前所有的 URI 都是 URL。

因此，在 99.9% 的情况下，我们看到的 URI 全都是 URL，没必要理会 URN 了。而我们在浏览器中输入的 Web 地址，指的就是 URL（Identifying resources on the Web）。

URL

由于本节部分内容节选自 Node.js API 之 URL，因此会多了一些额外的内容。

网址字符串是包含多个有意义组件的结构化字符串。下面提供了 WHATWG 和旧版 API 之间的比较。在网址 'https://user:pass@sub.example.com:8080/p/a/t/h?query=string#hash' 上方显示的是由旧版 url.parse() 返回的对象的属性。下方则是 WHATWG URL 对象的属性。

图中 "" 行中的所有空格都应被忽略。它们纯粹是为了格式化。

对于浏览器（前端）而言，注意几点：

在 Web 浏览器中应以 WHATWG 网站标准为准。
WHATWG 网址的 origin 属性包括 protocol 和 host，但不包括 username 或 password。
关于 username 或 password 虽然一些浏览器可能仍然支持它，但它可能已经从相关的 Web 标准中删除，可能正在被删除，或者可能只是为了兼容性目的而保留。

因此，我们来简化一下：

三、获取 URL 参数

前面铺垫了那么多，其实本文的话题是获取 URL 上的参数，不废话了。

参数通常存在于 window.location.search 和 window.location.hash 上，考虑一些特殊情况就好了：

const queryUrlValue = key => {
  if (!key) return ''

  // 考虑到 URL 上存在中文编码问题，
  // 例如：http%3A%2F%2Fui.cn%3F%E4%BD%9C%E8%80%85%3D%E8%B6%8A%E5%89%8D%E5%90%9B
  const url = decodeURIComponent(window.location.href)

  // 匹配正则表达式
  const re = new RegExp(`[?|&]${key}=([^&]+)`, 'g')
  const matchResult = re.exec(url)
  if (!matchResult) return ''

  let value = matchResult[1]
  if (value.includes('#')) {
    // 考虑到匹配结果可能含 hash 值，比如：
    // http://ui.cn?state=1#/mine
    // http://ui.cn?state=1/#/mine
    const separator = value.includes('/#') ? '/#' : '#'
    value = value.split(separator)[0]
  }

  return value
}

删掉注释部分，如下：

const queryUrlValue = key => {
  if (!key) return ''

  const url = decodeURIComponent(window.location.href)
  const re = new RegExp(`[?|&]${key}=([^&]+)`, 'g')
  const matchResult = re.exec(url)

  if (!matchResult) return ''

  let value = matchResult[1]
  if (value.includes('#')) {
    const separator = value.includes('/#') ? '/#' : '#'
    value = value.split(separator)[0]
  }

  return value
}

已收录在 toFrankie/javascript-utils，里面还有其他一些实用的方法哦！

更新（2023.02.26）

都 2023 年了，可以考虑使用 URLSearchParams 了。

// https://example.com/?name=Jonathan&age=18
const params = new URLSearchParams(document.location.search.substring(1))
const name = params.get('name') // is the string "Jonathan"
const age = parseInt(params.get('age'), 10) // is the number 18

The end.

toFrankie / blog