JavaScript 多行字符串

字符串操作在JavaScript中很容易学习，但是掌握它最困难。在早期，JavaScript不支持多行字符串。自从2015年起，ES6（ECMAScript 6）引入了字符串字面量，支持多行字符串。

现在有几种处理多行字符串的方法。我们将在本章节逐一讨论这些不同的方法。

以下是处理多行字符串的几种方法：

方法1

这是最简单的方法，用于在多行显示字符串文本。在document.write()函数中使用换行标签（<br>）或HTML来开始新行的文本。

示例1

下面是使用JavaScript编程实现多行字符串的实际示例：

<html> 
<head> 
<title> Multiple new lines example </title> 
</head> 
<script>
       document.write("This is first line display using JavaScript.");
       document.write("<br>");  
       document.write("This is second line and divided using break line tab of HTML.");
       document.write("<br>");  
       document.write("Now, we again printed another new line.")
</script>
</html>

输出

当你执行这段代码时，将在页面上显示三个文本字符串，它们将使用HTML的换行标签(<br>)进行分隔。。

This is first line display using JavaScript.
This is second line and divided using break line tab of HTML.
Now, we again printed another new line.

示例2：连接单个字符串

在这个示例中，我们将使用JavaScript编程简单地打印多行字符串而不使用任何换行：

<html> 
<head> 
<title> Multiple new lines example </title> 
</head> 
<script>
       var myString ='Javatpoint is a website of technologies, ' +
         'which provides tutorials of different technologies and tools. ' +
         'Here you will get tutorials in detail' +
         'like theory as well as practical implementation.' +
         '<br> We will try to provide you the best knowledge from our side.' +
         'Student, teachers, and industry professionals can learn from here.';

       document.write(myString);
</script>
</html>

输出

当你执行这段代码时，将会在网页上显示两个段落文字，这些文字将使用HTML的换行标签（<br>）进行分隔。

Javatpoint is a website of technologies, which provides tutorials of different technologies and tools. Here you will get tutorials in detail 'like theory as well as practical implementation.
We will try to provide you the best knowledge from our side. 'Student, teachers, and industry professionals can learn from here.

示例3

这是一个使用JavaScript编程进行多行文本打印的简单示例。在这个示例中，我们只使用了HTML的<br>标签来将句子打断成多行：

<html> 
<head> 
<title> Multiple new lines example </title> 
</head> 
<script>
       var multilineString ='JavaScript is a programming language that is useful for web development at client-side execution.' +
         'This language is very light-weighted mostly used to put validations, so they check at the client-side.' +
         '<br> Nowadays, it is very trending in market for web development.' +
         '<br> As it also allows dynamic execution of code.';

       document.write(multilineString);
</script>
</html>

输出

当您执行此代码时，将在网页上显示三个段落，这些段落将使用HTML的换行符(<br>)进行分割。

JavaScript is a programming language that is popular for web development at the client-side execution. This language is very light-weighted mostly used to put validations, so they check at client-side. 
Nowadays, it is very trending in market for web development.
As it also allows dynamic execution of code.

方法2

您还可以将文本字符串传递到<p>、<b>或<a>标签中，或者通过<h1>到<h6>标签将其分成多行或多段。请参阅以下代码：

<script>
       var multilineString ='<p> This is fist line of the paragraph. </p>' +
         '<b> This text will show you in bold letters in next line. </b>' +
         '<p> Now, it is again a simple text line. </p>';

       document.write(multilineString);
</script>

输出

以上传递的行将显示为多行。这些行是从新行开始使用段落和粗体选项。

This is first line of the paragraph. 
This text will show you in bold letters in next line. 
Now, it is again a simple text line.

方法3： 在这个方法中，我们会打印一个多行字符串。这主要用于写段落文字。

示例：

你可以在多个HTML标签内写多行文本以便清楚理解段落。通过一个示例来看：

<html> 
<head> 
<title> Create multi-line strings </title> 
</head> 

<body> 
<center>
<h1 style="color: green"> Javatpoint </h1> 
<b> Multi-line string creation example using JavaScript and HTML </b> 

<p> Click on the button to insert multi-line text </p> 
<button onclick="showMultilineString()"> Display Multiline </button> 

<span id="multiline"> </span>
<script> 
    function showMultilineString() { 
      multilineString = 
            "<div>" + 
               "<h3>This is an heading using h3 tab. </h3>" + 
               "</br><p> This is another string new line." + 
               "We have combined all these strings using" + 
               "concatenation operator. This text string will show you two three lines.</p> " + 
            "</div>" ;

         document.getElementById('multiline').innerHTML = multilineString; 
     } 
</script> 
</center>
</body> 
</html>

输出

执行上述操作后，输出将在网页上显示给您。请查看下方的响应；您将看到一个 显示多行 按钮，用于显示一个文本字符串给您。

JavaScript 多行字符串