JavaScript字符串方法完全指南

前言

字符串(String)是JavaScript中最常用的数据类型之一。JavaScript提供了丰富的字符串操作方法,掌握这些方法对于日常开发非常重要。本文将系统地介绍JavaScript中的字符串方法。

一、字符串的特点

1. 不可变性: 字符串是不可变的,所有字符串方法都不会改变原字符串
2. 基本包装类型: 可以使用String对象的方法
3. 索引访问: 可以通过索引访问单个字符

let str = "Hello";
str[0]; // "H"
str.charAt(0); // "H"

// 字符串不可变性示例
str[0] = "h"; // 无效
console.log(str); // 仍然是 "Hello"

二、常用方法分类

1. 查找类方法

1.1 indexOf() 和 lastIndexOf()

const str = "Hello World";
str.indexOf("o");     // 4
str.lastIndexOf("o"); // 7
str.indexOf("z");     // -1 (未找到)

// 实用技巧：检查子串是否存在
if (str.indexOf("World") !== -1) {
    console.log("包含World");
}

1.2 includes(), startsWith(), endsWith()

const str = "Hello World";
str.includes("World");     // true
str.startsWith("Hello");   // true
str.endsWith("World");     // true

// 带位置参数的使用
str.startsWith("World", 6);  // true
str.endsWith("Hello", 5);    // true

1.3 charAt() 和 charCodeAt()

const str = "Hello";
str.charAt(0);      // "H"
str.charCodeAt(0);  // 72 (H的Unicode值)

// 获取最后一个字符
str.charAt(str.length - 1); // "o"

2. 转换类方法

2.1 大小写转换

const str = "Hello World";
str.toLowerCase();  // "hello world"
str.toUpperCase();  // "HELLO WORLD"

// 实用场景：不区分大小写的比较
const compare = (str1, str2) => {
    return str1.toLowerCase() === str2.toLowerCase();
};

2.2 去除空格

const str = "  Hello World  ";
str.trim();      // "Hello World"
str.trimLeft();  // "Hello World  "
str.trimRight(); // "  Hello World"

// 自定义去除所有空格
const removeAllSpaces = str => str.replace(/\s/g, '');

3. 截取和拼接

3.1 slice(), substring(), substr()

const str = "Hello World";
str.slice(6);      // "World"
str.slice(0, 5);   // "Hello"
str.slice(-5);     // "World"

str.substring(6);   // "World"
str.substring(0, 5);// "Hello"

str.substr(6, 5);   // "World"

// 实用技巧：获取最后N个字符
const getLastChars = (str, n) => str.slice(-n);

3.2 concat() 和 模板字符串

const str1 = "Hello";
const str2 = "World";

// concat方法
str1.concat(" ", str2); // "Hello World"

// 模板字符串（推荐）
const name = "张三";
const greeting = `你好，${name}！`; // "你好，张三！"

4. 正则相关方法

4.1 match() 和 matchAll()

const str = "Hello 2021, Hello 2022";

// 使用match
const matches = str.match(/Hello/g);
console.log(matches); // ["Hello", "Hello"]

// 使用matchAll (ES2020)
const matchesIterator = str.matchAll(/Hello/g);
for (const match of matchesIterator) {
    console.log(match);
}

4.2 replace() 和 replaceAll()

const str = "Hello World";
str.replace("World", "JavaScript"); // "Hello JavaScript"

// 使用正则替换所有匹配
const str2 = "hello hello hello";
str2.replace(/hello/g, "hi");      // "hi hi hi"

// replaceAll (ES2021)
str2.replaceAll("hello", "hi");    // "hi hi hi"

// 使用函数作为替换值
const str3 = "cat, bat, sat, fat";
str3.replace(/[a-zA-Z]+/g, str => str.toUpperCase());
// "CAT, BAT, SAT, FAT"

三、实用场景示例

1. URL参数解析

function getQueryParams(url) {
    const params = {};
    const queryString = url.split('?')[1];
    if (!queryString) return params;
    
    queryString.split('&').forEach(param => {
        const [key, value] = param.split('=');
        params[key] = decodeURIComponent(value);
    });
    
    return params;
}

// 使用示例
const url = "https://example.com?name=张三&age=20";
console.log(getQueryParams(url)); // { name: "张三", age: "20" }

2. 字符串模板引擎

function template(str, data) {
    return str.replace(/\${(\w+)}/g, (match, key) => {
        return data[key] || '';
    });
}

// 使用示例
const template1 = "你好，${name}！今年${age}岁了。";
const data = { name: "张三", age: 20 };
console.log(template(template1, data));
// "你好，张三！今年20岁了。"

3. 格式化处理

// 数字千分位格式化
function formatNumber(num) {
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

// 手机号格式化
function formatPhone(phone) {
    return phone.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');
}

console.log(formatNumber(1234567890)); // "1,234,567,890"
console.log(formatPhone('13812345678')); // "138-1234-5678"

四、面试常见问题

1. slice、substring和substr的区别？

/*
1. slice(start, end)：
   - 支持负数索引
   - end表示结束位置（不包含）
   
2. substring(start, end)：
   - 不支持负数索引
   - 会自动调整参数顺序
   
3. substr(start, length)：
   - 支持负数索引
   - 第二个参数表示长度
*/

const str = "Hello World";
console.log(str.slice(-5));      // "World"
console.log(str.substring(-5));   // "Hello World"
console.log(str.substr(-5, 3));   // "Wor"

2. 实现一个字符串反转函数

// 方法1：使用数组
function reverse1(str) {
    return str.split('').reverse().join('');
}

// 方法2：使用for循环
function reverse2(str) {
    let result = '';
    for (let i = str.length - 1; i >= 0; i--) {
        result += str[i];
    }
    return result;
}

// 方法3：使用递归
function reverse3(str) {
    return str.length <= 1 ? str : reverse3(str.slice(1)) + str[0];
}

五、最佳实践建议

1. 优先使用新的ES6+方法
2. 注意字符串的不可变性
3. 合理使用正则表达式
4. 考虑性能影响
5. 注意编码问题

总结

JavaScript字符串方法丰富且强大，合理使用这些方法可以大大提高开发效率。在实际开发中，建议：

1. 熟练掌握常用方法
2. 理解方法的特点和使用场景
3. 注意性能优化
4. 保持代码的可读性和维护性

希望本文能帮助你更好地理解和使用JavaScript字符串方法！