Angular 2邮箱过滤时+号被转为空格，使用encodeURI无效求助

这个问题我之前帮不少开发者解决过，其实是HTTP请求参数编码的规则在搞鬼～

为什么+号会被转成空格？ #

在HTTP的application/x-www-form-urlencoded格式（这是浏览器发送表单请求时的默认格式，Angular的HttpClient默认也采用这个格式）里，+号被规定用来表示空格。所以当你直接把带+号的参数发出去时，浏览器/Angular会自动把它转成空格，后端收到的自然就是空格了。

而你用encodeURI没生效的原因很简单：encodeURI是用来编码整个URI的，它会保留一些属于URI结构的特殊字符（包括+号），不会对+号进行编码，所以用它处理参数值根本起不到作用。

正确的解决办法 #

你需要用encodeURIComponent来编码单个参数值，它会把所有非标准的URL字符（包括+号）转换成百分号编码格式，这样+号会被转成%2B，后端收到后就能正确解析回+号了。

Angular中的代码示例 #

比如你要设置过滤参数：

import { HttpClient, HttpParams } from '@angular/common/http';

// 你的过滤值，包含+号
const filterValue = 'user+test';

// 用encodeURIComponent编码参数值
const encodedFilter = encodeURIComponent(filterValue);

// 构建HttpParams并发送请求
const params = new HttpParams().set('filter', encodedFilter);
this.http.get('/api/your-endpoint', { params }).subscribe(response => {
  // 处理响应
});

这样发送出去的参数会是filter=user%2Btest，后端解析后就能得到原始的user+test了。

额外提示 #

如果你的参数里还有其他特殊字符（比如&、=、/这些），encodeURIComponent也能一并处理，确保参数传递的准确性，这也是处理单个请求参数时的最佳实践。

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