使用 JSON.parse() 转json字符串为json对象 时报语法错误

在尝试使用JSON.parse()将非标准的json字符串转换为json对象时,遇到'Unexpected token'的语法错误。错误源于姓名字段缺少双引号。确保json字符串格式正确是避免该错误的关键,可以使用在线JSON解析工具来检测和格式化json字符串。

今天看了一下,关于拿到table数据转json格式的文章,原本文章拼接用的是++,我想改为es6语法的 `` 模板字符串 ,但出现了语法错误的报错:Uncaught SyntaxError: Unexpected token 张 in JSON at position 16 at JSON.parse

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
</head>
<body>
	<table id="tableID">
    	<tr>
            <th>编号</th>
            <th>姓名</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
        </tr>
    </table>
</body>
<script>
	(function () {
     	var tabLen = document.getElementById("tableID");
        var obj = "[";//改为 es6语法的话,这里的 "[" 和下面的 "]" 拼接都可以改为 `[` 和 `]`
        for (var i = 1; i < tabLen.rows.length; i++) {
        	obj += //'{"id":' + tabLen.rows[i].cells[0].innerHTML + ',"name":"' + tabLen.rows[i].cells[1].innerHTML+'"},' 
                        //原本的++拼接写法,可以正确显示结果
            
              `{"id":${tabLen.rows[i].cells[0].innerHTML},"name":${tabLen.rows[i].cells[1].innerHTML}},` 
               //这个是我一开始修改的写法
               // ${姓名} 这里是字符串,需要加引号 " " 
               //正确的写法:
               //`{"id": ${tabLen.rows[i].cells[0].innerHTML},"name": "${tabLen.rows[i].cells[1].innerHTML}"},`
        }
        obj= obj.substr(0, obj.length - 1);
        obj += "]";
        console.log(obj);
        var obj = JSON.parse(obj);
        console.log(obj)
      })()
</script>
</html>

正确的结果:
在这里插入图片描述

报错时的结果:
此时的姓名没有引号 " " ,不是正确的json字符串,因此使用JSON.parse()便出错。
在这里插入图片描述
有个比较方便的检验方法,可以把console.log()出来的数据,复制到在线JSON解析。
例如:
我把上面使用es6语法拼接后报错时,未使用JSON.parse()前 打印出来的数据复制到在线JSON解析,结果:
在这里插入图片描述
在线JSON解析工具很明确地显示你的错误点在哪。
可复制下面的数据,到在线JSON校验格式化工具测试

[{
		"id": 1,
		"name": "张三"
	},
	{
		"id": 2,
		"name": "李四"
	},
	{
		"id": 3,
		"name": "王五"
	}
]

其实也是很简单的知识点啦。使用JSON.parse()转json字符串为json对象时,要先保证json字符串的格式正确。

<end>

在JavaScript中,`JSON.parse` 是一个非常常用的方法,用于将 JSON 字符串解析为 JavaScript 对象。该方法属于全局对象 `JSON`,其基本语法如下: ```javascript JSON.parse(jsonString[, reviver]) ``` - `jsonString`:需要解析的 JSON 字符串。如果字符串格式不正确,将抛出错误。 - `reviver`(可选):一个函数,用于在返回之前对解析后的对象属性进行处理。 ### 基本使用示例 以下是一个将 JSON 字符串换为 JavaScript 对象的简单示例: ```javascript const jsonString = '{"name":"Alice","age":25,"isStudent":false,"hobbies":["reading","coding"]}'; const obj = JSON.parse(jsonString); console.log(obj.name); // 输出: Alice console.log(obj.hobbies); // 输出: ["reading", "coding"] ``` ### 处理嵌套对象 JSON 字符串可以包含嵌套结构,例如对象中的对象或数组中的对象。`JSON.parse` 会自动处理这些嵌套结构: ```javascript const nestedJsonString = '{"user":{"name":"Bob","details":{"age":30,"active":true}}}'; const nestedObj = JSON.parse(nestedJsonString); console.log(nestedObj.user.details.age); // 输出: 30 ``` ### 使用 `reviver` 函数 可以通过 `reviver` 参数对解析后的数据进行处理。例如,将所有数字值加 1: ```javascript const jsonString = '{"a":1,"b":2,"c":3}'; const obj = JSON.parse(jsonString, function(key, value) { if (typeof value === 'number') { return value + 1; } return value; }); console.log(obj); // 输出: { a: 2, b: 3, c: 4 } ``` ### 错误处理 如果 JSON 字符串格式不正确,`JSON.parse` 会抛出异常。为了避免程序崩溃,通常结合 `try...catch` 使用: ```javascript function isJSON(str) { try { JSON.parse(str); return true; } catch (e) { return false; } } console.log(isJSON('{"result":true, "count":42}')); // 输出: true console.log(isJSON('不能换')); // 输出: false ``` ### 注意事项 - `JSON.parse` 仅接受格式完全正确的 JSON 字符串。 - 该方法不支持解析包含函数、`undefined` 或特殊对象(如 `Date`、`RegExp`)的字符串。 - 如果需要将 JavaScript 对象换回 JSON 字符串,可以使用 `JSON.stringify()` 方法。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值