js onclick 传递字符串类型的参数（js 拼接html 的几种方式，传递数组出现 [object,object]）

一、规则

1. 碰到嵌套的时候才会同时用两种引号，规则是外层如果是单引号，内层就是双引号，如果想要在引号内引用变量，则需要跟外层的符号一致。
2. 如果外层使用的是单引号，那么内层的双引号就自动转译会被识别为引号。因为外层是单引号，内层的双引号可以直接识别成引号，不需要转移字符“/”（比如：'你好，“js” ’ ,我们可以直接知道他想表达的是：你好，“js” ，如果用相同的引号就会有歧义：比如：'你好，‘js’ ‘，这个就可以理解成很多种意思：你好，js’ ；你好，'js；你好，‘js’ ），因此内外层一样时，需要转译字符，'你好，‘js’ ’ 。这样子还是只有一种意思：你好，‘js’ 。
   总之，如果外层用单引号，内层用双引号，这个双引号包裹的内容会被看成一个整体，不需要转译；如果外层使用单引号内层也使用单引号，那么需要转义字符加以区分。

二、例子

(一) onclick 事件函数传入字符串参数，引发的not defined 问题

1. 简单的代码

<span id="test"></span>

<script th:inline="javascript">
	$(function() {
		var id=1;
		var tile = "java";
		$('#test').html("<a class='btn btn-default btn-xs' href='javascript:void(0)' οnclick='goTaskDetail(" +id + ","+tile+")'><i class='fa fa-search'></i>任务详情</a> ")
	});
	/* 任务详情*/
	function goTaskDetail(taskId,taskTitle) {
		console.log(taskId+taskTitle)
	}
</script>

2. 引发的问题
   
   点击后发现会报错，说java这个变量没有定义，我们本意是传入“java”字符串，但是浏览器解析成了java这个变量，所以会报错。
   
   查看元素，发现
   
3. 解决：

// 改成下面的格式
$('#test').html("<a class='btn btn-default btn-xs' href='javascript:void(0)' οnclick='goTaskDetail(\"" +id + "\",\""+tile+" \")'><i class='fa fa-search'></i>任务详情</a> ")

4. 分析
   4.1、 简单的理解方式
   注意：下面这种理解方式比较简单，但是是不正确的理解方式。（入门、简单使用js可以这么理解）

外层使用双引号，内层单引号不需要转译
下面圈起来的是一个个单引号划分的组，可以这么理解

经过浏览器解析后：

主要关注onclick函数的组。

如果传入的参数不是纯数字的字符，那么对参数不进行处理会被浏览器解析为变量。然后就会报not defined。

4.2、正确的理解方式（这种方式，理解起来不难，但是拼接很费劲）
以+号进行分组 ， +号的作用就是拼接字符串

分析第一组

三、传递复杂参数，比如数组，对象等数据

例如，参数是数组：

如果直接传递，会出现：

<a href="javascript:void(0)" onclick="flowInit.showTrajectory(\'' + item +'\')">

网上普遍的解决方式是将对象转换成json字符串

如下：

//item 为数组，复杂对象
 var json = JSON.stringify(item).replace(/\"/g,"'");
 //a标签拼接如下：
'<a href="javascript:void(0)" οnclick="showTrajectoryInfo(' + json + ')">\n'

function showTrajectoryInfo(json) {
	//注意这里不用解析json了，直接用，因为前面已经去掉 ' '
	console.log(json)
}

这里你可能会好奇为什么要后面的replace 。如果你这样写，

var json = JSON.stringify(item).replace(/\"/g,"'");
 //a标签拼接如下：
<a href="javascript:void(0)" onclick="flowInit.showTrajectory(\'' + item +'\')">

function showTrajectoryInfo(pointStr) {
	let json= JSON.parse(pointStr)
	console.log(json)
}

会出现 ：
Uncaught SyntaxError: Invalid or unexpected token (at 146459:1:25)

如果你这样写，

var json = JSON.stringify(item).replace(/\"/g,"'");
 //a标签拼接如下：
<a href="javascript:void(0)" onclick="flowInit.showTrajectory(' + item +')">

function showTrajectoryInfo(pointStr) {
	let json= JSON.parse(pointStr)
	console.log(json)
}

会出现 ：
Uncaught SyntaxError: Unexpected end of input (at 146459:1:27)

。。。。

百度了一下，最终只能这样写：先转成json ，然后把里面的’ ’ 去掉。这样js 拼接的时候，才能把这个复杂对象，数组识别出来

//item 为数组，复杂对象
 var json = JSON.stringify(item).replace(/\"/g,"'");
 //a标签拼接如下：
'<a href="javascript:void(0)" οnclick="showTrajectoryInfo(' + json + ')">\n'

function showTrajectoryInfo(json) {
	//注意这里不用解析json了，直接用，因为前面已经去掉 ' '
	console.log(json)
}