对象转为字符串

芋圆社区 > 编程 > JavaScript > 对象转为字符串

701

2022-08-05

Hey、小怪兽

• 模拟数据：

const data = {
    name: '芋圆社区',
    url: 'inhami.com',
    logo: '芋圆logo.png'
}

• 要将这个对象传给后端，一般来说是转成JSON字符串的（因为这样好处理），用JSON.stringify：
```
console.log(JSON.stringify(data));
```
• 根据后端需要的数据，前端做相应的处理，之前碰到了后端需要这样的数据：
```
username=1&address=2&number=3
```
• 输入框，然后表单验证拿到了这样一个对象：

// antd4.x部分代码
form.validateFields().then(values => {
    // values就是{username:'1',address:'2',number:'3'}
    const paramStr = formateObjToParamStr(values)
    ......
}).catch(() => {});

• 写一个方法就可以了：

function formateObjToParamStr(obj) {
    const data = [];
    const keys = Object.keys(obj)
    const values = Object.values(obj)

    for (let i = 0; i < keys.length; i++) {
        data.push(`${keys[i]}=${values[i]}`);
    }
    return data.join('&');
}

• 完整代码（用我上面的芋圆社区的例子）：

// React函数式组件方法写法
const formateObjToParamStr = (obj) => {
    const sdata = [];
    const keys = Object.keys(obj)
    const values = Object.values(obj)

    for (let i = 0; i < keys.length; i++) {
        sdata.push(`${keys[i]}=${values[i]}`);
    }
    return sdata.join('&');
}

const data = {
    name: '芋圆社区',
    url: 'inhami.com',
    logo: '芋圆logo.png'
}

formateObjToParamStr(data) // name=芋圆社区&url=inhami.com&logo=芋圆logo.png

• 拓展考虑：

// 如果对象转字符串用于通过url下载或做请求
window.location.href = `${url}?${paramStr}`

// 考虑data里面携带& ? \ /等等
const data = {
    name: '&芋圆&社#区&',
    url: '?inh@ami?.com?',
    logo: '%芋圆$logo./png/'
}

上一篇：|| 运算符的坑

下一篇：call，apply，bind

对象转为字符串

回复