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

【问题标题】：How to create query parameters in Javascript?如何在 Javascript 中创建查询参数？
【发布时间】：2010-09-11 19:26:46
【问题描述】：

有什么方法可以创建 查询参数 以在 JavaScript 中执行 GET 请求？

就像在 Python 中一样，您有 urllib.urlencode()，它接收一个字典（或两个元组的列表）并创建一个类似 'var1=value1&var2=value2' 的字符串。

【问题讨论】：

反问：url - How can I get query string values in JavaScript? - Stack Overflow

标签： javascript url urlencode

【解决方案1】：

给你：

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);

【讨论】：

使用for迭代时，使用hasOwnProperty保证互操作性。
@troelskn，好点子......虽然在这种情况下，必须有人扩展 Object.prototype 来破坏它，这是一个非常糟糕的开始。
@Shog9 为什么这是个坏主意？
@Cesar，见：stackoverflow.com/questions/3832617/…**
投反对票，因为我不知道此解决方案是否符合规范并且始终有效。更喜欢现在可用的标准 URLSearchParams。 OP请考虑撤消这个过时的答案。

【解决方案2】：

URLSearchParams 增加了对浏览器的支持。

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

const searchParams = new URLSearchParams(data);

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

Node.js 提供了querystring 模块。

const querystring = require('querystring');

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

const searchParams = querystring.stringify(data);

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

【讨论】：

绝对是干净和现代的方法。以后也可以随意拨打searchParams.append(otherData)
URLSearchParams 会将空格解析为“+”而不是“%20”。例如，new URLSearchParams({ abc: 'a b c' }).toString()result 在'abc=a+b+c'
2021 年怎么没有更标准化的方式来实现这一目标？例如，仅当searchParams 不为空时才添加?。

【解决方案3】：

功能性

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

【讨论】：

不错的一个！ .map() 已经在 JavaScript 1.6 中实现，所以几乎所有的浏览器，甚至是老版本的浏览器都支持它。但正如你可以猜到的那样，除了 IE 9+ 之外，IE 并没有。但别担心，有一个解决方法。来源：developer.mozilla.org/en-US/docs/JavaScript/Reference/…
var data = { bloop1: true, bloop2: "something" }; var url = "https://something.com/?"; var params = encodeData(data); var finalUrl = url + params; // Is this the right use? 应该产生https://www.something.com/?bloop1=true&bloop2=something ?
@DylanHunt：是的……
这还不够。 encodeData({foo:{bar:123}}) 返回 foo=%5Bobject%20Object%5D ，但正确的返回值为 foo%5Bbar%5D=123

【解决方案4】：

Zabba 在对当前接受的答案的评论中提供了一个对我来说是最佳解决方案的建议：使用jQuery.param()。

如果我在原始问题中的数据上使用jQuery.param()，那么代码很简单：

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

变量params 将是

"var1=value&var2=value"

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

【讨论】：

【解决方案5】：

ES2017 (ES8)

使用Object.entries()，它返回对象的[key, value] 对数组。例如，对于{a: 1, b: 2}，它将返回[['a', 1], ['b', 2]]。只有 IE 不支持（也不会）。

代码：

const buildURLQuery = obj =>
      Object.entries(obj)
            .map(pair => pair.map(encodeURIComponent).join('='))
            .join('&');

示例：

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

结果：

"name=John&gender=male"

【讨论】：

【解决方案6】：

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

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

阅读作品：

var name = Arg("name");

或得到全部：

var params = Arg.all();

如果您关心?query=true 和#hash=true 之间的区别，那么您可以使用Arg.query() 和Arg.hash() 方法。

【讨论】：

【解决方案7】：

这应该可以完成工作：

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

【讨论】：

我后来意识到这实际上是下面@manav 回复的一个稍微不同的版本。但无论如何，对于 ES6 语法来说，它仍然是可取的。
首先，您没有对密钥进行编码。此外，您应该使用encodeURIComponent() 而不是encodeURI。 Read about the difference.

【解决方案8】：

如果您使用的是Prototype，则有Form.serialize

如果您使用的是jQuery，则有Ajax/serialize

不过，我不知道有任何独立的函数可以实现这一点，但是如果您当前没有使用库，谷歌搜索它会发现一些有希望的选项。但是，如果你不是，你真的应该这样做，因为它们是天堂。

【讨论】：

jQuery.param() 获取对象并将其转换为 GET 查询字符串（此函数更好地匹配问题）。

【解决方案9】：

就像重温这个将近 10 年前的问题。在这个现成的编程时代，最好的办法是使用依赖管理器 (npm) 设置您的项目。那里有一个完整的库行业，可以对查询字符串进行编码并处理所有边缘情况。这是最受欢迎的之一 -

https://www.npmjs.com/package/query-string

【讨论】：

非常不具体的答案。

【解决方案10】：

对打字稿的一点修改：

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

【讨论】：

【解决方案11】：

我改进了shog9`s处理数组值的功能

function encodeQueryData(data) {
    const ret = [];
    for (let d in data) {
        if (typeof data[d] === 'object' || typeof data[d] === 'array') {
            for (let arrD in data[d]) {
                ret.push(`${encodeURIComponent(d)}[]=${encodeURIComponent(data[d][arrD])}`)
            }
        } else if (typeof data[d] === 'null' || typeof data[d] === 'undefined') {
            ret.push(encodeURIComponent(d))
        } else {
            ret.push(`${encodeURIComponent(d)}=${encodeURIComponent(data[d])}`)
        }

    }
    return ret.join('&');
}

示例

let data = {
  user: 'Mark'
  fruits: ['apple', 'banana']
}

encodeQueryData(data) // user=Mark&fruits[]=apple&fruits[]=banana

【讨论】：

这是一个改进，是的，但仍然不够：encodeQueryData({foo:{bar:123}}) 返回 foo[]=123，但正确的返回值应该是 foo%5Bbar%5D=123

【解决方案12】：

通过使用queryencoder，您可以拥有一些不错的选项，例如自定义日期格式化程序、嵌套对象并决定val: true 是否只是value 或value=true。

const { encode } = require('queryencoder');

const object = {
    date: new Date('1999-04-23')
};

// The result is 'date=1999-04-23'
const queryUrl = encode(object, {
    dateParser: date => date.toISOString().slice(0, 10)
});

【讨论】：

【解决方案13】：

这个thread 指向一些用于在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;
}

【讨论】：

encodeURIComponent 会处理这个问题，并且不会错误地将 + 用于空格。