js 获取(接收)地址栏参数值的方法

获取地址栏参数值是前端开发中常见的操作，JavaScript 提供了多种方法实现这个功能。下面是两种比较常用的方法：

方法一：使用 URLSearchParams

URLSearchParams 是一个 Web API，可以方便地操纵 URL 的查询参数。在大部分浏览器上都有支持。

首先，我们可以通过 location.search 获取 URL 查询参数。location.search 是一个以 ? 开始的字符串，包括了 URL 中的查询参数部分。

例如，对于下面这个 URL：

http://example.com/?id=123&name=John

我们可以使用以下代码来获取 URL 查询参数：

const params = new URLSearchParams(location.search)
params.get('id') // '123'
params.get('name') // 'John'

其中，URLSearchParams 的 get() 方法可以获取指定参数名的参数值。

使用 URLSearchParams 的好处是可以自动处理多值参数。例如，对于下面这个查询参数：

http://example.com/?fruits=apple&fruits=orange&fruits=banana

我们使用 URLSearchParams 的方式获取 fruits 的值为：

const params = new URLSearchParams(location.search)
params.getAll('fruits') // ['apple', 'orange', 'banana']

方法二：使用正则表达式

我们可以通过正则表达式来获取 URL 查询参数。

由于查询参数的格式是 key1=value1&key2=value2 的形式，我们可以通过正则表达式按照这种格式提取出参数的 key 和 value。

function getUrlParam(name) {
  const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i');
  const result = window.location.search.substr(1).match(reg);
  if (result === null) {
    return null;
  }
  return decodeURIComponent(result[2]);
}

使用这个函数，我们可以获取 URL 查询参数：getUrlParam('id') // '123'

注意，因为参数值是可能包含特殊字符的，例如中文或者空格，我们需要使用 decodeURIComponent() 函数对参数值进行解码。

以上是两种常用的方法，他们的实现原理不同，各有优缺点。具体情况下可以根据自己需要进行选择。