本文深入解析 JavaScript 中的字符串换行处理机制，涵盖词法语法基础、转义序列（\n, \r, \x, \u, \u{}）的具体用法，以及模板文字在生成多行字符串时的优势。同时探讨了通过 HTML 换行符元素实现 DOM 中换行的方法，帮助开发者掌握不同场景下的最佳实践。
本文简要介绍 JavaScript 的词法语法，并深入探讨各种新的换行技术，重点讲解在处理字符串时如何正确应对换行符。
JavaScript 中的词法语法
在计算机科学领域，词法语法是一种描述标记句法的技术规范。程序由语言结构中定义的字符构建而成。
字符集类似于任何书面语言的字母表。ECMAScript 脚本的源文本从左到右读取，并转换为一系列输入组件，包括标记、控制字符、行终止符、注释或空格。
ECMAScript 定义了特定的关键字、文字以及在语句后插入分号的规则。
JavaScript 中的字符串文字
字符串文字是由单引号或双引号括起来的零个或多个 Unicode 代码点的有序序列。转义序列也可用于表示 Unicode 代码点。
除了以下结束引号代码点外，所有代码点均可逐字出现在字符串文字中：
- U+005C 或 \（反斜杠）
- U+000D 或 \r（回车符）
- U+000A 或 \n（换行符）
任何代码点均可作为转义序列出现。
字符串文字被解释为 ECMAScript 字符串值。生成这些字符串值时，Unicode 代码点采用 UTF-16 编码。
JavaScript 中的行继续
JavaScript 中的字符串操作可能较为复杂。尽管掌握字符串操作相对容易，但实施起来却具有挑战性，其中添加新行是一个相关领域。
还有其他方法可以使用 JavaScript 插入新行，但它们不像 HTML 的段落或 break 标记那样简单。
尽管如此，让我们看看在 JavaScript 中插入新行的最流行方法。
在 JavaScript 中使用转义方法实现行继续
在 JavaScript 中，转义序列是一种创建新行的系统方法。在 Windows 和 Linux 中，新行的转义序列是 \n；但是，在一些较旧的 Mac 上，使用 \r。
转义序列的实现相对简单。
例子：
let data = "Hello World";
let newstring = "Hello \nWorld";
console.log(data);
console.log(newstring);输出:
"Hello World"\n"HelloWorld"
十六进制转义序列
十六进制转义序列由字符 \x 后跟恰好两个表示代码单元或点的十六进制数字组成，范围从 0x0000 到 0x00FF。
例子：
'\xA9' // "©"Unicode 转义序列
在 \u 之后，Unicode 转义序列恰好由四个十六进制数字组成。在 UTF-16 编码中，它表示一个编码单元。
代码单元相当于代码点 U+0000 到 U+FFFF。代码点需要两个转义序列来反映用于对字符进行编码的两个代码单元；代理对在代码点上是唯一的。
例子：
'\u00A9' // "©" (U+A9)Unicode 代码点转义序列
Unicode 代码点转义序列由 \u{} 和十六进制代码点组成。十六进制数字的范围必须从 0 到 0x10FFFF。
U+10000 到 U+10FFFF 中的代码点不需要代理对。在 ECMAScript 2015 中，代码点转义被添加到 JavaScript (ES6)。
例子：
'\u{2F804}' // CJK COMPATIBILITY IDEOGRAPH-2F804 (U+2F804)
// the same figure portrayed as a surrogate twin
'\uD87E\uDC04'在 JavaScript 中使用模板文字实现行继续
模板文字可能看起来很复杂，但它们是支持嵌入表达式的字符串文字。它们促进了多行字符串的使用。
反引号 (``) 用于包围模板文字。
例子：
let data = "Hello \nWorld";
let newstring = `Hello
World`;
console.log(data);
console.log(newstring);输出:
"HelloWorld"\n"HelloWorld"
在转义方法和模板文字的两种情况下返回相同的输出。但是，如您所见，模板字面量使编写多行字符串变得更加容易。
在 JavaScript 中使用 HTML Break 元素实现行继续
在 JavaScript 中创建新行的另一种方法是在字符串中包含 HTML 换行符元素。
重要的是要注意 break 元素只应在行的划分很重要时使用。但是，由于这种策略非常普遍，我们也会对其进行研究。
例子：
<html>
<body>
<p id="newline"></p>
<script>
let data = "Hello" + "
" + "World ";
document.getElementById("newline").innerHTML = data;
</script>
</body>
</html>输出:
到此这篇关于 JavaScript 中的行继续符的文章就介绍到这了，更多相关 js 行继续符内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！