JavaScript - 多行字符串

Hello there, aspiring programmers! Today, we're going to dive into the wonderful world of multiline strings in JavaScript. Don't worry if you're new to programming – I'll guide you through this journey step by step, just as I've done for countless students over my years of teaching. So, grab a cup of your favorite beverage, and let's get started!

What Are Multiline Strings?

Before we jump into the how-to, let's understand what multiline strings are. Imagine you're writing a story, but you want to split it across multiple lines to make it easier to read. That's exactly what multiline strings allow us to do in programming – they let us write text that spans several lines of code.

Creating Multiline Strings Using Template Literals

The most modern and elegant way to create multiline strings in JavaScript is by using template literals. These are like the Swiss Army knife of string manipulation – versatile and powerful!

Syntax

To create a template literal, you use backticks (`) instead of single or double quotes. Here's how it looks:

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

console.log(myStory);

When you run this code, you'll see:

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

Explanation

The magic here is that everything between the backticks is considered part of the string, including line breaks. It's as if you're writing in a magical notebook where every new line you start is automatically recognized!

Benefits of Template Literals

1. Readability: Your code looks cleaner and is easier to understand.
2. Preservation of formatting: Line breaks and indentation are maintained.
3. String interpolation: You can easily insert variables into your strings (we'll cover this in a moment).

Advanced Example: String Interpolation

Let's spice things up a bit with string interpolation:

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);

This will output:

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

In this example, ${name}, ${age}, and ${profession} are placeholders that get replaced with the actual values of the variables. It's like magic, isn't it?

Creating Multiline String Using + Operator

Before template literals came along, programmers had to be a bit more creative. One common method was using the + operator to concatenate strings. Let's take a look:

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

console.log(oldSchoolMultiline);

This outputs:

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

Explanation

In this method, we're essentially creating separate strings and joining them together with the + operator. It's like building a sentence by connecting different pieces.

Pros and Cons

Pros:

• Works in older versions of JavaScript
• Gives you control over line breaks

Cons:

• Can be harder to read, especially for longer strings
• Doesn't preserve formatting as easily as template literals

Creating Multiline String Using \ Operator

Last but not least, we have the escape character method. This is like the secret passage of string creation – a bit tricky, but useful to know!

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

console.log(escapeCharMultiline);

This will output:

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

Explanation

Here's what's happening:

• \n represents a new line.
• \ at the end of a line tells JavaScript, "Hey, this string continues on the next line!"

When to Use This Method

This method can be handy when you're working with older systems or when you need very specific control over your line breaks. However, it's generally less preferred than template literals for readability reasons.

Comparison of Methods

Let's summarize our methods in a handy table:

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

Conclusion

And there you have it, folks! We've journeyed through the land of multiline strings in JavaScript. From the modern elegance of template literals to the classic charm of concatenation and the sneaky escape characters, you now have a toolkit full of ways to handle multiline strings.

Remember, programming is all about choosing the right tool for the job. As you grow in your coding journey, you'll develop a sense for when to use each method. And don't forget – practice makes perfect! Try out these methods in your own projects and see which one feels most natural to you.

Happy coding, and may your strings always be perfectly formatted! ?

Credits: Image by storyset