如何在 Javascript 连接的字符串上强制换行？

Posted 2023-02-24

【中文标题】如何在 Javascript 连接的字符串上强制换行？

【英文标题】：How to force a line break on a Javascript concatenated string?

【发布时间】：2013-02-27 18:23:42

【问题描述】：

我将变量作为连接字符串发送到文本框，因此我可以在 getElementById 调用中包含多个变量。

我需要指定一个换行符，以便正确格式化地址。

document.getElementById("address_box").value = 
(title + address + address2 + address3 + address4);

我已经在换行符和变量之后尝试了 \n 。并尝试将连接运算符更改为 +=。

已修复：此问题已通过以下方式解决；

document.getElementById("address_box").value = 
(title + "\n" + address + "\n" + address2 + "\n" +  address3 +  "\n" + address4);

并将文本框从“输入类型”更改为“文本区域”

【问题讨论】：

我会投票赞成这个问题，但是您接受了一个非答案作为答案。 ????︎

【参考方案1】：

你不能在一个文本框中有多行，你需要一个文本区域。然后它在值之间使用\n。

【参考方案2】：

document.getElementById("address_box").value = 
(title + "\n" + address + "\n" + address2 + "\n" + address3 + "\n" + address4);

【参考方案3】：

您需要在引号内使用\n。

document.getElementById("address_box").value = (title + "\n" + address + "\n" + address2 + "\n" + address3 + "\n" + address4)

\n被称为EOL或line-break，\n是一个常见的EOL标记，通常被称为LF或line-feed，它是一个特殊的ASCII字符

【参考方案4】：

使用反引号

反引号通常用于多行字符串或当您想在字符串中插入表达式时

let title = 'John';
let address = 'address';
let address2 = 'address2222';
let address3 = 'address33333';
let address4 = 'address44444';
document.getElementById("address_box").innerText = `$title 
$address
$address2
$address3 
$address4`;

<div id="address_box">
</div>

【参考方案5】：

这是回答您问题的一种有趣方式。下面将获取一个字符串列表，对其进行排序，然后将值添加到r，并带有逗号和空格。每三个值都会添加一个换行符。

let r="";
["red", "blue", "Blue", "green"].sort().forEach((e, i) => 
   r += e + ", "
   if (i % 3 == 2) 
      r += "\n";
);
console.log(r);