文本处理——JavaScript 中的字符串

词语的力量

文字对人类非常重要——它们是我们沟通的很大一部分。由于网络是一种主要基于文本的媒介，旨在允许人类交流和共享信息，因此控制出现在网络上的文字对我们很有用。HTML 为文本提供结构和意义，CSS 允许我们精确地设置其样式，而 JavaScript 提供了许多用于操作字符串的功能。其中包括创建自定义欢迎消息和提示、在需要时显示正确的文本标签、按所需顺序对术语进行排序等等。

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

声明字符串

乍一看，字符串的处理方式与数字类似，但深入研究后，您会开始看到一些显著差异。让我们首先在浏览器开发控制台中输入一些基本行来熟悉一下。

首先，输入以下几行

const string = "The revolution will not be televised.";
console.log(string);

就像我们处理数字一样，我们正在声明一个变量，用一个字符串值初始化它，然后返回该值。这里唯一的区别是，在编写字符串时，你需要用引号将值括起来。

如果你不这样做，或者少了一个引号，就会收到错误。尝试输入以下几行

const badString1 = This is a test;
const badString2 = 'This is a test;
const badString3 = This is a test';

这些行无效，因为任何没有引号的文本都被解释为变量名、属性名、保留字或类似的东西。如果浏览器无法识别未加引号的文本，则会引发错误（例如，“missing; before statement”）。如果浏览器能够检测到字符串的开头但无法检测到其结尾（因为缺少第二个引号），它可能会报告“unterminated string literal”错误，或者在控制台中跳到新行并期望您在那里完成字符串。如果您的程序引发了此类错误，请返回并检查所有字符串，确保没有缺少引号。

如果您之前定义了变量 string，以下内容将起作用——现在就尝试一下

const badString = string;
console.log(badString);

badString 现在被设置为与 string 相同的值。

单引号、双引号和反引号

在 JavaScript 中，你可以选择使用单引号 (')、双引号 (") 或反引号 (`) 来包裹字符串。以下所有用法都有效

const single = 'Single quotes';
const double = "Double quotes";
const backtick = `Backtick`;

console.log(single);
console.log(double);
console.log(backtick);

你必须使用相同的字符作为字符串的开头和结尾，否则会得到一个错误

const badQuotes = 'This is not allowed!";

使用单引号声明的字符串和使用双引号声明的字符串是相同的，使用哪种取决于个人偏好——尽管选择一种风格并在代码中始终如一地使用它是一个好习惯。

用反引号声明的字符串是一种特殊类型的字符串，称为模板字面量。模板字面量大多与普通字符串行为相同，但它们有一些特殊属性

• 你可以在其中嵌入 JavaScript。
• 你可以在多行上声明模板字面量。

嵌入 JavaScript

在模板字面量中，你可以将 JavaScript 变量或表达式包裹在 ${ } 中，结果将包含在字符串中

const name = "Chris";
const greeting = `Hello, ${name}`;
console.log(greeting); // "Hello, Chris"

你可以使用相同的技术将两个变量连接起来

const one = "Hello, ";
const two = "how are you?";
const joined = `${one}${two}`;
console.log(joined); // "Hello, how are you?"

像这样连接字符串称为拼接。

情境中的字符串连接

让我们看看实际使用中的字符串连接

<button>Press me</button>
<div id="greeting"></div>

const button = document.querySelector("button");

function greet() {
  const name = prompt("What is your name?");
  const greeting = document.querySelector("#greeting");
  greeting.textContent = `Hello ${name}, nice to see you!`;
}

button.addEventListener("click", greet);

在这里，我们使用 window.prompt() 函数，该函数通过弹出对话框提示用户回答问题，然后将用户输入的文本存储在给定变量中——在本例中是 name。然后我们显示一个字符串，将名称插入到通用问候语中。

使用“+”进行字符串连接

你只能将 ${} 与模板字面量一起使用，不能与普通字符串一起使用。你可以使用 + 运算符连接普通字符串

const greeting2 = "Hello";
const name2 = "Bob";
console.log(greeting2 + ", " + name2); // "Hello, Bob"

然而，模板字面量通常能让你的代码更具可读性

const greeting3 = "Howdy";
const name3 = "Ramesh";
console.log(`${greeting3}, ${name3}`); // "Howdy, Ramesh"

在字符串中包含表达式

你可以在模板字面量中包含 JavaScript 表达式，而不仅仅是变量，结果将包含在最终结果中

const song = "Fight the Youth";
const score = 9;
const highestScore = 10;
const output = `I like the song ${song}. I gave it a score of ${
  (score / highestScore) * 100
}%.`;
console.log(output); // "I like the song Fight the Youth. I gave it a score of 90%."

多行字符串

模板字面量会保留源代码中的换行符，因此你可以像这样编写跨越多行的字符串

const newline = `One day you finally knew
what you had to do, and began,`;
console.log(newline);

/*
One day you finally knew
what you had to do, and began,
*/

要使用普通字符串实现相同的输出，你必须在字符串中包含换行符（\n）

const newline2 = "One day you finally knew\nwhat you had to do, and began,";
console.log(newline2);

/*
One day you finally knew
what you had to do, and began,
*/

有关更多示例和高级功能详情，请参阅我们的模板字面量参考页面。

在字符串中包含引号

既然我们用引号来表示字符串的开始和结束，那么我们如何在字符串中包含实际的引号呢？我们知道这样是行不通的

const badQuotes = "She said "I think so!"";

一个常见的选项是使用其他字符之一来声明字符串

const goodQuotes1 = 'She said "I think so!"';
const goodQuotes2 = `She said "I'm not going in there!"`;

另一个选项是转义有问题的引号。转义字符意味着我们对它们进行一些处理，以确保它们被识别为文本，而不是代码的一部分。在 JavaScript 中，我们通过在字符前面放置一个反斜杠来做到这一点。试试这个

const bigmouth = 'I\'ve got no right to take my place…';
console.log(bigmouth);

你可以使用相同的技术插入其他特殊字符。有关更多详细信息，请参阅转义序列。

数字与字符串

当我们尝试连接一个字符串和一个数字时会发生什么？让我们在控制台中尝试一下

const coolBandName = "Front ";
const number = 242;
console.log(coolBandName + number); // "Front 242"

你可能期望这会返回一个错误，但它运行得很好。数字应该如何显示为字符串是定义得相当好的，所以浏览器会自动将数字转换为字符串并连接这两个字符串。

如果你有一个想要转换为字符串的数字变量，或者一个想要转换为数字的字符串变量，你可以使用以下两种构造

• Number() 函数会尽可能地将传递给它的任何内容转换为数字。尝试以下操作

  js

  const myString = "123";
  const myNum = Number(myString);
  console.log(typeof myNum);
  // number
  

• 相反，String() 函数将其参数转换为字符串。试试这个

  js

  const myNum2 = 123;
  const myString2 = String(myNum2);
  console.log(typeof myString2);
  // string
  

这些结构在某些情况下非常有用。例如，如果用户在表单的文本字段中输入一个数字，它是一个字符串。但是，如果你想将这个数字与某些内容相加，你就需要它是一个数字，所以你可以通过 Number() 来处理这个问题。我们在 数字猜谜游戏 中的 checkGuess 函数中正是这样做的。

总结

至此，JavaScript 中字符串的最基本知识已经涵盖。在下一篇文章中，我们将在此基础上，探讨 JavaScript 中字符串可用的一些内置方法，以及我们如何使用它们将字符串操作成我们想要的形式。

• 上一页
• 概述：使用 JavaScript 进行动态脚本编写
• 下一页