如何将JavaScript字典转换为编码的URL字符串？

Question

我想要得到类似以下的内容：

?key=value?key=value

从一个 JavaScript 字典中取出

{
    key:value,
    key:value
}

- ocoutts

---

我认为你的意思是 ?key=value&key=value :) - Nick Radford

这个回答解决了你的问题吗？如何将一个对象序列化为URL查询参数列表？ - jfunk

Answer 1

如果使用jQuery，你可以使用jQuery.param：

var params = { width:1680, height:1050 };
var str = jQuery.param( params );
// str is now 'width=1680&height=1050'

否则，这里有一个可以完成此操作的函数：

function serialize(obj) {
  var str = [];
  for(var p in obj)
     str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
  return str.join("&");
}
alert(serialize({test: 12, foo: "bar"}));

- Alex Turpin

---

现在请使用 var str = $.param( params );。 - Melroy van den Berg

Answer 2

现在有一种更简单的方法：

URLSearchParams 的 API 在 这里

var url = new URL('https://example.com/');
url.search = new URLSearchParams({blah: 'lalala', rawr: 'arwrar'}); 
console.log(url.toString()); // https://example.com/?blah=lalala&rawr=arwrar

- jfunk

---

你可以使用toString方法来转换参数： var url = new URLSearchParams(params).toString(); - contmp

根据 https://caniuse.com/#search=URLSearchParams，IE11不支持URLSearchParams。 - patb

Answer 3

同样适用于ECMAScript 2016：

let params = { width:1680, height:1050 };
// convert object to list -- to enable .map
let data = Object.entries(params);
// encode every parameter (unpack list into 2 variables)
data = data.map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`);
// combine into string
let query = data.join('&');
console.log(query); // => width=1680&height=1050

或者，作为一行代码：

let params = { width:1680, height:1050 };
Object.entries(params).map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`).join('&');
// => "width=1680&height=1050"

- Artem Skoretskiy

---

这个有效，谢谢！你能解释一下那些倒置的重音符号和美元符号吗？我以前没见过。 - kloddant

@kloddant 它与 ' 或 " 相同，只是您可以在其中嵌入表达式。例如：text ${1+1} // 将输出 "text 2"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Template_literals - Mourad Qqch