Javascript 新线内置字符串？

Question

我正在 JavaScript FE 中构建一个字符串，如下所示，我的尝试是在不同的行中打印一些数据。 在我的 JavaScript 中，我使用getElement()和textContent构建字符串以在段落中附加字符串。

我试过<br> <br/> \n <\r ，都没有结果。

var str;
str+="text" + data[0];
  str+= //Here need new line
str+="text" + data[1];

var p=document.getElementById("paragraph");
p.textContent = str;

Answer 1

您有几个选择：

1. 在字符串中放置一个<br/>并设置p.innerHTML = str而不是设置 textContent

 let myEl = document.getElementById('myelement'); let data = 'test 1'; data += '<br/>'; data += 'test 2'; myEl.innerHTML = data;

 <div id="myelement"></div>

或者

2. 在字符串中放置一个\n字符，然后在元素的 CSS 中使用white-space: pre

 let myEl = document.getElementById('myelement'); let data = 'test 1'; data += '\n'; data += 'test 2'; myEl.textContent = data;

 #myelement { white-space: pre; }

 <div id="myelement"></div>

Answer 2

使用模板字符串可能更容易，然后使用innerText而不是textContent ，因为它们是不同的。

 const arr = ['Bob', 'Jane']; const str = ` text: ${arr[0]} text: ${arr[1]} `; document.body.innerText = str;

Answer 3

如果您需要一个可以作为文件显示/下载并同时显示在 html 中的字符串，我会使用\n和innerText ：

var str;
str+="text" + data[0];
  str+= '\n';
str+="text" + data[1];

var p=document.getElementById("paragraph");
p.innerText = str;

在使用 innerText 时， \n将被自动替换为<br/> ，您不需要使用whitespace来设置它的样式，并且您可以使用生成的字符串，也许可以开始文件下载