JavaScript 中的換行符

Shiv Yadav 2023年1月30日 2022年5月10日

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。

Author: 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.