【JavaScript】查询字符串(URL参数)、json 格式字符串的相关处理

【JavaScript】查询字符串(URL参数)、json 格式字符串的相关处理

一. 查询字符串(URL参数)的处理

**查询字符串（URL参数）**是指在URL的末尾加上用于向服务器发送信息的字符串（变量）。将“？”放在URL的末尾，然后再加上“参数＝值”，想加上多个参数的话，使用“&”。以这个形式，可以将想要发送给服务器的数据添加到URL中。

格式：

key=value&key1=value1&key2=value2

(1) 查询字符串转为对象

// 要转换的查询字符串
var str = "name=zs&age=18";
// 封装一个函数
function parseQueryString(str) {
    // 准备一个接收的空对象
    var obj = {};
    // 将每一个数值分隔开
    var s1 = str.split('&');
    // console.log(s1); // ['name=zs', 'age=18']
    // 将数组中的值依次放入对象中
    s1.forEach(function(item) {
        // 将每个数组里面的字符串按照等号分割开,得到若干个数组
        var t = item.split('=');
        var key = t[0];
        var value = t[1];
        obj[key] = value;
    });
    return obj;
}
// 调用函数
var result = parseQueryString(str);
console.log(result); // {name: 'zs', age: '18'}

(2) 将对象转换为查询字符串

// 要转换的对象：{name:'ls',age:20}
var obj = {
    name: 'ls',
    age: 20
};
// 封装一个函数
function queryStringify(obj) {
    // 创建一个空字符串
    var str = '';
    // 对对象进行遍历
    for (key in obj) {
        // 利用模板字符串进行拼接
        str += `${key}=${obj[key]}&`;
        // console.log(str); // name=ls&age=20&
    }
    // 将最后多一个&，截取掉
    str = str.slice(0, -1);
    return str;
}
var str = queryStringify(obj);
console.log(str); // name=ls&age=20

二. json 格式字符串相关处理

json字符串格式：

'{"name": "zs", "age": "18"}'
'[ {"name": "zs"} , {"age": "18"} ]'

特点：

1. 对象中的key和value都要用双引号包裹起来
2. 数字 和 布尔 可以不包裹
3. 不接受函数

(1) json格式转为js格式

方法：JSON.parse(json格式字符串)

var s = '{"name": "zs", "age": "18"}'
var str = JSON.parse(s);
console.log(str); // {username: 'zs', age: '18'}

(2) js格式转为 json格式

方法：JSON.stringify(js格式字符串);

var str = {
    name: 'ls',
    age: 18
}
var res = JSON.stringify(str);
console.log(res); // {"name":"ls","age":18}