js拼接字符串中含有带空格的多参数的函数

目录

一、任务说明：

二、问题

三、方案

1、参数拼接方案（包含多参数拼接）：

2、参数拼接方案二（包含多参数拼接）：

---

一、任务说明：

js 的onclick事件多参数传入，而且字符串参数可能会有空格等符号。

二、问题

原方案：

 templet: function (row) {
        return '<a href="javascript:void(0);" onclick="ClassroomStat.openClassroomDetail('
            + row.id + ')">查看详情</a>'
            + ' <a href="javascript:void(0);" onclick=ClassroomStat.playBack("' + row.id + '","'+ row.classroom_name + '")>回放</a>';

}

报错信息如下：

Uncaught SyntaxError: Unexpected token ILLEGAL

解决方案如下：

templet: function (row) {
        return '<a href="javascript:void(0);" onclick="ClassroomStat.openClassroomDetail('
            + row.id + ')">查看详情</a>'
            + ' <a href="javascript:void(0);" onclick="ClassroomStat.playBack(' + row.id + ',\''+ row.classroom_name + '\');">回放</a>';

}

 

三、方案

1、参数拼接方案（包含多参数拼接）：

转载自：https://blog.csdn.net/altaba/article/details/78364939

本人开始就是采用第一种方案，发现当参数喊空格时会报错误Uncaught SyntaxError: Unexpected token ILLEGAL。具体原因：如下：

常在页面中要让某些内容点击后产生点击事件（非页面跳转）都会使用onclick，但是这样不适于需要传递参数的情况，于是写成直接调用Javascript函数的方式：<a href=javascript:somefunction(args)>content</a>。注意，这么写是有问题的，问题就在于somefunction中的参数args的值不能含有空格，否则浏览器会认为空格后面的内容是<a>标签的某个属性，正确的写法应该是用引号将javascript:somefunction(args)引起来。另外还有一种方法可不必加这对引号，先将可能带空格的参数用escape函数处理一下，然后在somefunction中用unescape函数解码就行了。值得注意的是用encodeURI、decodeURI加解码却不能成功。

上面信息转载自：https://blog.csdn.net/chen365/article/details/5641306

最后发现第一种解决方案仍然停留在通过双引号与单引号来区分信息，实际上我们可以只通过单引号或双引号，再结合转义来实现，完全不会有我遇到的的问题。

2、参数拼接方案二（包含多参数拼接）：

只通过单引号或双引号，再结合转义来实现。

具体的实现，就是我的解决方案。

 

在此，感谢，转载文章的作者对我的帮助，互勉~