Javascript 为什么要使用HttpParams对象在angular中的请求中使用查询参数？

我注意到在angular中有两种向HTTP请求添加查询参数的方法。我不确定在我的申请中采用哪种方法

1.将查询参数作为字符串附加到URL，如下所示：

let value1='...', value2='...';
const url = `${this.baseUrl}?param1=${value1}&param2=${value2}`;
this.http.get(url).subscribe(...);

2.使用object添加查询参数，并在进行API调用时使用，如下所示：

let baseUrl='...', value1='...', value2='...';
let params = new HttpParams()
               .set('param1', value1);
               .set('param2', value2);
this.http.get(baseUrl, {params: params}).subscribe(...);

---

我想知道这两种方法中哪一种更好，为什么？或者哪种方案最适合这些方法？

如果在发送参数之前有一些复杂的逻辑，HttpParams会提供一组方便的函数（例如追加）

它本身也执行“？”和“&”逻辑，这意味着如果未设置param1，则无需担心它，例如：

const params = new HttpParams();
if (param1) {
  params.set('param1', param1);
}
if (param2) {
   // Here with a string concatenation you would need to do "if first param then ? else &"
   params.set('param2', param2);
}

---

然而，这两个语法是有效的，选择可能会被拒绝？

如果

value1

或

value2

字段中有特殊字符或空格，该怎么办？那么这两种方法会给出相同的结果吗？我知道HttpParams会自动对您的值进行编码，我不确定http对字符串的行为（如果它编码与否），您应该尝试一下，并看到不同之处如果

${this.baseUrl}

更改为自身，包括url参数或哈希字符串，则代码#1中断。