JavaScript 中的换行符

Shiv Yadav 2023年10月12日

JavaScript JavaScript Newline

在 JavaScript 中使用转义序列添加新行
在 JavaScript 中使用 Temperate Literals 添加新行
在 JavaScript 中使用 HTML Break 元素添加新行

本文将介绍一些 JavaScript 换行方法以及在处理字符串时如何使用它们。

JavaScript 中的字符串操作可能是一个棘手的话题。字符串操作易于学习但难以实现，其中之一就是在字符串中添加新行。

JavaScript 中有很多换行的方法，但它们并不像 HTML 中的段落或换行标签那么简单。

让我们看一下 JavaScript 中最常用的换行方法。

在 JavaScript 中使用转义序列添加新行

转义序列是在 JavaScript 中创建新行的流行方式。 \n 转义序列在 Windows 和 Linux 上创建换行符，但 \r 用于一些较旧的 Mac。

转义序列的实现非常简单。

let orgnstring = 'Hello Shiv welcome to upwork platform';

let newstring = 'Hello Shiv \nwelcome to\nupwork platform';

console.log(orgnstring);
console.log(newstring);

运行代码

注意

不要在换行符转义序列后包含空格，因为 JavaScript 将其视为空格并将其附加到输出中。

输出

Hello Shiv welcome to upwork platform

Hello Shiv 
welcome to
upwork platform

在 JavaScript 中使用 Temperate Literals 添加新行

模板文字听起来很酷，但它们只是接受内联表达式的字符串文字。

使用多行字符串更容易。模板文字用反引号括起来。

let orgnstring = 'Hello Shiv welcome to upwork platform';

let newstring = `Hello Shiv
welcome to
upwork platform`;

console.log(orgnstring);
console.log(newstring);

运行代码

输出

Hello Shiv welcome to upwork platform

Hello Shiv 
welcome to
upwork platform

在这两种情况下，返回的输出都是相同的。但正如你所见，模板文字使编写多行字符串变得更加容易。

在 JavaScript 中使用 HTML Break 元素添加新行

将 HTML 换行元素添加到一行是另一种添加新 JavaScript 行的方法。

只有在换行很重要时才应使用换行元素。但是，请考虑这种方法，因为它很常见。

<html> 
<body> 
<p id="newline"></p> 
<script> 

let orgnstring = "Hello shiv" + "<br>" + "welcome to "+ "<br>" + "upwork platform"; 

document.getElementById("newline").innerHTML = orgnstring; 

</script> 
</body> 
</html>

运行代码

输出

Hello shiv
welcome to
upwork platform

注意

与任何文本内容一样，不要忘记使用 .innerHTML 而不是 .innerText。

作者： Shiv Yadav

Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.