前面会介绍一些乱七八糟的东西，请忍耐一下。
一、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/Some-JavaScript-File，里面还有其他一些实用的方法哦！
The end.
