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

391 阅读5分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第3天,点击查看活动详情

什么是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!

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

然后,使用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换行符之后。

结论

感谢你的阅读,希望可以帮助到你!