无法获取以#开头的URL搜索参数值的问题求助

问题描述 #

嘿各位大佬，我碰到个小问题想请教下～我现在尝试获取URL里的搜索参数，name键的值能正常拿到，但value键的值怎么都获取不到，我猜这和它值开头的#符号脱不了干系。

先给大家看看我的URL：
http://localhost:3000/all/?name=Color&value=#03FFF7

这是我写的代码：

const queryString = window.location.search

if (queryString) {
  const urlParams = new URLSearchParams(queryString)
  const name = urlParams.get('name')
  const value = urlParams.get('value')

  console.log(`This is the ${value}`)
  this.setState({ name, nameValue: value })
}

运行后value始终拿不到预期的#03FFF7，有没有朋友能帮我分析下原因，再给个解决办法呀？

解决方案 #

哈哈这个问题我之前踩过坑！原因其实很直白：#在URL里是锚点（Fragment）的专属标识，浏览器会自动把#及其后面的内容从查询参数（也就是window.location.search对应的部分）里剥离出来，当成页面内的锚点定位内容。所以你的value=#03FFF7里，#03FFF7根本没被算进搜索参数里，自然用URLSearchParams拿不到。

给你两种解决思路，按需选：

1. 能控制URL生成（优先推荐）

在传递参数的时候，对特殊字符做URL编码，#对应的编码是%23。你可以用encodeURIComponent()方法处理参数值，示例代码如下：

// 生成参数时先编码
const paramValue = "#03FFF7";
const encodedValue = encodeURIComponent(paramValue);
// 生成合法的URL
const targetUrl = `http://localhost:3000/all/?name=Color&value=${encodedValue}`;

这样生成的URL会变成http://localhost:3000/all/?name=Color&value=%2303FFF7，此时URLSearchParams就能正确解析出value的值为#03FFF7了。

2. 无法修改传入的URL

如果没办法调整URL的生成方式，那可以尝试结合window.location.hash来补全参数：

const queryString = window.location.search;
let urlParams = new URLSearchParams(queryString);
let name = urlParams.get('name');
let value = urlParams.get('value');

// 如果value为空，尝试从hash中补全
if (!value && window.location.hash) {
  // 去掉hash开头的#，再拼回value
  value = `#${window.location.hash.slice(1)}`;
}

console.log(`This is the ${value}`);
this.setState({ name, nameValue: value });

不过这种方式要注意，如果URL本身就带有合法的锚点（比如页面内跳转标记），就会出现冲突，所以还是优先用第一种编码的方式更稳妥。

备注：内容来源于stack exchange，提问作者Obonyo