JavaScript 如何创建多行字符串

在JavaScript 2015年之前，不支持多行字符串，但是当ES6出现并引入了模板字面量时，ES6开始支持多行字符串。如果需要支持较旧的浏览器，有多种方法可以处理多行字符串。

方法1：通过使用模板字面量来创建多行字符串

字符串使用反引号进行分隔，而不是普通的单引号/双引号。

示例： 这个示例使用模板字面量来创建多行字符串。

<h1 style="color: green"> 
    GeeksforGeeks 
</h1> 
  
<b> 
    How to create multi-line 
    strings in JavaScript? 
</b> 
  
<div class="multiline"></div> 
  
<p> 
    Click on the button to 
    insert multiline text 
</p> 
  
<button onclick="showMultiline()"> 
    Click here 
</button> 
  
<script type="text/javascript"> 
    function showMultiline() { 
        multilineString = 
            `<div> 
                <h3>This is the heading</h3> 
                <p> 
                    This is a paragraph. This uses 
                    template literals that were 
                    added in ES6 of JavaScript 
                </p> 
            </div>` 
          
        document.querySelector('.multiline').innerHTML 
                = multilineString; 
    } 
</script>

输出：

方法2：使用反斜杠来转义实际的换行

另一种用于创建多行字符串的方法是在每一行上转义每一个换行符。

示例： 这个示例使用反斜杠来转义实际的换行符以创建多行字符串。

<h1 style="color: green"> 
    GeeksforGeeks 
</h1> 
  
<b> 
    How to create multi-line 
    strings in JavaScript? 
</b> 
  
<div class="multiline"></div> 
  
<p> 
    Click on the button to 
    insert multiline text 
</p> 
  
<button onclick="showMultiline()"> 
    Click here 
</button> 
  
<script type="text/javascript"> 
    function showMultiline() { 
        multilineString = 
            "<div> \ 
                <h3>This is the heading</h3> \ 
                <p>This is a paragraph \ 
                This uses backslashes in place\ 
                of new lines</p> \ 
            </div>" 
          
        document.querySelector('.multiline').innerHTML 
                = multilineString; 
    } 
</script>

输出：

方法3：将各个字符串连接在一起

最简单但麻烦的方法是将每行作为一个字符串分开，并将它们连接成一个最终的字符串。

示例： 这个示例将字符串连接起来创建多行字符串。

<h1 style="color: green"> 
    GeeksforGeeks 
</h1> 
  
<b> 
    How to create multi-line 
    strings in JavaScript? 
</b> 
  
<div class="multiline"></div> 
  
<p> 
    Click on the button to 
    insert multiline text 
</p> 
  
<button onclick="showMultiline()"> 
    Click here 
</button> 
  
<script type="text/javascript"> 
    function showMultiline() { 
        multilineString = 
            "<div>" + 
                "<h3>This is the heading</h3>" + 
                "<p>This is a paragraph" + 
                "This uses simple concatenation " + 
                "of strings for every line</p> " + 
            "</div>" 
          
        document.querySelector('.multiline').innerHTML 
                = multilineString; 
    } 
</script>

输出：