在JavaScript开发中，字符串处理是我们每天都要面对的任务。无论是用户输入验证、数据格式化还是动态内容生成，都离不开字符串操作。本文全面梳理JavaScript中字符串的各种操作方法，轻松应对各种字符串处理需求。
一、字符串创建与基本操作
1. 创建字符串
let str1 = 'Hello World';let str2 = "Hello JavaScript";let str3 = `Hello Template`;
let str4 = new String('Hello String');
2. 访问字符
let str = "JavaScript";console.log(str[0]); console.log(str.charAt(4)); console.log(str.charCodeAt(0));
二、字符串查找与检测
1. 查找子字符串位置
let text = "Hello JavaScript World";
console.log(text.indexOf("JavaScript")); console.log(text.indexOf("script"));
console.log(text.lastIndexOf("o"));
console.log(text.includes("Java"));
console.log(text.startsWith("Hello")); console.log(text.endsWith("World"));
2. 正则表达式匹配
let text = "The quick brown fox jumps over the lazy dog";
console.log(text.match(/[A-Z]/g));
console.log(/fox/.test(text));
console.log(text.search(/brown/));
三、字符串截取与分割
1. 截取子字符串
let str = "HelloJavaScriptWorld";
console.log(str.slice(5, 10)); // "JavaS"console.log(str.substring(5, 10)); // "JavaS"console.log(str.substr(5, 6)); // "JavaSc"
// 区别：slice支持负数索引，substring会自动调整参数顺序console.log(str.slice(-5)); // "World"
let str = 'hello world';console.log(str.slice(6)) //'world' //从第六个位置开始取到最后console.log(str.slice(-5,-3)) //'wo' //从后开始计算
说明：
slice参数：
1)beginIndex，表示从该索引处开始提取字符串的字符(包括)，如果为负数则从后开始计算
2)endIndex，表示从该索引处结束提取字符串(不包括)，如果省略则一直提取到字符串末尾，如果为负数从后开始计算
substring：
此方法和slice方法功能相同都是提取一个字符串，并返回提取到的字符串
参数上和slice有所不同。
参数：1)startIndex，表示从该索引处开始提取字符串的字符(包括)
2)endIndex,表示从该索引处结束提取字符串(不包括)
3)上述两个参数：如果为负数或者NaN则都会被当做0，如果大于字符串的长度则会被当做字符串的长度来计算，如果 startIndex 大于 endIndex，则 substring 的执行效果就像两个参数调换了一样
let str = 'hello world';console.log(str.substring(-1,5)) //'hello' 0-5//startIndex 大于 endIndex，则 substring 的执行效果就像两个参数调换了 console.log(str.substring(5,-1)) //'hello' 0-5
2. 分割字符串
let csv = "apple,banana,orange,grape";let fruits = csv.split(",");console.log(fruits); // ["apple", "banana", "orange", "grape"]
// 限制分割次数console.log(csv.split(",", 2)); // ["apple", "banana"]
// 正则表达式分割let text = "Hello123World456JavaScript";console.log(text.split(/\d+/)); // ["Hello", "World", "JavaScript"]
四、字符串修改与转换
1. 大小写转换
let str = "Hello World";
console.log(str.toUpperCase()); console.log(str.toLowerCase());
function capitalize(str) { return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();}console.log(capitalize("hello"));
2. 替换内容
let text = "I love apples. Apples are great!";
console.log(text.replace("apples", "oranges"));
console.log(text.replace(/apples/gi, "oranges"));
console.log(text.replace(/\b\w{4,}\b/g, word => word.toUpperCase()));
3. 去除空白字符
let str = " Hello World ";
console.log(str.trim()); console.log(str.trimStart()); console.log(str.trimEnd());
五、字符串连接与重复
1. 连接字符串
let str1 = "Hello";let str2 = "World";
console.log(str1 + " " + str2);
console.log(str1.concat(" ", str2));
console.log(`${str1} ${str2}`);
let words = ["Hello", "JavaScript", "World"];console.log(words.join(" "));
2. 重复字符串
let str = "Hello";
console.log(str.repeat(3)); console.log("ha".repeat(5));
六、ES6新增的强大功能
1. 模板字符串
let name = "Alice";let age = 25;
console.log(`My name is ${name} and I'm ${age} years old.`);
console.log(`Next year I will be ${age + 1} years old.`);
let multiLine = ` This is a multi-line string`;
2. 字符串填充
let str = "Hello";
console.log(str.padStart(10, "*"));
console.log(str.padEnd(10, "-"));
let number = "123";console.log(number.padStart(6, "0"));
3. 遍历字符串
let str = "Hello";
for (let char of str) { console.log(char);}
let chars = [...str];console.log(chars);
七、实用技巧与最佳实践
1. 字符串反转
function reverseString(str) { return [...str].reverse().join('');}
console.log(reverseString("Hello"));
2. 统计字符出现次数
function countChars(str, char) { return [...str].filter(c => c === char).length;}
console.log(countChars("Hello World", "l"));
八、性能考虑
字符串连接：在循环中连接大量字符串时，使用数组的join()方法比"+"操作符性能更好
正则表达式：复杂的正则表达式可能影响性能，尽量使用简单匹配
内存使用：JavaScript字符串是不可变的，每次修改都会创建新字符串
总结
JavaScript提供了丰富的字符串操作方法，从基本的查找截取到ES6的高级功能，掌握这些方法能极大提高开发效率。关键点包括：
希望本文能帮助你全面掌握JavaScript字符串操作，让你的代码更加简洁高效！
该文章在 2025/8/28 12:38:44 编辑过
400 186 1886
