在JavaScript開(kāi)發(fā)中，字符串處理是我們每天都要面對(duì)的任務(wù)。無(wú)論是用戶(hù)輸入驗(yàn)證、數(shù)據(jù)格式化還是動(dòng)態(tài)內(nèi)容生成，都離不開(kāi)字符串操作。本文全面梳理JavaScript中字符串的各種操作方法，輕松應(yīng)對(duì)各種字符串處理需求。
一、字符串創(chuàng)建與基本操作
1. 創(chuàng)建字符串
let str1 = 'Hello World';let str2 = "Hello JavaScript";let str3 = `Hello Template`;
let str4 = new String('Hello String');
2. 訪問(wèn)字符
let str = "JavaScript";console.log(str[0]); console.log(str.charAt(4)); console.log(str.charCodeAt(0));
二、字符串查找與檢測(cè)
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. 正則表達(dá)式匹配
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"
// 區(qū)別：slice支持負(fù)數(shù)索引，substring會(huì)自動(dòng)調(diào)整參數(shù)順序console.log(str.slice(-5)); // "World"
let str = 'hello world';console.log(str.slice(6)) //'world' //從第六個(gè)位置開(kāi)始取到最后console.log(str.slice(-5,-3)) //'wo' //從后開(kāi)始計(jì)算
說(shuō)明：
slice參數(shù)：
1)beginIndex，表示從該索引處開(kāi)始提取字符串的字符(包括)，如果為負(fù)數(shù)則從后開(kāi)始計(jì)算
2)endIndex，表示從該索引處結(jié)束提取字符串(不包括)，如果省略則一直提取到字符串末尾，如果為負(fù)數(shù)從后開(kāi)始計(jì)算
substring：
此方法和slice方法功能相同都是提取一個(gè)字符串，并返回提取到的字符串
參數(shù)上和slice有所不同。
參數(shù)：1)startIndex，表示從該索引處開(kāi)始提取字符串的字符(包括)
2)endIndex,表示從該索引處結(jié)束提取字符串(不包括)
3)上述兩個(gè)參數(shù)：如果為負(fù)數(shù)或者NaN則都會(huì)被當(dāng)做0，如果大于字符串的長(zhǎng)度則會(huì)被當(dāng)做字符串的長(zhǎng)度來(lái)計(jì)算，如果 startIndex 大于 endIndex，則 substring 的執(zhí)行效果就像兩個(gè)參數(shù)調(diào)換了一樣
let str = 'hello world';console.log(str.substring(-1,5)) //'hello' 0-5//startIndex 大于 endIndex，則 substring 的執(zhí)行效果就像兩個(gè)參數(shù)調(diào)換了 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"]
// 限制分割次數(shù)console.log(csv.split(",", 2)); // ["apple", "banana"]
// 正則表達(dá)式分割let text = "Hello123World456JavaScript";console.log(text.split(/\d+/)); // ["Hello", "World", "JavaScript"]
四、字符串修改與轉(zhuǎn)換
1. 大小寫(xiě)轉(zhuǎn)換
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. 替換內(nèi)容
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());
五、字符串連接與重復(fù)
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. 重復(fù)字符串
let str = "Hello";
console.log(str.repeat(3)); console.log("ha".repeat(5));
六、ES6新增的強(qiáng)大功能
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);
七、實(shí)用技巧與最佳實(shí)踐
1. 字符串反轉(zhuǎn)
function reverseString(str) { return [...str].reverse().join('');}
console.log(reverseString("Hello"));
2. 統(tǒng)計(jì)字符出現(xiàn)次數(shù)
function countChars(str, char) { return [...str].filter(c => c === char).length;}
console.log(countChars("Hello World", "l"));
八、性能考慮
字符串連接：在循環(huán)中連接大量字符串時(shí)，使用數(shù)組的join()方法比"+"操作符性能更好
正則表達(dá)式：復(fù)雜的正則表達(dá)式可能影響性能，盡量使用簡(jiǎn)單匹配
內(nèi)存使用：JavaScript字符串是不可變的，每次修改都會(huì)創(chuàng)建新字符串
總結(jié)
JavaScript提供了豐富的字符串操作方法，從基本的查找截取到ES6的高級(jí)功能，掌握這些方法能極大提高開(kāi)發(fā)效率。關(guān)鍵點(diǎn)包括：
熟練使用slice()、substring()、substr()進(jìn)行字符串截取
善用split()和join()進(jìn)行字符串與數(shù)組的轉(zhuǎn)換
掌握模板字符串簡(jiǎn)化字符串拼接
了解正則表達(dá)式在字符串處理中的強(qiáng)大功能
注意不同方法的瀏覽器兼容性
希望本文能幫助你全面掌握J(rèn)avaScript字符串操作，讓你的代碼更加簡(jiǎn)潔高效！
該文章在 2025/8/28 12:38:44 編輯過(guò)
400 186 1886
