JavaScript中字符串截取的六種高效技巧分享
更新時間：2025年07月01日 08:42:24 作者：燭陰
這篇文章主要介紹了JavaScript字符串截取的六種方法：傳統(tǒng)substring/substr/slice、正則match、split+解構賦值及現代Intl.Segmenter,涵蓋基礎用法、高級技巧、多語言支持和性能優(yōu)化,幫助開發(fā)者選擇合適方案處理不同場景的字符串分割需求,需要的朋友可以參考下
一、基礎方法：substring、substr 和 slice
1. substring() 方法
substring() 是最傳統(tǒng)的字符串截取方法，它接受兩個參數：起始索引和結束索引（可選）。
const str = "Hello, JavaScript!"; // 從索引7開始截取到末尾 console.log(str.substring(7)); // "JavaScript!" // 從索引7截取到17（不包括17） console.log(str.substring(7, 17)); // "JavaScript" // 有趣特性：會自動交換參數如果start>end console.log(str.substring(5, 3)); // "lo" (等同于 substring(3,5)) console.log(str.substring(3, 5)); // "lo"
特點：
- 不修改原字符串
- 負參數會被當作0
- 自動處理起始大于結束的情況
2. substr() 方法（已廢棄）
雖然 substr() 仍然可用，但已被標記為遺留功能，不建議在新代碼中使用。
const str = "Hello, JavaScript!"; // 從索引7開始截取10個字符 console.log(str.substr(7, 10)); // "JavaScript"
特點：
- 第二個參數是長度而非結束索引
- 負的起始索引表示從末尾開始計算
3. slice() 方法
slice() 是最推薦的通用截取方法，行為與數組的 slice() 一致。
const str = "Hello, JavaScript!"; // 從索引7截取到末尾 console.log(str.slice(7)); // "JavaScript!" // 從索引7截取到17（不包括17） console.log(str.slice(7, 17)); // "JavaScript" // 支持負索引（從末尾計算） console.log(str.slice(-6)); // "cript!" console.log(str.slice(7, -1)); // "JavaScript"
特點：
- 支持負索引
- 不自動交換參數
- 更直觀和一致的行為
二、高級技巧：正則表達式截取
4. match() 方法
當需要基于模式而非位置截取時，正則表達式是強大工具。
const str = "訂單號：ORD-2023-98765，請查收";
// 提取訂單號
const orderNumber = str.match(/ORD-\d{4}-\d{5}/)[0];
console.log(orderNumber); // "ORD-2023-98765"
// 提取所有數字
const numbers = str.match(/\d+/g);
console.log(numbers); // ["2023", "98765"]
高級用法：
- 使用捕獲組提取特定部分
- 全局匹配獲取所有符合項
5. split() + 解構賦值
這個組合技巧能優(yōu)雅地提取字符串的特定部分。
const fullName = "張 三";
// 傳統(tǒng)方式
const parts = fullName.split(" ");
const firstName = parts[0];
const lastName = parts[1];
// 使用解構賦值
const [firstName, lastName] = fullName.split(" ");
console.log(firstName, lastName); // "張" "三"
// 處理URL路徑
const url = "/products/electronics/12345";
const [,, category, id] = url.split("/");
console.log(category, id); // "electronics" "12345"
優(yōu)勢：
- 代碼簡潔
- 可讀性強
- 一次性提取多個部分
三、ES6+ 現代方法
6. 國際化截?。篒ntl.Segmenter
處理像中文、日文等沒有空格分隔的語言時，傳統(tǒng)方法難以正確截取詞語。
const str = '測試字符串，包含中文和英文。';
// 傳統(tǒng)方法會按字截取s
console.log(str.slice(0, 4)); // "測試字符" （可能不準確）
// 使用Intl.Segmenter按詞截取
const segmenter = new Intl.Segmenter('zh-CN', { granularity: 'word' });
const segments = [...segmenter.segment(str)];
const firstWord = segments[0].segment;
console.log(firstWord); // "測試" （完整詞）
console.log(segments.map((seg) => seg.segment)); // ['測試', '字符','串', '，','包含', '中文','和', '英文','。']
優(yōu)勢：
- 尊重語言規(guī)則
- 正確處理象形文字、表情符號等
- 支持多種粒度（字、詞、句子）
四、性能優(yōu)化與最佳實踐
性能比較：
- 對于簡單截取，
slice()通常性能最好 - 復雜模式匹配時，預編譯正則表達式更高效
安全截取：
function safeSlice(str, maxLength, suffix = "...") {
if (str.length <= maxLength) return str;
return str.slice(0, maxLength - suffix.length) + suffix;
}
console.log(safeSlice("這是一個很長的字符串", 8)); // "這是一個..."
多字節(jié)字符處理：
function mbSubstr(str, start, length) {
return [...str].slice(start, start + length).join("");
}
console.log(mbSubstr("????????家庭", 1, 2)); // "????"
結語
到此這篇關于JavaScript中字符串截取的六種高效技巧的文章就介紹到這了,更多相關JavaScript字符串截取內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了微信小程序實現轉盤抽獎，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
可折疊區(qū)域的基本思想：通過點擊某個地方來顯示或隱藏屏幕中的某個區(qū)域。2010-10-10
Javascript保存網頁為圖片借助于html2canvas庫實現
借助于html2canvas庫，把網頁保存為Canvas畫布，再把生成的canvas保存成圖片，下面的示例，大家可以看看2014-09-09
這篇文章主要介紹了JS中循環(huán)字符串拼接時加換行問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要介紹了微信小程序canvas截取任意形狀的實現代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
這篇文章主要給大家介紹了關于Fetch超時設置與終止請求的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Fetch具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-05-05
這篇文章主要介紹了JS+JQuery實現無縫連接輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
用了setTimeout()想實現遞歸調用，如果第一個參數不加引號的話，就會出錯，下面與大家分享下該如何解決2014-09-09
比較之后，我們可以發(fā)現，第二方法更加的直觀，易于理解。但是少了封裝過程，代碼完全裸露在外。2010-12-12
這篇文章主要給大家介紹了關于JavaScript如何調用C++模塊中函數的相關資料,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01