Warum wirken sich Leerzeichen auf JavaScript in meinen HTML-Elementen aus?

Question

Ich durchläuft ein JSON-Objekt und ich bekomme die Daten und erstellt eine Zeile in einer Tabelle. Wenn ich jedoch keine Leerzeichen hinzufüge, wenn ich die Zeilen angehängt habe, d. H. Ich mache nur eine Zeile, funktioniert es.

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>'; 
} 

Allerdings, wenn ich versuche, es durch Einrücken und das Hinzufügen von Räumen ordentlich aussehen. Es bricht zusammen. Ich verstehe nicht!

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>'; 
} 

Answer 1

Sie können nicht nur Zeilenumbrüche innerhalb von Strings Hinzufügen. Sie können diese eine von zwei Möglichkeiten:

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

oder

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

Beachten Sie, dass diese beiden Zeichenfolge nicht gleich sind. Das erste Beispiel hat keinen Abstand zwischen den Zeilen. Das zweite Beispiel enthält den gesamten Leerraum am Anfang der Zeilen in der Zeichenfolge.

Answer 2

Das ist der Weg, den der Just-Time-Compiler denkt.

eine \ am Ende jeder Zeile innerhalb des „string“

Answer 3

Das ist, weil JavaScript injects ; automatically an das Ende Ihrer Zeile, die Ihre Zeichenfolge unterbricht, weil es nicht abgeschlossen ist. Sie können entkommen Linie mit \ endet oder die Zeichenfolge am Zeilenende richtig schließen, die ausführlicher ist und weniger fehleranfällig:

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>'; 
} 

Answer 4

Dont mehrzeiligen Strings in Javascript verwenden \ für fälschen wie die anderen vorgeschlagen haben.

Einer dieser Strings hat einen Syntaxfehler, der eine Ausnahme auslöst, können Sie sagen, welche, indem Sie sie betrachten?

Mit \ wird nur nach einem Albtraum Debugging gefragt. Bleiben Sie bei der Kettenverkettung (+) oder Interpolation mit einem der vielen Templating-Systeme wie handlebars oder underscore oder sogar jQuery Templating-Engine.