JavaScript 字符串操作

字符串操作是 JavaScript 中的一项基本技能。它允许你处理文本，而文本几乎是任何应用程序中至关重要的部分。

本章节将涵盖两种处理字符串的主要方法：拼接 (Concatenation) 和 模板字面量 (Template Literals)。

1. 字符串拼接 (String Concatenation)

字符串拼接是将两个或多个字符串组合成单个字符串的过程。在 JavaScript 中，用于字符串拼接的主要运算符是 +（加号）运算符。

1.1 基础拼接

最简单的拼接形式涉及连接两个字符串字面量：

let greeting = "Hello";
let name = "World";
let message = greeting + " " + name + "!"; // 使用空格和感叹号进行拼接
console.log(message); // 输出: Hello World!

在这个例子中，+ 运算符将字符串 "Hello"、一个空格 " "、字符串 "World" 和一个感叹号 "!" 组合在一起，创建了最终的消息 "Hello World!"。

1.2 使用变量进行拼接

你也可以将字符串与保存字符串值的变量进行拼接：

let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName;
console.log(fullName); // 输出: John Doe

这里，+ 运算符结合了存储在 firstName 和 lastName 变量中的值，并在中间加上一个空格，从而组成了全名。

1.3 与其他数据类型的拼接

JavaScript 以其类型强制转换 (Type Coercion) 而闻名。当你将 + 运算符用于一个字符串和一个非字符串值（比如数字）时，JavaScript 通常会将非字符串值转换为字符串，然后将它们拼接起来：

let age = 30;
let introduction = "我的年龄是: " + age;
console.log(introduction); // 输出: 我的年龄是: 30

在这种情况下，数字 30 在与字符串 "我的年龄是: " 拼接之前，被转换成了字符串 "30"。

重要提示： 使用 + 运算符时要注意类型强制转换。如果你打算进行算术加法，请确保两个操作数都是数字。否则，JavaScript 可能会将它们视为字符串并执行拼接操作。

1.4 循环中的拼接

拼接经常在循环中使用，以动态构建字符串：

let numbers = [1, 2, 3, 4, 5];
let numberString = "";

for (let i = 0; i < numbers.length; i++) {
  numberString = numberString + numbers[i];
  if (i < numbers.length - 1) {
    numberString = numberString + ", "; // 在数字之间添加逗号和空格
  }
}

console.log(numberString); // 输出: 1, 2, 3, 4, 5

这个例子遍历一个数字数组，并将它们拼接成一个由逗号和空格分隔的字符串。

2. 模板字面量 (Template Literals)

模板字面量（也称为模板字符串）是在 ECMAScript 6 (ES6) 中引入的，它提供了一种更现代、更易读的方式来执行字符串插值和拼接。

它们使用反引号 (`) 包裹，而不是单引号或双引号。

2.1 基础模板字面量

模板字面量允许你使用 ${expression} 语法直接在字符串中嵌入表达式：

let name = "Alice";
let greeting = `Hello, ${name}!`;
console.log(greeting); // 输出: Hello, Alice!

在这个例子中，变量 name 通过 ${name} 直接嵌入到字符串中。花括号内的表达式会被计算（解析），其值会被插入到字符串中。

2.2 多行字符串

模板字面量还使得创建多行字符串变得非常容易，而无需使用转义字符：

let multilineString = `这是一个
跨越了
多行的字符串。`;

console.log(multilineString);
/*
输出:
这是一个
跨越了
多行的字符串。
*/

2.3 模板字面量中的表达式

你可以在 ${} 占位符中包含任何有效的 JavaScript 表达式：

let a = 10;
let b = 20;
let result = ` ${a} 和 ${b} 的和是 ${a + b}。`;
console.log(result); // 输出:  10 和 20 的和是 30。

这个例子演示了如何在模板字面量中直接执行计算。

2.4 标签模板 (Tagged Templates) - 简介

模板字面量还可以与标签模板一起使用，这是一种高级形式，允许一个函数在模板字面量被求值之前对其进行处理。这超出了本章的范围，但值得了解以备将来学习。

function tag(strings, ...values) {
  console.log(strings);
  console.log(values);
  return "已处理";
}

let name = "Bob";
let age = 25;
let taggedResult = tag`Hello, ${name}! 你今年 ${age} 岁了。`;

console.log(taggedResult); // 输出: 已处理

在这个例子中，tag 函数接收字符串部分和表达式值作为参数。标签模板通常用于高级字符串操作，如本地化或安全转义。

3. 对比：拼接 vs. 模板字面量

由于模板字面量的可读性和易用性，它通常是处理复杂字符串操作的首选。然而，使用 + 运算符进行的简单拼接在基础字符串操作中仍然很常用。