JavaScript String

什么是字符串

字符串是 JavaScript 中表示文本数据的数据类型。它由零个或多个字符组成，用单引号 (')、双引号 (") 或反引号 (`) 包围。

字符串的创建

你可以通过以下方式创建字符串：

// 单引号
let str1 = "Hello, World!";

// 双引号
let str2 = "Hello, World!";

// 反引号（模板字符串）
let str3 = `Hello, World!`;

// 使用 String 构造函数
let str4 = new String("Hello, World!");

// 使用 String 函数转换
let str5 = String(123); // "123"

字符串的基本操作

字符串长度

let str = "Hello, World!";
console.log(str.length); // 13

访问字符

let str = "Hello";
console.log(str[0]); // 'H'
console.log(str.charAt(1)); // 'e'

字符串拼接

// 使用 + 运算符
let str1 = "Hello";
let str2 = "World";
let result1 = str1 + ", " + str2 + "!"; // 'Hello, World!'

// 使用 += 运算符
let str3 = "Hello";
str3 += ", World!"; // 'Hello, World!'

// 使用模板字符串
let name = "World";
let result2 = `Hello, ${name}!`; // 'Hello, World!'

字符串方法

查找和提取

let str = "Hello, World!";

// indexOf: 查找子字符串首次出现的位置
console.log(str.indexOf("World")); // 7

// lastIndexOf: 查找子字符串最后出现的位置
console.log(str.lastIndexOf("o")); // 8

// includes: 检查字符串是否包含子字符串
console.log(str.includes("Hello")); // true

// startsWith: 检查字符串是否以指定子字符串开头
console.log(str.startsWith("Hello")); // true

// endsWith: 检查字符串是否以指定子字符串结尾
console.log(str.endsWith("!")); // true

// slice: 提取子字符串
console.log(str.slice(7, 12)); // 'World'

// substring: 提取子字符串（与 slice 类似，但不支持负数索引）
console.log(str.substring(7, 12)); // 'World'

// substr: 提取指定长度的子字符串（已废弃）
console.log(str.substr(7, 5)); // 'World'

转换

let str = "Hello, World!";

// toUpperCase: 转换为大写
console.log(str.toUpperCase()); // 'HELLO, WORLD!'

// toLowerCase: 转换为小写
console.log(str.toLowerCase()); // 'hello, world!'

// trim: 去除首尾空白字符
let strWithSpaces = "  Hello, World!  ";
console.log(strWithSpaces.trim()); // 'Hello, World!'

// trimStart: 去除开头空白字符
console.log(strWithSpaces.trimStart()); // 'Hello, World!  '

// trimEnd: 去除结尾空白字符
console.log(strWithSpaces.trimEnd()); // '  Hello, World!'

替换和分割

let str = "Hello, World!";

// replace: 替换子字符串
console.log(str.replace("World", "JavaScript")); // 'Hello, JavaScript!'

// replaceAll: 替换所有匹配的子字符串
let str2 = "Hello, Hello, World!";
console.log(str2.replaceAll("Hello", "Hi")); // 'Hi, Hi, World!'

// split: 分割字符串为数组
let str3 = "apple,banana,orange";
console.log(str3.split(",")); // ['apple', 'banana', 'orange']

其他方法

let str = "Hello";

// repeat: 重复字符串
console.log(str.repeat(3)); // 'HelloHelloHello'

// padStart: 在开头填充字符
console.log(str.padStart(10, "*")); // '*****Hello'

// padEnd: 在结尾填充字符
console.log(str.padEnd(10, "*")); // 'Hello*****'

// charCodeAt: 获取指定位置字符的 Unicode 编码
console.log(str.charCodeAt(0)); // 72 (H 的 Unicode 编码)

// fromCharCode: 根据 Unicode 编码创建字符串
console.log(String.fromCharCode(72, 101, 108, 108, 111)); // 'Hello'

模板字符串

模板字符串（Template Literals）是 ES6 引入的一种新的字符串创建方式，使用反引号 (`) 包围，支持：

多行字符串

let multiLineStr = `
  Hello,
  World!
`;
console.log(multiLineStr);
// 输出:
//   Hello,
//   World!

嵌入表达式

let name = "World";
let age = 30;
let greeting = `Hello, ${name}! You are ${age} years old.`;
console.log(greeting); // 'Hello, World! You are 30 years old.'

// 可以嵌入任意表达式
let a = 10;
let b = 20;
let result = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(result); // 'The sum of 10 and 20 is 30.'

字符串的不可变性

在 JavaScript 中，字符串是不可变的。这意味着一旦创建了字符串，就不能修改它的内容。所有字符串方法都返回一个新的字符串，而不会修改原始字符串。

let str = "Hello";
let newStr = str.toUpperCase();
console.log(str); // 'Hello'（原始字符串未改变）
console.log(newStr); // 'HELLO'（返回新字符串）

最佳实践

1. 选择合适的字符串创建方式：

   • 对于简单字符串，使用单引号或双引号
   • 对于包含变量或表达式的字符串，使用模板字符串

2. 注意字符串拼接的性能：

   • 对于少量字符串拼接，使用 + 运算符或模板字符串
   • 对于大量字符串拼接，考虑使用数组的 join() 方法

   // 大量字符串拼接的高效方式
   let parts = [];
   for (let i = 0; i < 1000; i++) {
     parts.push(`Part ${i}`);
   }
   let result = parts.join("");

3. 使用字符串方法的链式调用：

   let str = "   hello, world!   ";
   let result = str.trim().toUpperCase().replace("WORLD", "JAVASCRIPT");
   console.log(result); // 'HELLO, JAVASCRIPT!'

4. 注意区分字符串字面量和 String 对象：

   let str1 = "Hello"; // 字符串字面量（原始类型）
   let str2 = new String("Hello"); // String 对象（引用类型）
   
   console.log(typeof str1); // 'string'
   console.log(typeof str2); // 'object'
   console.log(str1 === str2); // false

5. 使用 includes() 替代 indexOf() 进行存在性检查：

   let str = "Hello, World!";
   
   // 推荐
   if (str.includes("World")) {
     // 包含 'World'
   }
   
   // 不推荐
   if (str.indexOf("World") !== -1) {
     // 包含 'World'
   }

总结

字符串是 JavaScript 中处理文本数据的核心数据类型，它提供了丰富的方法来操作和处理字符串。了解字符串的特性和方法，有助于你更有效地处理 JavaScript 中的文本数据。

通过合理使用字符串方法和遵循最佳实践，你可以编写更简洁、高效的 JavaScript 代码来处理各种字符串操作。