JavaScript对象的查询字符串编码

是否有一个快速和简单的方法来编码JavaScript对象到字符串，我可以通过GET请求传递?

没有jQuery，没有其他框架-只有纯JavaScript:)

当前回答

如果你想将整个对象作为一个参数传递，例如，?filter={param1: "val1"， param2: "val2"}:

const serializeObject = (obj) => {
  let objStr = JSON.stringify(obj);

  objStr = objStr.replace(/\{/g, encodeURIComponent("{"));
  objStr = objStr.replace(/}/g, encodeURIComponent("}"));
  objStr = objStr.replace(/:/g, encodeURIComponent(":"));

  return objStr;
};

let res = serializeObject({param1: "val1", param2: "val2"});
console.log("serializeObject:", res); //%7B"param1"%3A"val1","param2"%3A"val2"%7D
console.log("serializeObject-decoded:", decodeURIComponent(res)); //{"param1":"val1","param2":"val2"}

2020-04-12 15:22:05

其他回答

以更好的方式做这件事。

它可以处理标准查询形式的递归对象或数组，如a=val&b[0]=val&b[1]=val&c=val&d[some key]=val。这是最后一个函数。

逻辑、功能

const objectToQueryString = (initialObj) => {
  const reducer = (obj, parentPrefix = null) => (prev, key) => {
    const val = obj[key];
    key = encodeURIComponent(key);
    const prefix = parentPrefix ? `${parentPrefix}[${key}]` : key;

    if (val == null || typeof val === 'function') {
      prev.push(`${prefix}=`);
      return prev;
    }

    if (['number', 'boolean', 'string'].includes(typeof val)) {
      prev.push(`${prefix}=${encodeURIComponent(val)}`);
      return prev;
    }

    prev.push(Object.keys(val).reduce(reducer(val, prefix), []).join('&'));
    return prev;
  };

  return Object.keys(initialObj).reduce(reducer(initialObj), []).join('&');
};

例子

const testCase1 = {
  name: 'Full Name',
  age: 30
}

const testCase2 = {
  name: 'Full Name',
  age: 30,
  children: [
    {name: 'Child foo'},
    {name: 'Foo again'}
  ],
  wife: {
    name: 'Very Difficult to say here'
  }
}

console.log(objectToQueryString(testCase1));
console.log(objectToQueryString(testCase2));

现场测试

展开下面的代码片段，在浏览器中验证结果-

需要考虑的事情。

它跳过函数、null和未定义的值它跳过空对象和数组的键和值。它不处理用new Number(1)或new String('my String ')创建的Number或String对象，因为没有人应该这样做

2021-02-23 09:10:06

使用Node.js v6.6.3

const querystring = require('querystring')

const obj = {
  foo: 'bar',
  baz: 'tor'
}

let result = querystring.stringify(obj)
// foo=bar&baz=tor

参考:查询字符串

2016-07-07 02:07:28

我为此写了一个包:object-query-string:)

它支持嵌套对象、数组、自定义编码函数等。它是轻量级的，不支持jquery。

// TypeScript
import { queryString } from 'object-query-string';

// Node.js
const { queryString } = require("object-query-string");

const query = queryString({
    filter: {
        brands: ["Audi"],
        models: ["A4", "A6", "A8"],
        accidentFree: true
    },
    sort: 'mileage'
});

filter[brands][]=Audi&filter[models][]=A4&filter[models][]=A6&filter[models][]=A8&filter[accidentFree]=true&sort=milage

2020-02-21 09:55:39

您也可以通过使用简单的JavaScript来实现这一点。

const stringData = '？name=Nikhil&surname=Mahirrao&age=30'; const newData= {}; stringData.replace（'？'， ''）.split（'&'）.map（（value） => { const temp = value.split（'='）; 新数据[温度[0]] = 温度[1]; }); console.log（'stringData： '+stringData）; console.log（'newData： '）; console.log（newData）;

2018-01-12 06:23:29

如果你想将整个对象作为一个参数传递，例如，?filter={param1: "val1"， param2: "val2"}:

const serializeObject = (obj) => {
  let objStr = JSON.stringify(obj);

  objStr = objStr.replace(/\{/g, encodeURIComponent("{"));
  objStr = objStr.replace(/}/g, encodeURIComponent("}"));
  objStr = objStr.replace(/:/g, encodeURIComponent(":"));

  return objStr;
};

let res = serializeObject({param1: "val1", param2: "val2"});
console.log("serializeObject:", res); //%7B"param1"%3A"val1","param2"%3A"val2"%7D
console.log("serializeObject-decoded:", decodeURIComponent(res)); //{"param1":"val1","param2":"val2"}

2020-04-12 15:22:05

JavaScript对象的查询字符串编码

推荐文章

最新文章

标签