两种URL(字符串)的拼接方式

 方法一：字符串拼接

这种方法使用加号 (+) 运算符来拼接字符串。

const url1 = '/mobile/sweep?productionLine=' + this.productionLine +
             '&roomNumber=' + this.roomNumber +
             '&productionLineId=' + this.productionLineId +
             '&roomId=' + this.roomId;

方法二：模板字符串

这种方法使用ES6的模板字符串 (template literals) 来拼接字符串。它更易读和维护，尤其是当你有多个变量时。

const url2 = `/systemHonglida/getMateriaInfoByMateriaId?factoryId=${params.factoryId}` +
             `&lineId=${params.lineId}` +
             `&materiaId=${params.materiaId}` +
             `&startTime=${params.startTime}` +
             `&endTime=${params.endTime}`;

改进建议

尽管两种方法都有效，模板字符串（方法二）通常更具可读性。可以选择一种一致的方式来拼接URL字符串。此外，使用encodeURIComponent对参数值进行编码是一个好的实践，确保URL参数正确编码。

你提供了两种不同的URL字符串拼接方式。下面详细解释了这两种方法，并对其进行了改进以提高可读性和维护性。

结合使用模板字符串和编码

下面是改进后的代码示例：

// 方法一改进
const url1 = `/mobile/sweep?productionLine=${encodeURIComponent(this.productionLine)}` +
             `&roomNumber=${encodeURIComponent(this.roomNumber)}` +
             `&productionLineId=${encodeURIComponent(this.productionLineId)}` +
             `&roomId=${encodeURIComponent(this.roomId)}`;

// 方法二改进
const url2 = `/systemHonglida/getMateriaInfoByMateriaId?factoryId=${encodeURIComponent(params.factoryId)}` +
             `&lineId=${encodeURIComponent(params.lineId)}` +
             `&materiaId=${encodeURIComponent(params.materiaId)}` +
             `&startTime=${encodeURIComponent(params.startTime)}` +
             `&endTime=${encodeURIComponent(params.endTime)}`;

这样可以确保URL参数值在包含特殊字符时不会导致问题，并且代码可读性和可维护性更高。