JavaScript 多行字符串——如何在 JS 中创建多行字符串

原文： JavaScript Multiline String – How to Create Multi Line Strings in JS

在本文中，你将学习在 JavaScript 中创建多行字符串的三种不同方法。

我将首先解释 JavaScript 中字符串的基础知识，然后介绍如何使用模板文字。然后，您将学习如何在代码示例的帮助下创建一个跨越多行的字符串。

以下是我们将介绍的内容：

• JavaScript 中的字符串是什么？
• 什么是模板字面量？为什么以及如何使用模板字面量？
• 如何创建多行字符串？
• 如何使用模板字面量创建多行字符串？
• 如何使用 + 运算符创建多行字符串？
• 如何使用 \ 运算符创建多行字符串？

JavaScript 中的字符串是什么？关于如何在 JS 中创建字符串的介绍

字符串是一种通过文本进行交流的有效方式。

字符串是字符值的有序序列。具体来说，字符串是一个或多个字符的序列，可以是字母、数字或符号（例如标点符号）。

可以通过三种方式在 JavaScript 中创建字符串：

• 通过使用单引号
• 通过使用双引号
• 通过使用反引号

以下是使用单引号创建字符串的方法：

// 使用单引号（''）创建字符串
let favePhrase = 'Hello World!';

以下是使用双引号创建字符串的方法：

// 使用双引号（""）创建字符串
let favePhrase = "Hello World!";

以下是使用反引号创建字符串的方法：

// 使用反引号创建字符串（``）
let favePhrase = `Hello World!`;

在 JavaScript 中创建字符串的最后一种方法被称为模板字面量。

我创建了一个名为 favePhrase 的变量。

在变量中，我存储了字符串 Hello World!，它是我使用三种不同的方式创建的。

要在浏览器的控制台中查看字符串的输出，请将变量名称传递给 console.log();。

例如，如果我想查看使用双引号创建的字符串的输出，我会执行以下操作：

// 使用双引号创建字符串（""）
let favePhrase = "Hello World!";

// 将字符串打印到控制台
console.log(favePhrase);

// 输出

// Hello World!

使用单引号或双引号创建字符串的工作方式相同，因此两者之间没有区别。

你可以选择在整个文件中使用其中一个或两个。也就是说，在整个文件中保持一致是个好主意。

创建字符串时，请确保你使用的引号类型在字符串两头是相同的。

// 不能像这样
let favePhrase = 'Hello World!";

console.log(favePhrase);

// 输出

// Uncaught SyntaxError: Invalid or unexpected token (at test.js:2:18)

另一件需要注意的事情是，你可以在一种类型的引号中包含另一种类型的引号。

例如，你可以在单引号内使用双引号，如下所示：

let favePhrase = 'My fave phrase is "Hello World"!';

确保内部引号不同于外部引号，否则会导致错误：

// 不能像这样
let favePhrase = 'My fave phrase is 'Hello World'! ';

console.log(favePhrase)


// 输出

//Uncaught SyntaxError: Unexpected identifier (at test.js:2:38)

当你尝试在单引号内使用撇号时，也会发生同样的事情：

// 不能像这样
let favePhrase = 'My fave phrase is "Hello world"! Isn't it awesome?';

console.log(favePhrase);

// 输出

// Uncaught SyntaxError: Unexpected identifier (at test.js:3:56)

我在双引号中使用了单引号，这很有效。但是，当我引入撇号时，代码就报错了。

让代码正常运行的方法是使用 \ 转义字符来转义单引号：

let favePhrase = 'My fave phrase is \'Hello World\'! ';

console.log(favePhrase);

// 输出

// My fave phrase is 'Hello World'! 

为了使撇号起作用，你必须执行以下操作：

let favePhrase = 'My fave phrase is "Hello world"! Isn\'t it awesome?';

console.log(favePhrase);

// 输出

// My fave phrase is "Hello world"! Isn't it awesome?

什么是 JavaScript 中的模板字面量？为什么以及如何在 JavaScript 中使用模板字面量？

之前，你看到要创建模板字面量，你必须使用反引号。

模板字面量是在 ES6 中引入的，它们允许你使用字符串执行更复杂的操作。

其中之一是能够将变量内联嵌入到字符串中，如下所示：

let firstName = 'John';
let lastName = 'Doe';

console.log(`Hi! My first name is ${firstName} and my last name is ${lastName}!`);

// 输出

//Hi! My first name is John and my last name is Doe!

在上面的示例中，我创建了两个变量，firstName 和 lastName，并分别存储了一个人的名字和姓氏。

然后，使用 console.log()，我打印了一个有反引号的字符串，也称为模板字面量。

在那个字符串中，我嵌入了这两个变量。

为此，我将变量名称放在 ${} 中 - 这也被称为字符串插值，它允许你引入任何变量而不必像这样连接它们：

let firstName = 'John';
let lastName = 'Doe';

console.log("Hi! My first name is " + firstName + " and my last name is " + lastName + "!");

// 输出

// Hi! My first name is John and my last name is Doe!

模板字面量允许你做的另一件事是在其中使用单引号、双引号和撇号，而无需对其进行转义：

let favePhrase = `My fave phrase is "Hello World" ! Isn't it awesome?`

console.log(favePhrase);

// 输出

// My fave phrase is "Hello World" ! Isn't it awesome?

字面量还允许你创建多行字符串，你将在下一节中学习如何操作。

如何在 JavaScript 中创建多行字符串？

有三种方法可以创建跨多行的字符串：

• 通过使用模板字面量
• 通过使用 + 运算符 - JavaScript 连接运算符
• 通过使用 \ 运算符 – JavaScript 反斜杠运算符和转义字符

如果你选择使用单引号或双引号而不是模板字面量来创建跨多行的字符串，则必须使用 + 运算符或 \ 运算符。

如何在 JavaScript 中使用模板字面量创建多行字符串

模板字面量允许你创建一个跨越多行的字符串：

let learnCoding = `How to start learning web development?
- Learn HTML
- Learn CSS
- Learn JavaScript
Use freeCodeCamp to learn all the above and much, much more !
`

console.log(learnCoding);


// 输出

// How to start learning web development?
// - Learn HTML
// - Learn CSS
// - Learn JavaScript
// Use freeCodeCamp to learn all the above and much, much more !

使用模板字面量是创建多行字符串的最直接的方法。

如何在 JavaScript 中使用 + 运算符创建多行字符串？

以上一节中的相同示例为例，以下是使用 + 运算符重写它的方法：

let learnCoding = 'How to start learning web development?' +
' - Learn HTML' +
' - Learn CSS' +
' - Learn JavaScript' +
' Use freeCodeCamp to learn all the above and much, much more!'


console.log(learnCoding);

// 输出

// How to start learning web development?  - Learn HTML - Learn CSS - Learn JavaScript Use freeCodeCamp to learn all the above and much, much more!

你还需要包含 \n 换行符以使句子出现在新行上：

let learnCoding = 'How to start learning web development?\n' +
' - Learn HTML\n' +
' - Learn CSS\n' +
' - Learn JavaScript\n' +
' Use freeCodeCamp to learn all the above and much, much more!'


console.log(learnCoding);

// 输出

//How to start learning web development?
// - Learn HTML
// - Learn CSS
// - Learn JavaScript
// Use freeCodeCamp to learn all the above and much, much more!

如何在 JavaScript 中使用 \ 运算符创建多行字符串？

如果你想使用 \ 运算符，你可以按照以下方式重写上一节中的示例：

let learnCoding = 'How to start learning web development? \n \
 - Learn HTML \n \
 - Learn CSS\n  \
 - Learn JavaScript \n \
Use freeCodeCamp to learn all the above and much, much more!'
 

console.log(learnCoding);

// 输出

// let learnCoding = 'How to start learning web development? \n \
// - Learn HTML \n \
// - Learn CSS\n  \
// - Learn JavaScript \n \
//Use freeCodeCamp to learn all the above and much, much more!'


console.log(learnCoding);

在此示例中，我使用单引号创建了一个多行字符串。

我首先必须使用 \n 换行符，然后使用 \ 运算符来使字符串跨越多行。

确保将 \ 运算符放在 \n 换行符之后。

总结

好啦，你现在知道如何在 JavaScript 中创建多行字符串了。

要了解有关 JavaScript 的更多信息，请查看 freeCodeCamp 的 JavaScript 算法和数据结构认证。

你将从基础开始，学习对初学者友好的交互式课程。你还将构建五个项目以加强对所学概念的理解。

感谢你阅读本文，祝你编码愉快！