vs代碼在引號中換行多行

Question

我是 vscode 的新手，幾乎不會被一件事打擾。

 var template = "<div> <input type="text" class="input"> <input type="text" class="input"> <input type="text" class="input"> <input type="text" class="input"> <input type="text" class="input"> </div> "

我不知道為什么 vscode 沒有將所有這些行都包含在引號中。 它只是拋出一個語法錯誤。 當它們排成一行時它會讀取，但是當我打破該行以使其看起來不錯時，代碼不起作用。 任何的想法？

Answer 1

你可以這樣做：

 var template = ` <div> <input type="text" class="input"> <input type="text" class="input"> <input type="text" class="input"> <input type="text" class="input"> <input type="text" class="input"> </div> `; document.body.innerHTML = template;

如果您不熟悉模板字符串，請參閱 MDN 文檔。

Answer 2

你可以試試這個方法。 只需使用單引號將變量字符串括起來，並使用反斜杠來換行。

 var template = '<div>\ <input type="text" class="input"> \ <input type="text" class="input"> \ <input type="text" class="input"> \ <input type="text" class="input"> \ <input type="text" class="input"> \ </div>'; document.body.innerHTML = template;

Answer 3

由於多種原因，它失敗了：

1. 您可以使用雙引號來打開和關閉變量以及屬性。 第一個屬性的左雙引號已經關閉了變量。
2. JS 變量不允許有換行符。
3. 您不要用分號或逗號關閉變量（以防后面有更多變量）

修復它的唯一方法如下例所示。 您必須打開和關閉變量並使用+繼續下一行中的變量：

 var template = '<div>' + '<input type="text" class="input">' + '<input type="text" class="input">' + '<input type="text" class="input">' + '<input type="text" class="input">' + '<input type="text" class="input">' + '</div>'; document.body.innerHTML = template;

Answer 4

或者你可以

var template = '<div>\
                  <input type="text" class="input">\
                  <input type="text" class="input">\
                  <input type="text" class="input">\
                  <input type="text" class="input">\
                  <input type="text" class="input">\
                </div>'