如何将URL参数值赋值给JavaScript变量？

下面提供两种实用的方法来实现需求：

方法一：用URLSearchParams API（现代浏览器首选） #

这是浏览器原生提供的API，代码简洁易懂，处理URL参数非常方便：

解析当前页面的URL参数 #

// 提取当前页面的URL参数部分
const searchParams = new URLSearchParams(window.location.search);

// 获取id和value参数的值
const id = searchParams.get('id'); // 得到 '10'
const value = searchParams.get('value'); // 得到 'hello'

解析指定链接（比如你示例里的a标签） #

如果要解析某个<a>标签的href属性里的参数，可以这么写：

// 获取目标a标签的href
const targetLink = document.querySelector('a[href="page.php?id=10&value=\'hello\'"]');
const linkParams = new URLSearchParams(targetLink.search);

const id = linkParams.get('id'); // '10'
const value = linkParams.get('value'); // 'hello'

方法二：手动解析（兼容旧浏览器） #

如果需要兼容IE这类不支持URLSearchParams的旧浏览器，可以自己实现一个解析函数：

function extractUrlParams(url) {
  const paramObj = {};
  // 分离出URL里的参数部分（?之后的内容）
  const paramString = url.includes('?') ? url.split('?')[1] : '';
  // 把参数拆分成键值对数组
  const keyValuePairs = paramString.split('&');

  keyValuePairs.forEach(pair => {
    const [key, rawValue] = pair.split('=');
    // 解码URL编码的字符，避免乱码
    const decodedKey = decodeURIComponent(key);
    const decodedValue = rawValue ? decodeURIComponent(rawValue) : '';
    paramObj[decodedKey] = decodedValue;
  });

  return paramObj;
}

// 用法示例：解析你的示例链接
const exampleUrl = "page.php?id=10&value='hello'";
const params = extractUrlParams(exampleUrl);

const id = params.id; // '10'
const value = params.value; // "'hello'"（注意原链接里value带单引号，解析后会保留）

注意：如果是解析当前页面的URL，把exampleUrl换成window.location.href即可。

内容的提问来源于stack exchange，提问作者Jason Perry