如何将 JavaScript 对象编码为查询字符串

查询字符串是 URL 的一部分,用于将数据传输到 Web 应用程序或者后端数据库。
我们需要查询字符串,因为 HTTP 协议在设计上是无状态的。

查询字符串由查询参数组成,并将数据发送到服务器。
在本教程中,我们建议使用快速而简单的方法来将 Javascript 对象编码为查询字符串。

encodeURIComponent()

encodeURIComponent() 函数对统一资源标识符 (URI) 组件进行编码。
它用一个、两个、三个或者四个转义序列替换某些字符的每个实例,并表示字符的 UTF-8 编码。

新的 ES6 格式通过以下方式将对象编码为查询字符串:

serialize = function (obj) {
  let str = [];
  for (let p in obj)
    if (obj.hasOwnProperty(p)) {
      str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
    }
  return str.join("&");
}
console.log(serialize({
  prop1: "hi there",
  prop2: "100%"
}));
//prop1=hi%20there&prop2=100%25

URLSearchParams()

URLSearchParams 接口指定实用方法来处理 URL 的查询字符串:

const searchParams = new URLSearchParams();
const search = {
  prop1: "hi there",
  prop2: "100%"
};
Object.keys(search).forEach(key => searchParams.append(key, search[key]));
console.log(searchParams.toString());

或者通过将搜索对象传递给构造函数,如下所示:

const obj = {
  prop1: "hi there",
  prop2: "100%"
};
const params = new URLSearchParams(obj).toString();
console.log(params);

URLSearchParams 接口的 toString() 方法返回适合在 URL 中使用的查询字符串。
并且接口的 append() 方法添加指定的键或者值对作为新的搜索参数。

日期:2020-06-02 22:16:17 来源:oir作者:oir