如何将对象序列化为 URL 查询参数列表？

IT技术 javascript
2021-02-04 05:48:30

在不知道 JavaScript 的键的情况下Object，我怎么能像...

var obj = {
   param1: 'something',
   param2: 'somethingelse',
   param3: 'another'
}

obj[param4] = 'yetanother';

...进入...

var str = 'param1=something&param2=somethingelse&param3=another&param4=yetanother';

……？

6个回答

没有依赖项的一行：

new URLSearchParams(obj).toString();
// OUT: param1=something&param2=somethingelse&param3=another&param4=yetanother

将它与内置的 URL 一起使用，如下所示：

let obj = { param1: 'something', param2: 'somethingelse', param3: 'another' }
obj['param4'] = 'yetanother';
const url = new URL(`your_url.com`);
url.search = new URLSearchParams(obj);
const response = await fetch(url);

[编辑 2020 年 4 月 4 日]：null值将被解释为字符串'null'。

注意：在节点 < 10 中，您需要导入/要求，例如， const { URLSearchParams } = require("url");
2021-03-14 05:48:30
这是一英里的最佳答案
2021-03-18 05:48:30
小心这个和空值。
2021-03-27 05:48:30
您应该检查您的目标浏览器是否支持URLSearchParams，例如 IE11 不支持：caniuse.com/?search=URLSearchParams
2021-03-28 05:48:30
@HonsaStunna 我从未想过将多维对象放在 URL 参数上，通常为此使用 POST 和 JSON
2021-04-06 05:48:30

如果您使用 jQuery，这就是它用于参数化 GET XHR 请求的选项的内容：

$.param( obj )

http://api.jquery.com/jQuery.param/

大多数其他分析器都不适用于嵌套对象。这个可以解决问题。谢谢！
2021-04-02 05:48:30

一个优雅的：（假设您正在运行现代浏览器或节点）

var str = Object.keys(obj).map(function(key) {
  return key + '=' + obj[key];
}).join('&');

和 ES2017 等效：（感谢 Lukas）

let str = Object.entries(obj).map(([key, val]) => `${key}=${val}`).join('&');

注意：encodeURIComponent()如果键/值不是 URL 编码的，您可能想要使用。

我只会改变 + encodeURIComponent(obj[key])
2021-03-14 05:48:30
这是在 ES2015 中 Object.entries(obj).map(([key, val]) => `${key}=${val}`).join('&')
2021-03-15 05:48:30
要对 ES2015 答案进行编码，请更改为： =${encodeURIComponent(val)}
2021-03-19 05:48:30
如果对象有任何嵌套的属性，这就会崩溃。
2021-03-25 05:48:30
@JacobValenta 这不是问题的一部分
2021-04-08 05:48:30 
var str = "";
for (var key in obj) {
    if (str != "") {
        str += "&";
    }
    str += key + "=" + encodeURIComponent(obj[key]);
}

示例：http : //jsfiddle.net/WFPen/

obj[key] 不应该包含在 encodeURIComponent() 中吗？如果“somethingelse”是“something&else”会发生什么？
2021-03-15 05:48:30
谢谢@aroth！我只接受@patrick 上面的回答而不是你的（它们本质上是一样的），因为我相信他是第一个。我非常感谢您的回复。
2021-03-18 05:48:30
@bobsoap：我认为@aroth 有点领先于我，所以我会给@aroth 打勾，所有其他事情都是平等的。
2021-03-20 05:48:30
我很确定这不应该是公认的答案，或者这个 stackoverflow 线程上的几乎所有答案。主要原因是除了下面可能的@zac 的答案之外，没有一个可以满足正确编码这个对象，{ a:[ 1, 2 ], b:{ c:3, d:[ 4, 5 ], e:{ x:[ 6 ], y:7, z:[ 8, 9 ] }, f:true, g:false, h:undefined }, i:[ 10, 11 ], j:true, k:false, l:[ undefined, 0 ], m:"cowboy hat?" };看起来@UnLoCo 建议一个 NPM 库也可以工作，它将功能 param 方法从 jQuery 中拉出来，使其成为独立的。
2021-03-21 05:48:30
为什么不使用递归函数？
2021-03-25 05:48:30

ES2017 方法

Object.entries(obj).map(([key, val]) => `${key}=${encodeURIComponent(val)}`).join('&')
也不适用于嵌套对象
2021-03-19 05:48:30
ES2017，技术上。
2021-03-21 05:48:30
这需要对键和值进行编码。请参阅有关 encodeURIComponent 的其他答案。
2021-03-21 05:48:30
我修复了该encodeURIComponent部分，但嵌套对象部分仍然成立。尽管如果您想序列化一个对象并将其作为参数发送到您的密钥，它仍然可以工作
2021-04-03 05:48:30
其它你可能感兴趣的问题
上一篇清除 Google Chrome 中的 javascript 控制台 下一篇等到一个带有动画的函数完成，直到运行另一个函数