若依RuoYi项目(Java+SpringBoot+ Bootstrap)前端报错Uncaught SyntaxError: Invalid or unexpected token解决方案记录

错误发生情景描述

在table列表中，操作按钮无法获取该行的所有项目值。table操作列有如下代码。

	<script th:inline="javascript">
		let options = {
			...
			columns:[
				...
				{
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" οnclick="$.operate.edit(\'' + row.appId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" οnclick="$.operate.remove(\'' + row.appId + '\')"><i class="fa fa-remove"></i>删除</a>');
                        // ⭕️ 这是正确的写法！！！
                        actions.push('<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#uploadModal" οnclick="newUpload(\'' + encodeURI(JSON.stringify(row)) +'\')" >上传新版本</button>');
                        
                        // ❌ 错误。会报错（Uncaught SyntaxError: Invalid or unexpected token【未捕获的SyntaxError:无效或意外的令牌】）
                        actions.push('<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#uploadModal" οnclick="newUpload(\'' + JSON.stringfy(row) + '\')" >上传新版本</button>');
                        
                        // ❌ 错误。会报错（app:1 Uncaught ReferenceError: row is not defined at HTMLButtonElement.onclick【未捕获的ReferenceError:在HTMLButtonElement.onclick操作时，row未定义】）
                        actions.push('<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#uploadModal" οnclick="newUpload(JSON.stringify(row))" >上传新版本</button>');
                        
                        // ❌ 错误。方法获取到的入参为【"object Object"】
                        actions.push('<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#uploadModal" οnclick="newUpload(JSON.stringify(\'' + row +'\') )" >上传新版本</button>');
                        
                        // ❌ 错误。方法获取到的入参为【"object Object"】
                        actions.push('<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#uploadModal" οnclick="newUpload(\'' + row + '\')" >上传新版本</button>');
                        return actions.join('');
                    }
                }
			]
		}
		
		...
		
        function newUpload(row) {
            console.log("row:",row);
            
            const rowData = JSON.parse(decodeURI(row));
            console.log("rowData:",rowData);
            debugger
        }
    </script>

原因分析

1. 参数 row 为 Object 类型 数据，本身含有【{】、【"】、【}】、【全半角空格】、【中文】 等特殊字符，容易给浏览器造成识别混乱。
2. [object Object]是对象的字符串形式，由于隐式调用了 Object 对象的 toString() 方法，形式是：“[object Object]”。[object Object] 表示的就只是一个对象，当前对象 toString() 没有正确解析。

解决方案

1. 使用 JSON.stringify()¹ 将一个 JavaScript 对象或值转换为 JSON 字符串，来避免一个对象没有被 toString() 正确解析。再使用 JSON.parse()² 来解析 JSON 字符串，将其转换成 JavaScript 对象。
2. 使用 encodeURI()³ 将特定字符的每个实例替换为一个、两个、三或四转义序列来对统一资源标识符 (URI) 进行编码，来避免空格、中文等特殊字符 在浏览器解析时报错。再使用 decodeURI()⁴ 解码由encodeURI 创建或其它流程得到的统一资源标识符（URI）。

---

1. JSON.stringify() 语法说明 ↩︎

2. JSON.parse() 语法说明 ↩︎

3. encodeURI() 语法说明 ↩︎

4. decodeURI() 语法说明 ↩︎