JavaScript 中 get 请求 query 参数含 ‘&’ 怎么办 encode

矫情吗；* 2022-11-01 10:54 258阅读 0赞

> 积跬步 至千里

**目录**

今日问题

解决办法 转义 使用 URL 编码

其他字符含义

--------------------

###  ###

### 今日问题 ###

项目中医院名称导入不标准，包含了 ‘&’ 符号，想通过搜索接口查询看看，发现 likeName = '&',拼接好的 URL 在请求时被吃掉了，导致没有达到搜索目的。

> const likeName = "&"
> 
> let url = "xxxx?likeName="+likeName+'&flag='+xxx

以上我们希望的是likeName = '&', 然后在拼接后的URL 进行请求解析时，& 被当做了参数的分隔符 ，没有被当做参数，两个的时候也是当做了分隔符，因此导致likenName 搜索值空

### 解决办法 转义 使用 URL 编码 ###

**将搜索参数进行转义，为了更标准，将搜索的内容进行encode URL 编码**，因为搜索内容中可能不仅有 & 特殊符号的影响，其他特殊符号不编码也可能会在服务器端受到限制而报错。

转义可以选择 encodeURIConmpnent

### 其他字符含义 ###

<table style="width:618px;"> 
 <thead> 
  <tr> 
   <th style="width:117px;">字符</th> 
   <th style="width:363px;">特殊字符的含义</th> 
   <th style="width:137px;">URL编码</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:117px;">+</td> 
   <td style="width:363px;">URL 中+号表示空格</td> 
   <td style="width:137px;">%2B</td> 
  </tr> 
  <tr> 
   <td style="width:117px;">空格</td> 
   <td style="width:363px;">URL中的空格可以用+号或者编码</td> 
   <td style="width:137px;">%20</td> 
  </tr> 
  <tr> 
   <td style="width:117px;">/</td> 
   <td style="width:363px;">分隔目录和子目录</td> 
   <td style="width:137px;">%2F</td> 
  </tr> 
  <tr> 
   <td style="width:117px;">?</td> 
   <td style="width:363px;">分隔实际的 URL 和参数</td> 
   <td style="width:137px;">%3F</td> 
  </tr> 
  <tr> 
   <td style="width:117px;">%</td> 
   <td style="width:363px;">指定特殊字符</td> 
   <td style="width:137px;">%25</td> 
  </tr> 
  <tr> 
   <td style="width:117px;">#</td> 
   <td style="width:363px;">表示书签</td> 
   <td style="width:137px;">%23</td> 
  </tr> 
  <tr> 
   <td style="width:117px;">&amp;</td> 
   <td style="width:363px;">URL 中指定的参数间的分隔符</td> 
   <td style="width:137px;">%26</td> 
  </tr> 
  <tr> 
   <td style="width:117px;">=</td> 
   <td style="width:363px;">URL 中指定参数的值</td> 
   <td style="width:137px;">%3D</td> 
  </tr> 
 </tbody> 
</table>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70]: /images/20221024/d6f10f26ad324a07be4c4d17aa6e2ee0.png