Vue.js 中字符串转对象时，首选 JSON.parse() 适用于标准 JSON 字符串。对于非标准 JSON 字符串，可根据格式采用正则表达式和 reduce 方法或解码 URL 编码字符串后再处理。根据字符串格式选择合适的方法，并注意安全性与编码问题，以避免 bug。
Vue.js 中字符串转对象：别被 JSON.parse() 蒙蔽了双眼！
很多新手，甚至一些老手，在 Vue.js 里遇到字符串转对象，第一反应就是 JSON.parse()。这没错，但它就像一把瑞士军刀，好用是好用，但你得知道它啥时候好用，啥时候会伤到自己。 这篇文章，咱们就掰开了揉碎了，好好聊聊字符串转对象这事儿，不光教你用 JSON.parse()，更重要的是，教你避免它带来的坑。
首先，得明确一点，JSON.parse() 只适用于标准 JSON 字符串。 什么叫标准 JSON 字符串？ 就是符合 JSON 语法规范的字符串，比如 "{\"name\":\"John Doe\",\"age\":30}"。 它要是长这样 "name:John Doe,age:30"，JSON.parse() 就直接给你报错，吐出一堆让你头大的错误信息。
那遇到非标准 JSON 字符串咋办？ 这得看字符串的具体格式了。 如果字符串是键值对用逗号分隔，值用等号连接，比如 "name=John Doe,age=30"， 那 JSON.parse() 就歇菜了。 这时，你可以试试用正则表达式和 reduce 方法：
<code class="javascript">function stringToObject(str) {
const pairs = str.split(',');
return pairs.reduce((obj, pair) => {
const [key, value] = pair.split('=');
obj[key.trim()] = value.trim();
return obj;
}, {});
}
let myString = "name=John Doe, age=30, city=New York";
let myObject = stringToObject(myString);
console.log(myObject); // Output: { name: 'John Doe', age: '30', city: 'New York' }
</code>这段代码先用逗号分割字符串，然后用 reduce 方法迭代每个键值对，用等号分割键和值，最后构建一个对象。 注意，这里我加了 .trim() 去除空格，这在处理用户输入时非常重要，能避免很多不必要的麻烦。
立即学习“前端免费学习笔记（深入）”；
这方法虽然灵活，但对字符串格式依赖性强。 要是字符串格式稍微有点变化，代码就得改。 而且，正则表达式的写法也比较繁琐，维护起来可能有点费劲。
再来看一个更复杂的情况，假如你的字符串是类似于查询参数的形式，比如 name=John%20Doe&age=30&city=New%20York。 这玩意儿，直接用上面的方法就跪了，因为 %20 是空格的 URL 编码。 这时，你需要先解码，然后再用类似上面的方法处理：
<code class="javascript">function urlStringToObject(str) {
const pairs = decodeURIComponent(str).split('&');
return pairs.reduce((obj, pair) => {
const [key, value] = pair.split('=');
obj[key] = value;
return obj;
}, {});
}
let urlString = "name=John%20Doe&age=30&city=New%20York";
let urlObject = urlStringToObject(urlString);
console.log(urlObject); // Output: { name: 'John Doe', age: '30', city: 'New York' }</code>这里我使用了 decodeURIComponent() 解码 URL 编码的字符串。 记住，处理用户输入或来自服务器的字符串时，一定要注意安全性和编码问题。 别小看这些细节，它们常常是 bug 的来源。
所以，选择哪种方法，取决于你的字符串格式。 JSON.parse() 适用于标准 JSON 字符串，而自定义函数则适用于其他格式的字符串。 记住，清晰的代码和严谨的处理才能避免那些让人抓狂的 bug。 别忘了测试你的代码，各种情况都要考虑到，这样才能保证你的程序稳如泰山！
