JavaScript中字符串截取的六種高效技巧分享
更新時間：2025年07月01日 08:42:24 作者：燭陰
這篇文章主要介紹了JavaScript字符串截取的六種方法：傳統(tǒng)substring/substr/slice、正則match、split+解構(gòu)賦值及現(xiàn)代Intl.Segmenter,涵蓋基礎(chǔ)用法、高級技巧、多語言支持和性能優(yōu)化,幫助開發(fā)者選擇合適方案處理不同場景的字符串分割需求,需要的朋友可以參考下
一、基礎(chǔ)方法：substring、substr 和 slice
1. substring() 方法
substring() 是最傳統(tǒng)的字符串截取方法，它接受兩個參數(shù)：起始索引和結(jié)束索引（可選）。
const str = "Hello, JavaScript!"; // 從索引7開始截取到末尾 console.log(str.substring(7)); // "JavaScript!" // 從索引7截取到17（不包括17） console.log(str.substring(7, 17)); // "JavaScript" // 有趣特性：會自動交換參數(shù)如果start>end console.log(str.substring(5, 3)); // "lo" (等同于 substring(3,5)) console.log(str.substring(3, 5)); // "lo"
特點(diǎn)：
- 不修改原字符串
- 負(fù)參數(shù)會被當(dāng)作0
- 自動處理起始大于結(jié)束的情況
2. substr() 方法（已廢棄）
雖然 substr() 仍然可用，但已被標(biāo)記為遺留功能，不建議在新代碼中使用。
const str = "Hello, JavaScript!"; // 從索引7開始截取10個字符 console.log(str.substr(7, 10)); // "JavaScript"
特點(diǎn)：
- 第二個參數(shù)是長度而非結(jié)束索引
- 負(fù)的起始索引表示從末尾開始計(jì)算
3. slice() 方法
slice() 是最推薦的通用截取方法，行為與數(shù)組的 slice() 一致。
const str = "Hello, JavaScript!"; // 從索引7截取到末尾 console.log(str.slice(7)); // "JavaScript!" // 從索引7截取到17（不包括17） console.log(str.slice(7, 17)); // "JavaScript" // 支持負(fù)索引（從末尾計(jì)算） console.log(str.slice(-6)); // "cript!" console.log(str.slice(7, -1)); // "JavaScript"
特點(diǎn)：
- 支持負(fù)索引
- 不自動交換參數(shù)
- 更直觀和一致的行為
二、高級技巧：正則表達(dá)式截取
4. match() 方法
當(dāng)需要基于模式而非位置截取時，正則表達(dá)式是強(qiáng)大工具。
const str = "訂單號：ORD-2023-98765，請查收";
// 提取訂單號
const orderNumber = str.match(/ORD-\d{4}-\d{5}/)[0];
console.log(orderNumber); // "ORD-2023-98765"
// 提取所有數(shù)字
const numbers = str.match(/\d+/g);
console.log(numbers); // ["2023", "98765"]
高級用法：
- 使用捕獲組提取特定部分
- 全局匹配獲取所有符合項(xiàng)
5. split() + 解構(gòu)賦值
這個組合技巧能優(yōu)雅地提取字符串的特定部分。
const fullName = "張 三";
// 傳統(tǒng)方式
const parts = fullName.split(" ");
const firstName = parts[0];
const lastName = parts[1];
// 使用解構(gòu)賦值
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)勢：
- 代碼簡潔
- 可讀性強(qiáng)
- 一次性提取多個部分
三、ES6+ 現(xiàn)代方法
6. 國際化截取：Intl.Segmenter
處理像中文、日文等沒有空格分隔的語言時，傳統(tǒng)方法難以正確截取詞語。
const str = '測試字符串，包含中文和英文。';
// 傳統(tǒng)方法會按字截取s
console.log(str.slice(0, 4)); // "測試字符" （可能不準(zhǔn)確）
// 使用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)化與最佳實(shí)踐
性能比較：
- 對于簡單截取，
slice()通常性能最好 - 復(fù)雜模式匹配時，預(yù)編譯正則表達(dá)式更高效
安全截取：
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)); // "????"
結(jié)語
到此這篇關(guān)于JavaScript中字符串截取的六種高效技巧的文章就介紹到這了,更多相關(guān)JavaScript字符串截取內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript數(shù)組的定義及數(shù)字操作技巧
這篇文章主要介紹了JavaScript數(shù)組的定義及數(shù)字操作技巧的相關(guān)資料,需要的朋友可以參考下2016-06-06
javascript函數(shù)可以用任意多個參數(shù)來調(diào)用，而不用管函數(shù)定義時指定了幾個參數(shù)。因?yàn)楹瘮?shù)是弱類型的，沒有方法去聲明它所期望的參數(shù)類型，并且給任何函數(shù)傳遞任何類型的值都是合法的2015-11-11
在微信小程序中,你可以創(chuàng)建自定義組件,這些組件可以在不同的頁面和項(xiàng)目中重復(fù)使用,非常適合復(fù)用代碼,這篇文章主要介紹了微信小程序代碼復(fù)用技巧的相關(guān)資料,需要的朋友可以參考下2026-03-03
javascript封裝 Cookie 應(yīng)用接口
本文通過幾個簡單的示例向大家展示了javascript封裝cookie的注意事項(xiàng)及操作方法，非常的簡單實(shí)用，最后附上一則具體實(shí)例，有需要的小火把可以參考下。2015-08-08
這篇文章主要介紹了bootstrap表單按回車會自動刷新頁面的問題及解決辦法，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
JavaScript中的for...of和for...in循環(huán)容易遇到的問題及解決方法總結(jié)
在 JavaScript 編程中,for...of 和 for...in 是常用的循環(huán)語法,但它們在使用時可能會引發(fā)一些意想不到的問題,本文將分享我在使用這兩種循環(huán)時所遇到的坑和經(jīng)驗(yàn),需要的朋友可以參考下2023-08-08
本文主要介紹了js對cookie的操作：js設(shè)置cookie；js獲取cookie；給cookie設(shè)置終止日期；刪除cookie 等，具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
JavaScript和jquery獲取父級元素、子級元素、兄弟元素的方法
本文給大家簡單總結(jié)了下JavaScript和jquery獲取父級元素、子級元素、兄弟元素的方法，非常的簡單實(shí)用，有需要的小伙伴可以參考下2016-06-06
給政府做的，完全要求高，居然用硬盤序列號，MAC地址，CPU地址三項(xiàng)來綁定指定的人來操作。2008-12-12
這篇文章主要為大家詳細(xì)介紹了JavaScript prototype屬性,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10