在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
