如何在Javascript中创建查询参数？

有没有办法在JavaScript中创建用于执行GET请求的查询参数

就像在Python中一样，它接受一个字典（或两个元组的列表）并创建一个字符串，如

'var1=value1&var2=value2'

如果使用的是

如果您正在使用，则有

虽然我不知道有什么独立的功能可以实现这一点，但是如果你目前没有使用库，谷歌搜索它会发现一些有希望的选项。如果你不是，你真的应该这样做，因为他们是天堂。

这指向了一些php中转义URL的代码。有

escape（）

和

unescape（）

可以完成大部分工作，但是您需要添加一些额外的东西

function urlencode(str) {
str = escape(str);
str = str.replace('+', '%2B');
str = str.replace('%20', '+');
str = str.replace('*', '%2A');
str = str.replace('/', '%2F');
str = str.replace('@', '%40');
return str;
}

function urldecode(str) {
str = str.replace('+', ' ');
str = unescape(str);
return str;
}

给你：

function encodeQueryData(data) {
   const ret = [];
   for (let d in data)
     ret.push(encodeURIComponent(d) + '=' + encodeURIComponent(data[d]));
   return ret.join('&');
}

用法：

const data = { 'first name': 'George', 'last name': 'Jetson', 'age': 110 };
const querystring = encodeQueryData(data);

---

功能性

function encodeData(data) {
    return Object.keys(data).map(function(key) {
        return [key, data[key]].map(encodeURIComponent).join("=");
    }).join("&");
}   

我们刚刚发布了一个项目，旨在一劳永逸地解决这个问题。传统上很难做到，但现在你可以做到：

var querystring = Arg.url({name: "Mat", state: "CO"});

阅读作品：

var name = Arg("name");

或者得到全部：

var params = Arg.all();

如果你关心

？query=true

和

#hash=true

之间的区别，那么你可以使用

Arg.query（）

和

Arg.hash（）

方法。

在对当前接受的答案的评论中提供了一个建议，对我来说，这是最好的解决方案：使用

如果我对原始问题中的数据使用

jQuery.param（）

，那么代码就是：

const params = jQuery.param({
    var1: 'value',
    var2: 'value'
});

变量

params

将

"var1=value&var2=value"

---

有关更复杂的示例、输入和输出，请参阅文档。

对typescript的一些修改：

  public encodeData(data: any): string {
    return Object.keys(data).map((key) => {
      return [key, data[key]].map(encodeURIComponent).join("=");
    }).join("&");
  }

---

我想重温一下这个差不多有10年历史的问题。在这个现成编程的时代，您最好使用依赖关系管理器（

npm

）来设置项目。有一个完整的家庭图书馆行业，对查询字符串进行编码并处理所有的边缘案例。这是比较流行的一种-

---

这应该可以完成以下工作：

const createQueryParams = params => 
      Object.keys(params)
            .map(k => `${k}=${encodeURI(params[k])}`)
            .join('&');

例如：

const params = { name : 'John', postcode: 'W1 2DL'}
const queryParams = createQueryParams(params)

结果:

name=John&postcode=W1%202DL

ES2017（ES8） 使用，返回对象的

[键，值]

对数组。例如，对于

{a:1，b:2}

它将返回

[['a'，1]，'b'，2]

。它不受IE的支持（也不会）

代码： 例子： 结果: 具有越来越多的浏览器支持

const data = {
  var1: 'value1',
  var2: 'value2'
};

const searchParams = new URLSearchParams(data);

// searchParams.toString() === 'var1=value1&var2=value2'

js提供了这个模块

---

我改进了的函数来处理数组值

函数编码查询数据（数据）{
常数ret=[]；
for（让d输入数据）{
if（数据类型[d]==‘对象’| |数据类型[d]==‘数组’）{
for（让arrD输入数据[d]）{
ret.push（`${encodeURIComponent（d）}[]=${encodeURIComponent（data[d][arrD]）}`）
}
}else if（数据类型[d]=='null'| |数据类型[d]=='undefined'）{
返回推送（部件（d））
}否则{
ret.push（`${encodeURIComponent（d）}=${encodeURIComponent（data[d]）}`）
}
}
返回ret.join（'&'）；
}

例子

let数据={
用户：“标记”
水果：[‘苹果’、‘香蕉’]
}
encodeQueryData（数据）//用户=马克和水果[]=苹果和水果[]=香蕉

当使用

对

进行迭代时，请使用以确保互操作性。@troelskn，很好。。。虽然在这种情况下，必须有人扩展Object.prototype来破坏它，这是一个非常糟糕的想法。@Shog9为什么这是一个糟糕的想法？@Cesar，请参阅：*只是一个小细节，但ret可能是constencodeURIComponent处理这个问题，并且不会错误地将+用作空格。很好。map（）已在JavaScript 1.6中实现，因此几乎所有浏览器都支持它，即使是老浏览器也不例外。但正如你所猜测的那样，IE除了IE9+之外没有其他功能。但别担心，有一个解决办法。来源：

var data={bloop1:true，bloop2:“something”}；变量url=”https://something.com/?"; 变量参数=编码数据（数据）；var finalUrl=url+params；//这是正确的用法吗？

应该产生

https://www.something.com/?bloop1=true&bloop2=something

？@DylanHunt:是的……这还不够

encodeData（{foo:{bar:123}}）

返回

foo=%5Bobject%20Object%5D

，但正确的返回值应该是

foo%5Bbar%5D=123

jQuery.param（）获取对象并将其转换为查询字符串（此函数更好地匹配问题）.我后来意识到这实际上与下面@manav的回答略有不同。但是无论如何，对于ES6语法来说，它仍然是更好的选择。此外，您应该使用

encodeURIComponent（）

而不是

encodeURI

。绝对是干净和现代的方法。您也可以稍后自由调用

searchParams.append（otherData）

urlsearchparms将空白解析为“+”而不是“%20”。例如，

新的URLSearchParams（{abc:'abc'}）.toString（）

会导致

'abc=a+b+c'

非常不具体的答案。这是一个改进，是的，但仍然不够：

编码查询数据（{foo:{bar:123}）

返回

foo[]=123

，但正确的返回值应该是

foo%5Bbar%5D=123

buildURLQuery({name: 'John', gender: 'male'});

"name=John&gender=male"

const data = {
  var1: 'value1',
  var2: 'value2'
};

const searchParams = new URLSearchParams(data);

// searchParams.toString() === 'var1=value1&var2=value2'

const querystring = require('querystring');

const data = {
  var1: 'value1',
  var2: 'value2'
};

const searchParams = querystring.stringify(data);

// searchParams === 'var1=value1&var2=value2'