欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript中字符串截取的六種高效技巧分享

 更新時(shí)間：2025年07月01日 08:42:24   作者：燭陰  
這篇文章主要介紹了JavaScript字符串截取的六種方法：傳統(tǒng)substring/substr/slice、正則match、split+解構(gòu)賦值及現(xiàn)代Intl.Segmenter,涵蓋基礎(chǔ)用法、高級(jí)技巧、多語言支持和性能優(yōu)化,幫助開發(fā)者選擇合適方案處理不同場(chǎng)景的字符串分割需求,需要的朋友可以參考下

一、基礎(chǔ)方法：substring、substr 和 slice

1. substring() 方法

substring() 是最傳統(tǒng)的字符串截取方法，它接受兩個(gè)參數(shù)：起始索引和結(jié)束索引（可選）。

const str = "Hello, JavaScript!";

// 從索引7開始截取到末尾
console.log(str.substring(7)); // "JavaScript!"

// 從索引7截取到17（不包括17）
console.log(str.substring(7, 17)); // "JavaScript"

// 有趣特性：會(huì)自動(dòng)交換參數(shù)如果start>end
console.log(str.substring(5, 3)); // "lo" (等同于 substring(3,5))
console.log(str.substring(3, 5)); // "lo"

特點(diǎn)：

  • 不修改原字符串
  • 負(fù)參數(shù)會(huì)被當(dāng)作0
  • 自動(dòng)處理起始大于結(jié)束的情況

2. substr() 方法（已廢棄）

雖然 substr() 仍然可用，但已被標(biāo)記為遺留功能，不建議在新代碼中使用。

const str = "Hello, JavaScript!";

// 從索引7開始截取10個(gè)字符
console.log(str.substr(7, 10)); // "JavaScript"

特點(diǎn)：

  • 第二個(gè)參數(shù)是長(zhǎng)度而非結(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ù)索引
  • 不自動(dòng)交換參數(shù)
  • 更直觀和一致的行為

二、高級(jí)技巧：正則表達(dá)式截取

4. match() 方法

當(dāng)需要基于模式而非位置截取時(shí)，正則表達(dá)式是強(qiáng)大工具。

const str = "訂單號(hào)：ORD-2023-98765，請(qǐng)查收";

// 提取訂單號(hào)
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"]

高級(jí)用法：

  • 使用捕獲組提取特定部分
  • 全局匹配獲取所有符合項(xiàng)

5. split() + 解構(gòu)賦值

這個(gè)組合技巧能優(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)勢(shì)：

  • 代碼簡(jiǎn)潔
  • 可讀性強(qiáng)
  • 一次性提取多個(gè)部分

三、ES6+ 現(xiàn)代方法

6. 國(guó)際化截取：Intl.Segmenter

處理像中文、日文等沒有空格分隔的語言時(shí)，傳統(tǒng)方法難以正確截取詞語。

const str = '測(cè)試字符串，包含中文和英文。';

// 傳統(tǒng)方法會(huì)按字截取s
console.log(str.slice(0, 4)); // "測(cè)試字符" （可能不準(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); // "測(cè)試" （完整詞）
console.log(segments.map((seg) => seg.segment)); // ['測(cè)試', '字符','串',   '，','包含', '中文','和',   '英文','。']

優(yōu)勢(shì)：

  • 尊重語言規(guī)則
  • 正確處理象形文字、表情符號(hào)等
  • 支持多種粒度（字、詞、句子）

四、性能優(yōu)化與最佳實(shí)踐

性能比較：

  • 對(duì)于簡(jiǎn)單截取，slice() 通常性能最好
  • 復(fù)雜模式匹配時(shí)，預(yù)編譯正則表達(dá)式更高效

安全截取：

function safeSlice(str, maxLength, suffix = "...") {
  if (str.length <= maxLength) return str;
  return str.slice(0, maxLength - suffix.length) + suffix;
}

console.log(safeSlice("這是一個(gè)很長(zhǎng)的字符串", 8)); // "這是一個(gè)..."

多字節(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論