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

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

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

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

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

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

在JavaScript中，有三种方法可以创建一个字符串：

• 通过使用单引号。
• 使用双引号。
• 使用反斜线。

下面是如何使用单引号创建一个字符串：

// string created using single quotes ('')
let favePhrase = 'Hello World!';

下面是如何使用双引号创建一个字符串：

// string created using double quotes ("")
let favePhrase = "Hello World!";

下面是如何使用反斜线创建一个字符串：

// string created using backticks (``)
let favePhrase = `Hello World!`;

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

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

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

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

例如，如果我想看到用双引号创建的字符串的输出，我会做如下操作：

// string created using double quotes ("")
let favePhrase = "Hello World!";

// print string to the console
console.log(favePhrase);

// output

// Hello World!

使用单引号或双引号创建字符串的效果是一样的，所以两者之间没有区别。

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

当创建一个字符串时，确保你使用的引号类型在两边是相同的：

// Don't do this
let favePhrase = 'Hello World!";

console.log(favePhrase);

// output

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

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

例如，你可以在单引号内使用双引号，像这样：

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

请确保里面的引号与周围的引号不一致，因为这样做会导致错误。

// Don't do this
let favePhrase = 'My fave phrase is 'Hello World'! ';

console.log(favePhrase)


// output

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

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

// Don't do this
let favePhrase = 'My fave phrase is "Hello world"! Isn't it awesome?';

console.log(favePhrase);

// output

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

我在双引号内使用了单引号，这很有效。然而，当我引入撇号时，代码就崩溃了。

让它工作的方法是通过使用\ 转义字符来转义单引号：

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

console.log(favePhrase);

// output

// My fave phrase is 'Hello World'! 

为了使撇号起作用，你必须做以下工作：

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

console.log(favePhrase);

// output

// 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}!`);

// output

//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 + "!");

// output

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

// output

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


// output

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

// output

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

// output

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

// output

// 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算法和数据结构认证。

这是一个免费的、经过深思熟虑的、结构化的课程，你将在其中进行互动学习。最后，你还将建立5个项目来申请你的认证并巩固你的知识。

谢谢你的阅读!