【问题标题】:How to force a line break on a Javascript concatenated string?如何在 Javascript 连接的字符串上强制换行?
【发布时间】: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);

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

【问题讨论】:

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

标签: javascript concatenation


【解决方案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被称为EOLline-break\n是一个常见的EOL标记,通常被称为LFline-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);
          

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 2012-10-23
            • 1970-01-01
            • 2018-09-23
            • 1970-01-01
            • 2022-11-02
            • 2015-07-27
            • 2015-10-21
            • 2011-07-25
            相关资源
            最近更新 更多