Js 将参数推送到 URL - Javascript

在 Web 开发中，将参数推送到 URL 是很常见的操作。当你想要把某些参数传递给某个 URL 的时候，可以采用在 URL 后面加参数的方式，例如：

http://example.com?param1=value1&param2=value2

JavaScript 通过拼接字符串的方式就可以实现这个操作。下面我们来看几种常见的拼接字符串的方式。

1. 使用字符串拼接

最常见的拼接 URL 参数的方式就是使用字符串拼接。下面是一个例子：

var url = 'http://example.com?';

var param1 = 'value1';
var param2 = 'value2';

url += 'param1=' + param1 + '&param2=' + param2;

console.log(url); // 输出 http://example.com?param1=value1&param2=value2

这种方式虽然简单，但是当参数数量较多时，拼接起来会比较麻烦，容易出错。

2. 使用数组 join 方法拼接

JavaScript 中有一种很方便的方法，可以使用数组的 join 方法来拼接字符串。下面是一个例子：

var url = 'http://example.com?';

var params = [
  'param1=value1',
  'param2=value2'
];

url += params.join('&');

console.log(url); // 输出 http://example.com?param1=value1&param2=value2

这种方式看起来比较清爽，并且当参数数量变多时也很容易维护。

3. 使用 URLSearchParams 对象

在 ECMAScript 6 中，可以使用 URLSearchParams 对象来处理 URL 参数。这个方式非常好用，不需要自己写拼接代码。下面是一个例子：

var params = new URLSearchParams();

params.append('param1', 'value1');
params.append('param2', 'value2');

var url = 'http://example.com?' + params.toString();

console.log(url); // 输出 http://example.com?param1=value1&param2=value2

这种方式看起来最为优雅，是推荐的方式。

在前端开发中，将参数推送到 URL 是个很常见的操作，但是要注意在拼接字符串时要防止 XSS 攻击。在拼接时最好使用 encodeURIComponent 来对参数值进行编码。