JavaScript 字符串处理：trim()、substring() 与 replace()

字符串是 JavaScript 中最基础也最常用的数据类型。无论是处理表单输入、解析 API 响应，还是构建用户界面，我们都需要对字符串进行各种操作。本文将详细介绍三个最实用的字符串方法：trim()、substring() 和 replace()，帮助你快速掌握字符串处理的精髓。

一、trim()：去除字符串两端的空白字符

1.1 方法概述

trim() 是 JavaScript 字符串的一个内置方法，用于移除字符串两端的所有空白字符，包括空格、制表符 \t、换行符 \n 等。处理用户输入时，这个方法尤为重要，因为它能有效避免因意外空格导致的数据校验失败。

核心特点：

• 返回一个新字符串，原字符串保持不变
• 只移除两端空白，中间空白不受影响
• 对空字符串返回空字符串

1.2 基本用法

const text = "  Hello, World!  ";
console.log(text.trim());  // 输出: "Hello, World!"

上面的代码展示了 trim() 的基本效果。两端的空格被完全移除，而字符串中间的空格和内容保持不变。

1.3 实际应用场景

场景一：处理表单输入

用户提交表单时，常常会在输入内容前后不经意地添加空格。使用 trim() 可以确保存储的数据干净整洁：

function processUserInput(input) {
    const cleaned = input.trim();

    if (cleaned === "") {
        return "请输入有效内容";
    }

    return cleaned;
}

processUserInput("   张三   ");  // 返回: "张三"
processUserInput("  李四  ");   // 返回: "李四"

场景二：数据比对

在进行字符串比对时，trim() 能避免因多余空格导致的误判：

const userInput = "  admin  ";
const storedPassword = "admin";

if (userInput.trim() === storedPassword) {
    console.log("登录成功");
} else {
    console.log("密码错误");
}

二、substring()：提取子字符串

2.1 方法概述

substring() 方法用于从原字符串中提取指定位置的子字符串。它接收两个参数：startIndex（起始索引，包含）和 endIndex（结束索引，不包含）。如果不指定结束索引，则提取到字符串末尾。

索引规则：

• 索引从 0 开始计算
• 负数索引会被当作 0 处理
• 如果 startIndex 大于 endIndex，两个参数会自动交换

2.2 基本用法

const str = "Hello, JavaScript!";

// 提取从索引 0 到 5 的子字符串
console.log(str.substring(0, 5));  // 输出: "Hello"

// 从索引 7 提取到末尾
console.log(str.substring(7));     // 输出: "JavaScript!"

// 参数交换测试
console.log(str.substring(5, 0));  // 输出: "Hello" (等同于 0,5)

2.3 与 slice() 的区别

很多初学者会混淆 substring() 和 slice() 方法。两者都能提取子字符串，但处理负数的方式不同：

const str = "JavaScript";

// substring 负数当作 0 处理
console.log(str.substring(-3, 5));  // 等同于 (0, 5)，输出: "Java"

// slice 支持负数索引（从末尾计算）
console.log(str.slice(-3, 5));      // 输出: "" (无法从倒数第3位截到正数第5位)
console.log(str.slice(-3));         // 输出: "ipt" (从倒数第3位截到末尾)

选择建议：

• 需要负数索引支持时，优先使用 slice()
• 只需要正数索引时，两者均可，substring() 的参数自动交换功能有时更方便

2.4 实际应用场景

场景一：格式化日期

从日期字符串中提取年月日的各个部分：

const dateStr = "2024-05-18";

const year = dateStr.substring(0, 4);
const month = dateStr.substring(5, 7);
const day = dateStr.substring(8, 10);

console.log(`年份: ${year}, 月份: ${month}, 日期: ${day}`);
// 输出: 年份: 2024, 月份: 05, 日期: 18
```

**场景二：截取文件名扩展名**

从文件名中分离出扩展名：

```javascript
function getFileExtension(filename) {
    const lastDotIndex = filename.lastIndexOf(".");
    
    if (lastDotIndex === -1) {
        return "";  // 没有扩展名
    }
    
    return filename.substring(lastDotIndex + 1);
}

getFileExtension("report.pdf");     // 返回: "pdf"
getFileExtension("image.png");      // 返回: "png"
getFileExtension("document");       // 返回: ""
```

---

## 三、replace()：替换字符串内容

### 3.1 方法概述

`replace()` 方法用于在字符串中查找并替换指定内容。它接收两个参数：第一个是要查找的内容（可以是字符串或正则表达式），第二个是替换后的新内容。

**重要特性**：
- 默认只替换**第一个**匹配项
- 原字符串保持不变，返回新字符串
- 如果第一个参数是正则表达式且带 `g` 标志，则替换所有匹配项

### 3.2 基本用法

```javascript
const str = "Apple, Banana, Apple";

// 替换第一个 "Apple"
console.log(str.replace("Apple", "Orange"));  
// 输出: "Orange, Banana, Apple"

// 使用正则表达式全局替换
console.log(str.replace(/Apple/g, "Orange")); 
// 输出: "Orange, Banana, Orange"
```

### 3.3 替换函数的高级用法

`replace()` 的第二个参数可以是一个函数，这在需要根据匹配内容动态计算替换值时非常有用：

```javascript
const prices = "苹果: 10元, 香蕉: 20元, 橙子: 15元";

// 将所有数字替换为其两倍的值
const doubled = prices.replace(/\d+/g, (match) => {
    return (parseInt(match) * 2).toString();
});

console.log(doubled);  
// 输出: "苹果: 20元, 香蕉: 40元, 橙子: 30元"
```

### 3.4 使用捕获组

正则表达式的捕获组功能允许我们在替换时引用匹配到的部分：

```javascript
const names = "张三, 李四, 王五";

// 交换姓名的顺序（姓 + 名 -> 名, 姓）
const swapped = names.replace(/(\w+), (\w+)/g, "$2 $1");
console.log(swapped);
// 输出: "李四 张三, 王五 李四"（注意：正则只匹配一次，实际应写为全局模式）

// 更完整的示例
const fullNames = "张三, 李四, 王五";
const properFormat = fullNames.replace(/(\w+), (\w+)/g, "$2 $1");
```

### 3.5 实际应用场景

**场景一：敏感信息脱敏**

隐藏手机号或身份证号的部分数字：

```javascript
function maskPhoneNumber(phone) {
    // 保留前3位和后4位，中间用*替代
    return phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
}

maskPhoneNumber("13812345678");  // 返回: "138****5678"

function maskIdCard(id) {
    // 保留前3位和后4位
    return id.replace(/(\d{3})\d{11}(\d{4})/, "$1***********$2");
}

maskIdCard("110101199001011234");  
// 返回: "110***********1234"

场景二：规范化文本

统一替换多种格式的空白字符为单个空格：

function normalizeSpaces(text) {
    return text.replace(/\s+/g, " ").trim();
}

normalizeSpaces("这    是   一个   例子");  
// 返回: "这 是 一个 例子"

四、综合应用：三种方法的组合使用

4.1 真实案例：处理用户提交的数据

function processFormData(rawInput) {
    // 第一步：去除两端空白
    const cleaned = rawInput.trim();

    // 第二步：提取有效信息（假设格式为 "姓名 - 邮箱"）
    const separatorIndex = cleaned.indexOf("-");

    if (separatorIndex === -1) {
        return null;  // 格式不正确
    }

    const name = cleaned.substring(0, separatorIndex).trim();
    const email = cleaned.substring(separatorIndex + 1).trim();

    // 第三步：规范化邮箱（统一为小写）
    const normalizedEmail = email.toLowerCase().replace(/\s/g, "");

    return {
        name: name,
        email: normalizedEmail
    };
}

// 测试
const input = "  张三  -  ZHANG@EXAMPLE.COM  ";
const result = processFormData(input);

console.log(result);
// 输出: { name: "张三", email: "zhang@example.com" }

4.2 数据清洗流水线

function cleanData(textArray) {
    return textArray.map(item => {
        return item
            .trim()                    // 去除两端空白
            .replace(/\s+/g, " ")      // 规范内部空白
            .replace(/[，。！？]/g, ",")  // 统一标点
            .toLowerCase();            // 转为小写
    });
}

const rawData = ["  你 好 ，世界  ", " JavaScript   很 棒 ！", "  TRIM 方法  "];
const cleaned = cleanData(rawData);

console.log(cleaned);
// 输出: ["你好,世界", "javascript 很棒!", "trim 方法"]

五、方法对比速查表

六、常见问题与解决方案

问题一：为什么 replace() 只替换了第一个匹配项？

这是因为 replace() 默认只替换第一个匹配。如果需要全局替换，有两种解决方案：一是使用带有 g 标志的正则表达式；二是使用全局替换方法 replaceAll()（ES2021+）：

const str = "apple, apple, apple";

// 方法一：正则表达式全局标志
str.replace(/apple/g, "orange");

// 方法二：使用 replaceAll()
str.replaceAll("apple", "orange");

问题二：substring() 和 slice() 有什么区别？

主要区别在于对负数索引的处理：substring() 会将负数自动转换为 0，而 slice() 支持负数索引（从字符串末尾开始计算）。如果需要从字符串末尾截取内容，应使用 slice()。

问题三：如何移除字符串中间的空白？

trim() 只能移除两端的空白。移除中间空白需要使用 replace() 配合正则表达式：

const str = "Hello   World";
str.replace(/\s+/g, " ");  // 输出: "Hello World"

掌握 trim()、substring() 和 replace() 这三个方法，能够应对大多数字符串处理场景。建议在日常开发中多加练习，将这些方法的使用内化为本能，从而提升编码效率和代码质量。