JavaScript 获取 URL 参数

Question

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

一、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 年了，可以考虑使用 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