【解决】th:onclick给js传string类型的值的问题

最近一个月在做Springboot的项目，在编码过程中遇到了一个问题：在使用Thymeleaf模板时使用了th:onclick属性来调用JavaScript方法，其中涉及到传入后台发送的数据的功能，以便shu数据回显。然而我遇到了一个问题：

当传入参数为数字的时候，可以正常传值，但是涉及到字符串的时候总是运行不通。

去百度查出了好多网友的博客，解决问题也都是五花八门，都不能解决我的问题。

需要涉及到转义的问题，稍不留神就会掉进入坑里。

解决方法1

在JavaScript中调用onclick和th:onclick是不同的。比如在js里面可以这样写：

<a href="javascript:;" onclick="member_edit(\''+c.residentName+'\')"></a>

在th:onclick里面最让人头疼的就是双引号、单引号交叉使用了，若像这样使用，则浏览器会把后台传来的值看作一个js变量名，从而出错。

th:onclick="'javascript:member_edit('+${book.getBookName()}+')'"

但是你如果看网上一些大佬的博客，是这样子的：

th:onclick="'javascript:member_edit(\''+${book.getBookName()}+'\')'">

最后发现上述写法是正确的，因为我传的参数较多，中间拼接单引号时出错。

总结：当传参数时，数字变量直接拼接，而字符串变量需要用

'\''

包裹，表示一个单引号'。

PS：附自己写的源码，仅供参考（多参数调用js函数）

<a title="Edit" href="javascript:;"
                           th:onclick="'javascript:member_edit('+${book.getBookId()}+','+'\''+${book.getBookPosition()}+'\''+','+${book.getBookPrice()}+','+'\''+${book.getBookName()}+'\''+','+'\''+${book.getBookAuthor()}+'\''+','+'\''+${book.getBookIsbn()}+'\''+')'"
                           class="btn btn-xs btn-info"> <i class="icon-edit bigger-120"></i>
                        </a>

解决方法2

还有一种方法，如评论区[weixin_42261874]所说：使用

[[]]

符号包裹，这样能够在js中获取到后台传输到前端的model变量，比如

[[${answer}]]

，在theamleaf表达式中，也可以使用，如

th:onclick="function([[${param}]])"

。（未测试，仅供参考）

PS：最后感慨一下，这个问题纠结了我很久，尝试了各种方法不得其解，后来，室友来看我抓耳挠腮，一脸愁容，就问我怎么了，明白详情之后……我俩一讨论不到十分钟解决了。教训：遇到问题实在解决不了的时候，可以求助一下其他人，可能其他人只是站在你身边，什么都不说，你都可以瞬间打破困境，眼前豁然开朗……