JS拼接html字符串时传入JSON对象的格式

在JS中拼接html字符串,遇到的坑往往是由书写格式引起的。

注意以下几点:

  1. 单双引号需嵌套使用;
  2. 传入 JSON 对象需要使用 JSON.stringify() 序列化为一个 JSON 字符串,并且更需要注意单双引号嵌套问题。

示例:

let html = "";
for(var i=0;i<data.length;i++){
    html += '<tr>'+
            '<td>'+ data[i].appName +'</td>'+
            '<td>'+ '<button type="button" onclick="edit('+JSON.stringify(data[i]).replace(/\"/g,"'")+')">按钮1</button>'+'</td>'+
            '<td>'+ "<button type='button' onclick='del("+JSON.stringify(data[i])+")'>按钮2</button>"+'</td>'+
            +'</tr>'
}

 上述代码中,使用了两种不同的引号嵌套格式。按钮1外层使用单引号,因此需要将JSON字符串中所有双引号转化成单引号,比较繁琐。从语法角度考虑,JavaScript 字符串与 JSON 字符串的最大区别在于,JSON 字符串必须使用双引号(单引号会导致语法错误),因此不推荐此写法。

推荐第二种写法,直接在外层嵌套双引号,无需进行额外操作。

猜你喜欢

转载自blog.csdn.net/m0_37128507/article/details/82658482