语言的力量

语言对人类非常重要——它们是我们交流的重要组成部分。由于Web是一种主要基于文本的媒介，旨在让人们进行交流和分享信息，因此对我们来说，掌握它所出现的单词是很有用的。HTML为我们的文本提供了结构和意义， CSS 允许我们精确地设计它的样式，JavaScript包含许多操作字符串的特性，创建定制的欢迎消息，在需要时显示正确的文本标签，将术语排序到所需的顺序，等等。

字符串 — 基本知识

创建一个字符串

  1. 首先, 输入下面的代码:

    1. let string = 'The revolution will not be televised.';
    2. string;

  2. 就像我们处理数字一样，我们声明一个变量，用一个字符串值初始化它，然后返回值。这里惟一的区别是，在编写字符串时，我们需要在字符串上加上引号。

  3. 如果你不这样做，或者在书写过程中，漏掉其中一个引号，你就会得到一个错误。
    试着输入以下几行:

    1. let badString = This is a test;
    2. let badString = 'This is a test;
    3. let badString = This is a test';

  4. 这些行不起作用，因为没有引号的任何文本字符串都被假定为变量名、属性名、保留字或类似。如果浏览器不能找到它，那么将会引发语法错误(例如:”missing ; before statement”)。
    如果浏览器能够识别字符串从哪里开始，但是不能找到字符串的结尾符，如第二行所示，那么它则会提示这样的错误(“unterminated string literal”)。如果您写的程序目前也引发这样的错误，那么请你回过头来仔细检查你的代码，看是否漏写了引号。

  5. 如果您之前定义了变量字符串，下面的操作将会起作用 — 现在来试一试:

    1. let badString = string;
    2. badString;

  6. 现在将 string 的值赋值给 badString，赋值之后，两个字符串的值相等。

    单引号和双引号

  7. 在JavaScript中，您可以选择单引号或双引号来包裹字符串。
    下面两种方式都可以:

    1. let sgl = 'Single quotes.';
    2. let dbl = "Double quotes";
    3. sgl;
    4. dbl;

  8. 两者之间几乎没有什么区别，根据个人偏好来使用。但是，您应该选择一个并坚持使用它，不一致的引号混用代码可能会让人很迷惑，特别是如果您在同一个字符串中使用不同的引号！
    下面将返回一个错误:

    1. let badQuotes = 'What on earth?";

  9. 浏览器会认为字符串没有被关闭，因为在字符串中您没有使用其他类型的引号。
    例如，这两种情况都是可以的:

    1. let sglDbl = 'Would you eat a "fish supper"?';
    2. let dblSgl = "I'm feeling blue.";
    3. sglDbl;
    4. dblSgl;

  10. 但是，您不能在字符串中包含相同的引号，因为它是用来包含它们的。下面将会出现错误，因为它会混淆浏览器和字符串的结束位置:

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

  11. 这个指引将会让我们很好地进入下一个主题。

    转义字符串中的字符


    要修复我们之前的问题代码行，我们需要避免引号的问题。转义字符意味着我们对它们做一些事情，以确保它们被识别成文本，而不是代码的一部分。在JavaScript中，我们通过在字符之前放一个反斜杠来实现这一点。试试这个:

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

    这回正常了。你可以用别的方式来达到一样的目的， 例如. \", 除此之外有一些特殊的代码 。更多细节请参见转义符号。

    连接字符串

  12. 连接是一个很花哨的编程词，意思是“连接在一起”。在JavaScript中连接字符串使用加号(+)操作符，我们也用它来将数字加在一起，但是在这种情况下，它做了一些不同的事情。让我们在控制台中尝试一个例子。

    1. let one = 'Hello, ';
    2. let two = 'how are you?';
    3. let joined = one + two;
    4. joined;

  13. 变量 joined 的值的结果，它包含的值为 “Hello, how are you?”。

  14. 最后一个例子中， 我们只是把两个字符串连接在一起，但是你可以喜欢连接多少就多少个， 只需要在它们之间加上 + 操作符。试试这个：

    1. let multiple = one + one + one + one + two;
    2. multiple;

  15. 你还能用真实的字符串和变量来混合。试试这个：

    1. let response = one + 'I am fine — ' + two;
    2. response;

    注意: 当您在您的代码中输入一个实际的字符串时，用单引号或双引号括起来，它被称为字符串文字。

上下文中的串联

让我们看一下在操作中使用的连接——这是本课程早些时候的一个例子:

  1. <button>Press me</button>
  1. const button = document.querySelector('button');
  2. button.onclick = function() {
  3.   let name = prompt('What is your name?');
  4.   alert('Hello ' + name + ', nice to see you!');
  5. }

这里我们使用的是第4行中的 window.prompt() 函数， 它要求用户通过一个弹出对话框回答一个问题然后将他们输入的文本存储在一个给定的变量中 — 在这个例子中是就是 name 变量。然后，我们在第5行中使用 window.alert() 函数来显示另一个弹出窗口，其中包含一个字符串，我们用两个字符串常量和name变量通过连接进行组合。

数字与字符

  1. 当我们尝试添加(或连接)一个字符串和一个数字时，会发生什么?
    让我们在我们的控制台中尝试一下:

    1. 'Front ' + 242;

  2. 您可能会认为这会抛出一个错误，但它运行得很好。
    试图将字符串表示为一个数字并不是很讲的通，但是用数字表示一个字符串则不然，因此浏览器很聪明地将数字转换为字符串，并将这两个字符串连接在一起。

  3. 你甚至可以用两个数字来这么操作——你可以通过用引号将数字包装成一个字符串。尝试以下方法(我们使用typeof操作符来检查变量是一个数字还是一个字符串):

    1. let myDate = '19' + '67';
    2. typeof myDate;

  4. 如果您有一个数值变量，您想要将其转换为字符串，并且不改变其他地方，或者您想将一个字符串转换为一个数字而不改变其其他地方，那么您可以使用以下两个构造:

    • 如果可以的话， Number 对象将把传递给它的任何东西转换成一个数字。
      试一试:

      1. let myString = '123';
      2. let myNum = Number(myString);
      3. typeof myNum;

    • 另一方面，每个数字都有一个名为 toString() 的方法，它将把它转换成等价的字符串。
      试试这个:

      1. let myNum = 123;
      2. let myString = myNum.toString();
      3. typeof myString;

  5. 这些结构在某些情况下是非常有用的，例如，如果一个用户将一个数字输入到一个表单文本字段中，这将是一个字符串，但是如果你想要将这个数字添加到某些东西中时，你需要它是一个数字，所以你可以通过Number() 来处理这个问题。我们在数字猜谜游戏中第54行就是这么做的。

把字符串当作对象

我们曾经说过，现在我们重申一遍—在javascript中，一切东西都可以被当作对象。例如我们创建一个字符串。

  1. let string = 'This is my string';

一旦你的变量成为字符串对象实例, 你就可以有大量的原型和方法编辑它. 如果你进入String对象页并观察页面旁边的列表你就会明白这一点。

获得字符串的长度


这很简单 — 你可以很轻松的使用 length 属性. 尝试输入以下的两行代码：

  1. let browserType = 'mozilla';
  2. browserType.length;

这个结果应该返回一个数字：7,因为”mozilla”的长度为7个字符. 说字符串的长度有用是有很多原因的, 例如，你可能想算出一连串名字的长度，并用名字长度来作为名字排序的依据，亦或让一个用户知道他输入的用户名太长，已经超出了输入的字符串长度限制。

检索特定字符串字符


在相关的注释中，您可以使用方括号表示法返回字符串中的任何字符 - 这意味着您可以在变量名的末尾包含方括号（[ ]）。 在方括号内，您可以包含要返回的字符的编号，例如，您要检索第一个字母，可以这样做：

  1. browserType[0];

电脑从0开始，不是1！ 要检索任何字符串的最后一个字符，我们可以使用下面这行，将这种技术与我们上面看到的length属性相结合起来：

  1. browserType[browserType.length-1];

“mozilla”的长度为7，但由于计数从0开始，所以字符位置为6，因此需要长度为length-1。 例如，您可以使用它来查找一系列字符串的第一个字母，并按字母顺序排列。

在字符串中查找子字符串并提取它

  1. 有时候你会想要找出一个较小的字符串是否存在于一个较大的字符串中（我们通常会说一个字符串中存在一个子字符串）。 这可以使用indexOf()方法来完成，该方法需要一个parameter — 你想要搜索的子字符串。 尝试以下：

    1. browserType.indexOf('zilla');

  2. 结果是2，因为子字符串“zilla”从“mozilla”内的位置2（0，1，2 —— 所以从第3个字符）开始。 这样的代码可以用来过滤字符串。 例如，假设我们有一个Web地址列表，但我们只想打印出包含“mozilla”的那些地址。

  3. 这可以用另一种可能更有效的方式来实现。 尝试以下：

    1. browserType.indexOf('vanilla');

  4. 这应该会得到 -1 的结果 —— 当在主字符串中找不到子字符串（在本例中为“vanilla”）时将返回 -1。

您可以使用它来查找不包含子串“mozilla”的所有字符串实例，或者如果使用否定运算符，请执行以下操作。 你可以这样做：

  1. if(browserType.indexOf('mozilla') !== -1) {
  2.   // do stuff with the string
  3. }

  1. 当你知道字符串中的子字符串开始的位置，以及想要结束的字符时，slice()可以用来提取 它。 尝试以下：

    1. browserType.slice(0,3);

  2. 这时返回”moz”——第一个参数是开始提取的字符位置，第二个参数是提取的最后一个字符的后一个位置。所以提取从第一个位置开始，直到但不包括最后一个位置。（此例中）你也可以说第二个参数等于被返回的字符串的长度。

  3. 此外，如果您知道要在某个字符之后提取字符串中的所有剩余字符，则不必包含第二个参数，而只需要包含要从中提取的字符位置 字符串中的其余字符。 尝试以下：

    1. browserType.slice(2);

  4. 这返回“zilla” —— 这是因为2的字符位置是字母z，并且因为没有包含第二个参数，所以返回的子字符串是字符串中的所有剩余字符。

Note: slice()的第二个参数是可选的 ：如果没有传入这个参数，分片结束位置会在原始字符串的末尾。这个方法也有其他的选项；学习slice()这页，来看看你还能发现什么其他作用。

转换大小写


字符串方法toLowerCase()和toUpperCase()字符串并将所有字符分别转换为小写或大写。 例如，如果要在将数据存储在数据库中之前对所有用户输入的数据进行规范化，这可能非常有用。
让我们尝试输入以下几行来看看会发生什么：

  1. let radData = 'My NaMe Is MuD';
  2. radData.toLowerCase();
  3. radData.toUpperCase();

替换字符串的某部分


您可以使用replace()方法将字符串中的一个子字符串替换为另一个子字符串。在基础的层面上， 这个工作非常简单。你当然可以用它做一些更高级的事情，但目前我们不会涉及到。
它需要两个参数 - 要被替换下的字符串和要被替换上的字符串。 尝试这个例子：

  1. browserType.replace('moz','van');

注意，在实际程序中，想要真正更新 browserType 变量的值，您需要设置变量的值等于刚才的操作结果；它不会自动更新子串的值。所以事实上你需要这样写：browserType = browserType.replace('moz','van');。