JavaScript 多行字符串

2025年3月29日 | 阅读 4 分钟

在 JavaScript 中，字符串操作易于学习但难于精通。早期，JavaScript 不支持多行字符串。2015 年后，ES6 (ECMAScript 6) 引入了字符串字面量，支持多行字符串。

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

以下是几种使用多行字符串的方法

方法 1

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

示例

这是使用 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 ='TpointTech 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>) 进行分隔。

TpointTech 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> 或标题标签 (<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"> TpointTech </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>

输出

执行上述代码将在网页上显示输出。请参见下面的响应；您会看到一个 Display Multiline 按钮，用于显示文本字符串。

单击此 Display Multiline 按钮，文本字符串将以多行显示。请参见下面的输出

下一主题JavaScript 匿名函数

JavaScript 多行字符串

方法 1

示例

示例 2：连接单个字符串

示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript 多行字符串

方法 1

示例

示例 2：连接单个字符串

示例 3

相关帖子

Javascript Mouseenter 和 mouseleave 事件

如何检查 JavaScript 中的变量不是 NULL

如何使用 JavaScript 创建动态表格

Mouseout 事件在 javascript 中的用法

WebSocket 是什么？

JavaScript 一元运算符

如何使用 JavaScript 为元素添加类

Javascript 中的 textContent

Lodash_.chain() 方法

JavaScript hashchange 事件

订阅 Tpoint Tech

联系信息

关注我们