为什么空格会影响我的html元素中的JavaScript

Why do spaces affect JavaScript in my html elements?

本文关键字：元素 JavaScript html 我的 空格 影响 为什么      更新时间：2023-09-26

我正在遍历一个JSON对象，我正在获取数据并在表中创建一行。然而，当我在附加行时不加空格时，也就是说，我只加了一行，这就行了。

for(var i in data.students)
{    
    table += 
        '<tr><td id="studentName">' + data.students[i].firstname + ' ' + data.students[i].lastname +'</td><td><select class="attendSelect" id="studentSelect'+ data.students[i].lastname +'"><option value="Attended">Attended</option><option value="Excused">Excused</option><option value="Absent">Did not Attend</option></select></td></tr>';
}

然而，当我试图通过缩进和添加空格来使它看起来整洁时。它坏了。我不明白！

for(var i in data.students)
{    
    table += 
        '<tr>
            <td id="studentName">' + data.students[i].firstname + ' ' + data.students[i].lastname +'</td>
            <td>
                <select class="attendSelect" id="studentSelect'+ data.students[i].lastname +'">
                    <option value="Attended">Attended</option>
                    <option value="Excused">Excused</option>
                    <option value="Absent">Did not Attend</option>
                </select>
            </td>
        </tr>';
}

不能只在字符串中添加换行符。你可以用两种方法之一：

var mystring = "this" + 
               "is multi" + 
               "line";

或

var mystring = "this ' 
               is multi '
               line";

请注意，这两个字符串不相等。第一个示例的行之间没有空格。第二个示例包括字符串中行开头的所有空白。

这是即时编译器的想法。

在"字符串"的每行末尾添加一个''

这是因为JavaScript会自动将;注入到行的末尾，这会打断字符串，因为它是未终止的。您可以用'转义行尾，或者正确地关闭行尾的字符串，这更详细，也不容易出错：

for(var i in data.students)
{    
    table += '<tr>' +
            '<td id="studentName">' + data.students[i].firstname + ' ' + data.students[i].lastname +'</td>' +
            '<td>'
                '<select class="attendSelect" id="studentSelect' + 
                  data.students[i].lastname +'">' +
                    '<option value="Attended">Attended</option>' +
                    '<option value="Excused">Excused</option>' +
                    '<option value="Absent">Did not Attend</option>' +
                '</select>' +
            '</td>' +
        '</tr>';
}

不要像其他人建议的那样使用'在javascript中伪造多行字符串。

str = "this '
       is a multiline ' 
       string";

str = "this '
       is a multiline '
       string";

其中一个字符串有语法错误，会引发异常，你能通过查看它们来判断是哪一个吗？

使用'只是一场调试噩梦。坚持使用字符串串联（+）或插值，使用许多模板系统中的一个，例如handlebas或下划线，甚至jQuery的模板引擎。

相关文章：