Handling text — strings in JavaScript

 

Next, we'll turn our attention to strings — this is what pieces of text are called in programming. In this article, we'll look at all the common things that you really ought to know about strings when learning JavaScript, such as creating strings, escaping quotes in strings, and joining strings together.

Prerequisites: 基本的计算机知识,对HTML和CSS的基本理解,对JavaScript的理解.
Objective: 熟悉JavaScript中的字符串基础.

The power of words

言语对人类非常重要-言语是我们交流方式的重要组成部分. 由于Web是一种主要基于文本的媒体,旨在允许人类进行交流和共享信息,因此对我们控制出现在其中的单词非常有用. HTML提供了文本的结构和含义, CSS允许我们精确地设置其样式,JavaScript包含许多功能,用于处理字符串,创建自定义欢迎消息和提示,在需要时显示正确的文本标签,将术语按所需顺序排序,以及更多.

到目前为止,我们在本课程中向您展示的几乎所有程序都涉及一些字符串操作.

Strings — the basics

乍一看,字符串的处理方法与数字类似,但是当您深入研究时,就会发现一些明显的区别. 让我们从在浏览器开发者控制台中输入一些基本内容开始,以使自己熟悉.

Creating a string

  1. 首先,输入以下几行:
      let string ='将不会播放革命.';
     串; 
    就像处理数字一样,我们声明一个变量,使用字符串值对其进行初始化,然后返回该值. 唯一的区别是,在编写字符串时,需要用引号将值引起来.
  2. 如果您不这样做,或者错过了引号之一,则会收到错误消息. 尝试输入以下几行:
      let badString =这是一个测试;
     let badString ='这是一个测试;
     let badString =这是一个测试. 
    这些行不起作用,因为任何带有引号的文本都假定为变量名,属性名,保留字或类似名称. 如果浏览器找不到它,则会引发错误(例如" missing; before statement"). 如第二引号所示,如果浏览器可以看到字符串的起始位置,但找不到字符串的末尾,则它会报错(带有"未终止的字符串文字"). 如果您的程序出现此类错误,请返回并检查所有字符串以确保您没有缺少引号.
  3. 如果您先前定义了变量string那么以下内容将起作用—立即尝试:
      让badString = string;
     badString; 
    badString现在设置为具有与string相同的值.

Single quotes vs. double quotes

  1. 在JavaScript中,您可以选择单引号或双引号来包装字符串.以下两种方法都可以正常工作:
      let sgl ='单引号';
     let dbl ="双引号";
     sgl;
     dbl; 
  2. 两者之间几乎没有什么区别,而您所使用的则取决于个人喜好. 但是,您应该选择一个并坚持下去; 不同引用的代码可能会造成混淆,尤其是在同一字符串上使用两个不同的引用时! 以下将返回错误:
      let badQuotes ='到底是什么?"; 
  3. 浏览器会认为该字符串尚未关闭,因为您不习惯用来包含字符串的其他引号可能会出现在字符串中. 例如,这两个都可以:
      let sglDbl ='您会吃"鱼晚餐"吗?';
     let dblSgl ="我很沮丧.";
     sglDbl;
     dblSgl; 
  4. 但是,如果用于包含字符串,则不能在字符串中包含相同的引号. 以下内容将出错,因为它会使浏览器混淆字符串的结尾位置:
      让bigmouth ='我无权取代我的位置...'; 
    这使我们很好地进入了下一个主题.

Escaping characters in a string

要修复我们之前的问题代码行,我们需要转义问题引号. 转义字符意味着我们对它们进行操作以确保将其识别为文本,而不是代码的一部分. 在JavaScript中,我们通过在字符前面加上反斜杠来实现. 尝试这个:

let bigmouth = 'I\'ve got no right to take my place...';
bigmouth;

这很好. 您可以用相同的方式对其他字符进行转义,例如\" ,此外还有一些特殊代码.有关更多详细信息,请参见转义符号 .

Concatenating strings

  1. 串联是一个花哨的编程词,意思是"连接在一起". 在JavaScript中将字符串连接在一起使用加号(+)运算符,与我们用于将数字加在一起的运算符相同,但是在这种情况下,它执行的操作有所不同. 让我们在控制台中尝试一个示例.
      让一个="你好,";
     让两个="你好吗?";
     让加入= 1 + 2;
     加盟 
    其结果是一个名为joined的变量,其中包含值" Hello,你好吗?".
  2. 在最后一种情况下,我们仅联接了两个字符串,但是只要在每个对之间包含+ ,就可以联接任意多个字符串. 尝试这个:
      让倍数= 1 + 1 + 1 + 1 + 2;
     多; 
  3. 您还可以混合使用变量和实际字符串. 尝试这个:
      让响应=一个+'我很好-'+两个;
     响应; 

注意 :当您在代码中输入实际的字符串时,用单引号或双引号引起来,它称为字符串文字 .

Concatenation in context

让我们看一下在操作中使用的串联-这是该课程前面的示例:

<button>Press me</button>
const button = document.querySelector('button');

button.onclick = function() {
  let name = prompt('What is your name?');
  alert('Hello ' + name + ', nice to see you!');
}

在这里,我们在第4行中使用window.prompt()函数,该函数要求用户通过弹出对话框回答问题,然后将他们输入的文本存储在给定变量(在本例中为name . 然后,我们在第5行中使用window.alert()函数来显示另一个弹出窗口,该弹出窗口包含我们通过串联从两个字符串文字和name变量组装而成的字符串.

Numbers vs. strings

  1. 那么,当我们尝试添加(或连接)字符串和数字时会发生什么? 让我们在控制台中尝试一下:
      '前'+ 242;
    
    您可能希望它返回一个错误,但是效果很好. 尝试将字符串表示为数字实际上没有任何意义,但是将数字表示为字符串确实可以,因此浏览器会巧妙地将数字转换为字符串,然后将两个字符串连接起来.
  2. 您甚至可以使用两个数字来执行此操作-您可以通过将数字用引号引起来将其强制为字符串. 请尝试以下操作(我们正在使用typeof运算符来检查变量是数字还是字符串):
      让myDate ='19'+'67';
     myDate的类型; 
  3. 如果您有一个要转换为字符串但不更改的数字变量,或者要转换为数字但不更改的字符串变量,则可以使用以下两种构造:
    • 如果可以的话, Number对象会将传递给它的所有内容转换为数字. 请尝试以下操作:
        让myString ='123';
       让myNum = Number(myString);
       myNum的类型; 
    • 相反,每个数字都有一个称为toString()的方法将其转换为等效的字符串. 尝试这个:
        让myNum = 123;
       让myString = myNum.toString();
       typeof myString; 
    这些构造在某些情况下可能非常有用. 例如,如果用户在表单的文本字段中输入数字,则为字符串. 但是,如果您想将此数字添加到某些内容中,则需要将其作为数字,因此可以将其通过Number()进行处理. 我们正是在第54行的数字猜想游戏中做到了这一点.

Template literals

您可能会遇到的另一种字符串语法类型是模板文字 (有时称为模板字符串). 这是一种更新的语法,可提供更灵活,更易于阅读的字符串.

注意 :尝试在浏览器的JavaScript控制台中输入以下示例,以查看得到的结果.

要将标准字符串文字转换为模板文字,您必须将引号( ' '" " )替换为反引号字符( ` ` ). 因此,举一个简单的例子:

let song = 'Fight the Youth';

将被转换成这样的模板文字:

song = `Fight the Youth`;

如果我们想连接字符串,或在其中包含表达式结果,那么传统的字符串可能会写得很奇怪:

let score = 9;
let highestScore = 10;
let output = 'I like the song "' + song + '". I gave it a score of ' + (score/highestScore * 100) + '%.';

模板文字极大地简化了这一过程:

output = `I like the song "${ song }". I gave it a score of ${ score/highestScore * 100 }%.`;

不再需要打开和关闭多个琴弦片-整个琴只可以包装在一对反引号中. 当您想在字符串中包含变量或表达式时,请将其包含在${ }结构中,该结构称为占位符 .

您可以在模板文字中包含复杂的表达式,例如:

let examScore = 45;
let examHighestScore = 70;
examReport = `You scored ${ examScore }/${ examHighestScore } (${ Math.round((examScore/examHighestScore*100)) }%). ${ examScore >= 49 ? 'Well done, you passed!' : 'Bad luck, you didn\'t pass this time.' }`;
  • 此处的前两个占位符非常简单,仅在字符串中包含一个简单值.
  • 第三个计算百分比结果并将其舍入到最接近的整数.
  • 第四种方法包括使用三元运算符检查分数是否高于某个标记,并根据结果打印通过或失败消息.

要注意的另一点是,如果要将传统字符串分成多行,则需要包括换行符\n

output = 'I like the song "' + song + '".\nI gave it a score of ' + (score/highestScore * 100) + '%.';

模板文字尊重源代码中的换行符,因此不再需要换行符. 这样可以达到相同的结果:

output = `I like the song "${ song }".
I gave it a score of ${ score/highestScore * 100 }%.`;

我们建议您尽快习惯使用模板文字. 它们在现代浏览器中得到了很好的支持,并且您会发现唯一缺乏支持的地方是Internet Explorer. 我们的许多示例仍然使用标准的字符串文字,但是今后我们将包括更多的模板文字.

有关更多示例和高级功能的详细信息,请参见我们的模板文字参考页.

Test your skills!

您已经到了本文的结尾,但是您还记得最重要的信息吗? 在继续进行之前,您可以找到一些其他测试来验证您是否保留了此信息—请参阅测试您的技能:字符串 . 请注意,这也需要下一篇文章中的知识,因此您可能需要首先阅读.

Conclusion

这就是JavaScript涵盖的字符串的最基础知识. 在下一篇文章中,我们将以此为基础,研究JavaScript中可用于字符串的一些内置方法,以及如何使用它们将字符串操纵为所需的形式.

In this module