JavaScript - Multiline Strings

Здравствуйте,野心勃勃的程序员们！今天，我们将一起探索JavaScript中多行字符串的奇妙世界。如果你是编程新手，不用担心——我会一步一步地引导你，就像我多年来教导无数学生一样。所以，拿起你最喜欢的饮料，让我们一起开始吧！

什么是多行字符串？

在我们深入了解如何操作之前，让我们先了解一下多行字符串是什么。想象你正在写一个故事，但你希望将它分成多行，以便更容易阅读。这正是编程中多行字符串允许我们做的事情——它们让我们能够编写跨越多行代码的文本。

使用模板字面量创建多行字符串

在JavaScript中创建多行字符串最现代、最优雅的方式是使用模板字面量。这些就像是字符串操作的瑞士军刀——多功能且强大！

语法

要创建模板字面量，你需要使用反引号 (`) 而不是单引号或双引号。下面是如何操作的：

let myStory = `Once upon a time,
there was a brave programmer
who loved to code all day and night.`;

console.log(myStory);

当你运行这段代码时，你将看到：

Once upon a time,
there was a brave programmer
who loved to code all day and night.

解释

这里的魔法在于，反引号之间的所有内容都被视为字符串的一部分，包括换行符。这就像是在写一个神奇的笔记本，你开始的每一行都会自动被识别！

模板字面量的优点

1. 可读性：你的代码看起来更干净，更容易理解。
2. 保留格式：换行符和缩进都被保留。
3. 字符串插值：你可以轻松地将变量插入到字符串中（我们稍后会介绍这个）。

高级示例：字符串插值

让我们通过字符串插值来增加一些趣味：

let name = "Alice";
let age = 25;
let profession = "developer";

let introduction = `Hello, I'm ${name}.
I'm ${age} years old and I work as a ${profession}.
I love creating multiline strings!`;

console.log(introduction);

这将输出：

Hello, I'm Alice.
I'm 25 years old and I work as a developer.
I love creating multiline strings!

在这个例子中，${name}, ${age}, 和 ${profession} 是占位符，它们会被变量的实际值替换。这就像是魔法，不是吗？

使用+运算符创建多行字符串

在模板字面量出现之前，程序员们不得不更有创意。一种常见的方法是使用+运算符来连接字符串。让我们来看看：

let oldSchoolMultiline = "This is line one. " +
"This is line two. " +
"This is line three.";

console.log(oldSchoolMultiline);

这将输出：

This is line one. This is line two. This is line three.

解释

在这个方法中，我们实际上是在创建独立的字符串，然后使用+运算符将它们连接起来。这就像是通过连接不同的片段来构建一个句子。

优点和缺点

优点：

• 在JavaScript的旧版本中工作
• 给你控制换行的能力

缺点：

• 对于较长的字符串可能更难阅读
• 不像模板字面量那样容易保留格式

使用\运算符创建多行字符串

最后但并非最不重要的是，我们有转义字符方法。这就像字符串创建的秘密通道——有点棘手，但了解它是有用的！

let escapeCharMultiline = "This is line one.\n\
This is line two.\n\
This is line three.";

console.log(escapeCharMultiline);

这将输出：

This is line one.
This is line two.
This is line three.

解释

这里发生的是：

• \n 表示新的一行。
• 行末的 \ 告诉JavaScript：“嘿，这个字符串在下一行继续！”

何时使用此方法

当你在使用旧系统或需要非常特定地控制你的换行时，此方法可以很方便。然而，由于可读性原因，它通常不如模板字面量受欢迎。

方法比较

让我们在我们的方法中总结一下：

方法	语法	可读性	兼容性	用例
模板字面量	`...`	优秀	现代JS	绝大多数场景的首选
+ 运算符	"..." + "..."	良好	所有版本	在使用旧JS时
\ 运算符	"...\n\..."	一般	所有版本	特定的格式需求

结论

好了，各位！我们已经一起穿越了JavaScript中的多行字符串领域。从模板字面量的现代优雅到连接和转义字符的经典魅力，你现在拥有了一套完整的工具来处理多行字符串。

记住，编程就是选择合适的工具来完成任务。在你编程旅途中成长时，你将逐渐培养出对每种方法的适用时机的感觉。别忘了——熟能生巧！在你的项目中尝试这些方法，看看哪一种对你来说最自然。

快乐编码，愿你的字符串总是完美格式化！?

Credits: Image by storyset