JS 常用字符串操作大全

在 JavaScript 中，字符串（String）是不可变的。以下方法均返回新字符串，不会修改原字符串。

一、 查找与检测 (Searching & Checking)

这组方法用于判断字符串中是否包含某些内容，或者获取其位置。

1. includes(str) (ES6 推荐)

判断是否包含子串，返回布尔值。

text
123
const str = "Hello World";
console.log(str.includes("World")); // true
console.log(str.includes("Bye"));   // false

2. indexOf(str) / lastIndexOf(str)

获取子串第一次/最后一次出现的索引。如果未找到，返回 -1。

text
123
const str = "frontend";
console.log(str.indexOf("end")); // 5
console.log(str.indexOf("java")); // -1 (未找到)

3. startsWith(str) / endsWith(str)

判断字符串是否以某子串开头或结尾。常用于判断文件扩展名或 URL 协议。

text
123
const file = "image.png";
console.log(file.endsWith(".png")); // true
console.log(file.startsWith("http")); // false

二、 截取与切片 (Slicing)

面试中常考 slice 和 substring 的区别，建议首选 slice。

1. slice(start, end) (推荐)

提取字符串的一部分。

  • start: 开始索引。
  • end: 结束索引（不包含该位置）。
  • 特点：支持负数索引（代表从后往前数）。
text
123
const str = "JavaScript";
console.log(str.slice(0, 4));  // "Java"
console.log(str.slice(-6));    // "Script" (从倒数第6个取到最后)

2. substring(start, end)

功能与 slice 类似，但不支持负数（负数会被当作 0）。

text
12
const str = "JavaScript";
console.log(str.substring(0, 4)); // "Java"

三、 转换与替换 (Transform & Replace)

1. split(separator) (转数组 - 核心)

将字符串拆分为数组。这是字符串处理中最强大的方法之一。

text
123456
const str = "apple,banana,orange";
const arr = str.split(","); 
console.log(arr); // ["apple", "banana", "orange"]

// 常见技巧：反转字符串
const reverse = "abc".split("").reverse().join(""); // "cba"

2. replace(searchValue, newValue) / replaceAll()

  • replace: 默认只替换第一个匹配项（除非使用带全局标志 g 的正则）。
  • replaceAll (ES2021): 替换所有匹配项。
text
12345678910
const str = "hello world, hello js";

// 只替换第一个
console.log(str.replace("hello", "hi")); // "hi world, hello js"

// 替换所有 (ES2021)
console.log(str.replaceAll("hello", "hi")); // "hi world, hi js"

// 使用正则替换所有
console.log(str.replace(/hello/g, "hi")); // "hi world, hi js"

3. toLowerCase() / toUpperCase()

大小写转换。常用于搜索功能中忽略大小写的比对。

text
12
const input = "React";
console.log(input.toLowerCase() === "react"); // true

4. trim() / trimStart() / trimEnd()

去除空白字符（空格、换行、Tab）。常用于处理表单输入。

text
12
const user = "  admin  ";
console.log(user.trim()); // "admin"

四、 现代实用功能 (ES6+)

1. 模版字符串 (Template Literals)

使用反引号 ```，支持变量插入和多行文本。强烈推荐代替 + 号拼接。

text
12345678
const name = "Mike";
const age = 25;

// 旧写法
const oldStr = "My name is " + name + " and I am " + age;

// 新写法 (推荐)
const newStr = `My name is ${name} and I am ${age}`;

2. padStart(targetLength, padString) / padEnd()

用于补全字符串长度。常用于时间格式化或脱敏显示。

text
12345678
// 时间补零
const hour = "5";
console.log(hour.padStart(2, "0")); // "05"

// 手机号脱敏
const phone = "13812345678";
const last4 = phone.slice(-4);
console.log(last4.padStart(11, "*")); // "*******5678"

五、 总结：高频场景速查表

场景推荐方法备注
搜索关键字includes()返回 true/false
获取位置indexOf()没找到返回 -1
字符串截取slice()支持负数，最灵活
转为数组split()配合数组方法处理复杂逻辑
拼接字符串${var}模版字符串
表单去空格trim()处理用户输入
替换内容replaceAll()或使用正则 /g