JavaScript 字符串操作汇总

关于 JavaScript 字符串的总结，考虑 JavaScript 字符串的主要知识点。字符串创建、常用方法、模板字符串、转义字符、Unicode处理、多行字符串、不可变性等。这些都是基础但重要的内容，所以每个知识点都对应的例子，简单易懂的，能够展示不同方法的用法，掌握这些操作可覆盖 90% 的日常字符串处理需求。接下来跟着文章看。

字符串基础操作

1. 创建字符串

let str1 = 'Hello'; // 单引号
let str2 = "World"; // 双引号
let str3 = `Hello ${str2}`; // 模板字符串，输出 "Hello World"

2. 字符串长度

console.log(str1.length); // 5

3. 访问字符

console.log(str1[0]); // "H" (类似数组索引)
console.log(str1.charAt(1)); // "e"

常用字符串方法

1. 拼接字符串

let result = str1.concat(', ', str2); // "Hello, World"

2. 查找子字符串

console.log(str1.indexOf('e')); // 1
console.log(str1.includes('lo')); // true
console.log(str1.startsWith('He')); // true

3. 截取字符串

console.log(str1.slice(1, 3)); // "el" (包含起始，不包含结束)
console.log(str1.substring(1, 3)); // "el"
console.log(str1.substr(1, 3)); // "ell" (起始索引, 长度)

4. 替换内容

let text = "Hello World";
console.log(text.replace("World", "JavaScript")); // "Hello JavaScript"
console.log(text.replace(/o/g, "0")); // 正则全局替换 → "Hell0 W0rld"

5. 大小写转换

console.log(str1.toUpperCase()); // "HELLO"
console.log("HELLO".toLowerCase()); // "hello"

6. 去除空白符

let str = "   Trim me  ";
console.log(str.trim()); // "Trim me"
console.log(str.trimStart()); // "Trim me  "
console.log(str.trimEnd()); // "   Trim me"

7. 字符串分割与合并

let fruits = "apple,banana,orange";
let arr = fruits.split(','); // ["apple", "banana", "orange"]
console.log(arr.join('-')); // "apple-banana-orange"

模板字符串（ES6+）

let name = "Alice";
let age = 25;
// 多行字符串 + 变量插入
let bio = `Name: ${name}
Age: ${age + 1}`;
console.log(bio);
// 输出：
// Name: Alice
// Age: 26

特殊字符与转义

console.log("Line1\nLine2"); // 换行符
console.log("He said, \"Hi!\""); // 转义引号
console.log("Unicode: \u{1F600}"); // 😄 (表情符号)

实战案例

1. 字符串反转

function reverseString(str) {
  return str.split('').reverse().join('');
}
console.log(reverseString("hello")); // "olleh"

2. 统计字符出现次数

function countChar(str, char) {
  return str.split(char).length - 1;
}
console.log(countChar("mississippi", "s")); // 4

3. 检查回文字符串

function isPalindrome(str) {
  const cleaned = str.toLowerCase().replace(/[^a-z0-9]/g, '');
  return cleaned === cleaned.split('').reverse().join('');
}
console.log(isPalindrome("A man, a plan, a canal: Panama")); // true

4. 生成随机字符串

function generateRandomString(length) {
  return Array.from({length}, () => 
    Math.random().toString(36)[2] // 0-9 + a-z
  ).join('');
}
console.log(generateRandomString(6)); // 类似 "3ax5fg"

注意事项

1. 字符串不可变性：所有操作返回新字符串，原字符串不变。
2. 使用 === 比较字符串内容（严格相等）。
3. 处理多语言时注意 length 可能与实际字符数不一致（如表情符号占 2 个码位）。