JavaScript函数解析JSON时遭遇Uncaught SyntaxError异常求助

这个错误我太熟了！本质原因很简单：你正在尝试用JSON.parse()解析一个已经是JavaScript对象的值，而不是JSON字符串。

当你把一个JS对象传给JSON.parse()时，JS会先把这个对象自动转成字符串"[object Object]"，这时候解析器看到第一个字符是o（对应报错里的position 1位置），自然就会抛出语法错误。

为什么会出现这种情况？ #

在MVC视图里，如果你用类似@Html.Raw(Json.Encode(Model.YourObject))的方式获取ViewModel的值，其实已经直接把服务器端的对象序列化成了浏览器能识别的JS对象，而不是JSON字符串。这时候你拿到的data本身就是一个可直接使用的对象，根本不需要再解析。

错误写法 vs 正确写法 #

错误示例（会触发报错）：

// 从ViewModel获取的已经是JS对象
var data = @Html.Raw(Json.Encode(Model.UserInfo));
// 多余的parse操作，导致报错
var parsedData = JSON.parse(data);

正确示例1（直接使用对象）：

// 直接拿到JS对象，无需解析
var userData = @Html.Raw(Json.Encode(Model.UserInfo));
// 直接访问对象属性即可
alert(`用户名：${userData.UserName}，邮箱：${userData.Email}`);

正确示例2（如果确实需要处理JSON字符串）：

如果你真的需要先拿到JSON字符串再解析，记得给渲染出来的内容加上引号，确保它是字符串类型：

// 包裹引号，得到合法的JSON字符串
var jsonString = '@Html.Raw(Json.Encode(Model.UserInfo))';
// 这时候parse就没问题了
var parsedData = JSON.parse(jsonString);

快速排查方法 #

可以在控制台打印一下你要解析的变量类型，确认是不是对象：

var data = @Html.Raw(Json.Encode(Model.YourObject));
console.log(typeof(data)); // 如果输出"object"，就说明不需要parse

内容的提问来源于stack exchange，提问作者Delfino