JavaScript生成HTML表格出现NaNNaNNaN错误，是否由字符串拼接导致？

你遇到的NaNNaNNaN完全是字符串拼接错误导致的，和多对象操作无关。

具体错误点 #

看你myMother.name方法里的字符串拼接代码，有三处多余的一元加号（+），这些加号会强制把后面的HTML字符串尝试转换为数字，但字符串无法转成有效数字，结果就变成了NaN，最终这些NaN被拼接到HTML里，就显示成了NaNNaNNaN：

1. 第一处：

"<th>"+"Eye Color"+"</th>"+
+"</tr>"+  // 这里的加号是多余的，会把"</tr>"转成NaN

2. 第二处：

"<td>"+this.eyeColor+"</td>"+
+"</tr>"+  // 同样多余的加号，转成NaN

3. 第三处：

+"</table>"  // 多余的加号，转成NaN

修复方法 #

把这些多余的加号删掉即可，修正后的name方法代码：

myMother.name = function() {
  return "<table border= '2' align='center'>"+
  "<tr>"+
  "<th>"+"First Name"+"</th>"+
  "<th>"+"Last Name"+"</th>"+
  "<th>"+"Age"+"</th>"+
  "<th>"+"Relation"+"</th>"+
  "<th>"+"Gender"+"</th>"+
  "<th>"+"Eye Color"+"</th>"+
  "</tr>"+
  "<tr>"+
  "<td>"+this.firstName+"</td>"+
  "<td>"+this.lastName+"</td>"+
  "<td>"+this.age+"</td>"+
  "<td>"+this.relation+"</td>"+
  "<td>"+this.gender+"</td>"+
  "<td>"+this.eyeColor+"</td>"+
  "</tr>"+
  "</table>"
};

修复后，表格旁的NaNNaNNaN就会消失，HTML只会渲染正常的表格内容。

内容的提问来源于stack exchange，提问作者swastha