JavaScript中JSON对象属性与URL参数之间相互转换实现
文章目录
- JavaScript中JSON对象属性与URL参数之间相互转换实现
- [1. JSON对象转换为URL参数字符串](#1. JSON对象转换为URL参数字符串)
-
- [1. URLSearchParams](#1. URLSearchParams)
- [2. Object.keys](#2. Object.keys)
- [2. URL参数字符串转换为JSON对象:](#2. URL参数字符串转换为JSON对象:)
1. JSON对象转换为URL参数字符串
1. URLSearchParams
URLSearchParams: 详细文档 URLSearchParams接口参考
URLSearchParams
接口定义了一些实用的方法来处理 URL 的查询字符串。一个实现了
URLSearchParams
的对象可以直接用在for...of
结构中,以键/值对在查询字符串中出现的顺序对它们进行迭代,例如下面两行是等价的:JSCopy to Clipboard
jsfor (const [key, value] of mySearchParams) { } for (const [key, value] of mySearchParams.entries()) { }
具体转换案例如下
js
<script>
//obj对象
const obj = {
page: 1,
size: 10,
sort: 'id',
order: 'desc',
other: null
};
//方式1:
let urlParams = new URLSearchParams(obj).toString()
console.log(urlParams)
//输出如下:
//page=1&size=10&sort=id&order=desc&other=null
</script>
2. Object.keys
如下
jsonToQueryString
函数将 JSON 对象转换为 URL 参数字符串。
- 遍历 JSON 对象的属性,编码键和值;
- 然后拼接成形如
key1=value1&key2=value2
的格式。
js
<script>
function jsonToQueryString(json) {
return Object.keys(json)
.map(key => encodeURIComponent(key) + '=' + encodeURIComponent(json[key]))
.join('&');
}
// 示例
const json = { name: 'zhangSan', age: 30, city: 'beijing' };
const queryString = jsonToQueryString(json);
console.log(queryString);
//输出如下
// name=zhangSan&age=30&city=beijing
</script>
2. URL参数字符串转换为JSON对象:
如下
queryStringToJson
函数将 URL 参数字符串转换为 JSON 对象。
- 首先对 URL 参数字符串做处理;
- 然后使用
JSON.parse()
方法将其转换为 JSON 对象。
js
<script>
function queryStringToJson(queryString) {
return JSON.parse('{"' + decodeURI(queryString).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}');
}
// 示例
const queryStr = "name=zhangSan&age=30&city=beijing";
const queryStrToJson = queryStringToJson(queryStr);
console.log(queryStrToJson);
//输出如下
/*{
"name": "zhangSan",
"age": "30",
"city": "beijing"
}*/
</script>
"name": "zhangSan",
"age": "30",
"city": "beijing"
}*/
</script>