javascript中如何使用substr()方法

# JavaScript中如何使用substr()方法

## 概述

`substr()`是JavaScript字符串操作中常用的方法之一，用于從字符串中提取指定位置的子字符串。雖然ES6之后推薦使用`substring()`和`slice()`方法，但理解`substr()`的用法對維護舊代碼或特定場景仍有重要意義。

## 語法

```javascript
str.substr(start[, length])

• start：必需，開始提取的位置（索引從0開始）
• length：可選，要提取的字符數。若省略則提取到字符串末尾

參數詳解

start參數

• 正數：從字符串開頭計算的索引（0表示第一個字符）
• 負數：從字符串末尾計算的索引（-1表示最后一個字符）
• 超出字符串長度：
  • 正數超出：返回空字符串
  • 負數超出：視為0

length參數

• 正數：提取指定數量的字符
• 負數：自動轉換為0（返回空字符串）
• 省略：提取到字符串末尾
• 超過剩余字符數：提取到字符串末尾

返回值

返回一個新的字符串，包含從原字符串提取的子串，不修改原字符串。

基礎示例

示例1：基本用法

const str = "Hello, World!";
console.log(str.substr(7));      // "World!"
console.log(str.substr(7, 5));   // "World"

示例2：負數索引

const str = "JavaScript";
console.log(str.substr(-3));     // "ipt"（最后3個字符）
console.log(str.substr(-6, 4));  // "Scri"

示例3：邊界情況

const str = "Example";
console.log(str.substr(10));      // ""（超出長度）
console.log(str.substr(-10, 2));  // "Ex"（負數超出視為0）
console.log(str.substr(2, 0));    // ""（長度為0）

與相似方法的對比

substr() vs substring()

substr() vs slice()

實際應用場景

場景1：文件擴展名提取

function getFileExtension(filename) {
  const dotIndex = filename.lastIndexOf('.');
  return dotIndex === -1 ? '' : filename.substr(dotIndex + 1);
}

場景2：手機號中間四位隱藏

function hidePhoneNumber(phone) {
  return phone.substr(0, 3) + '****' + phone.substr(7);
}

場景3：長文本截取預覽

function getPreview(text, maxLength) {
  return text.length > maxLength 
    ? text.substr(0, maxLength) + '...' 
    : text;
}

注意事項

1. 非標準方法：substr()未被納入ECMAScript規范，屬于遺留功能
2. 編碼問題：對多字節字符（如中文）可能產生意外結果：

   
   "中文測試".substr(1, 2) // 可能返回亂碼
   

3. 性能考慮：在循環中頻繁調用可能影響性能

替代方案建議

使用substring()

// 等效于str.substr(2, 4)
str.substring(2, 2 + 4)

使用slice()

// 等效于str.substr(-3)
str.slice(-3)

ES6字符串解構

const [first, ...rest] = str;
const firstThree = [...str].slice(0, 3).join('');

瀏覽器兼容性

• 所有主流瀏覽器完全支持
• 更推薦在新項目中使用slice()和substring()

總結

雖然substr()方法在JavaScript中仍然可用，但考慮到它是非標準方法且存在更現代的替代方案，建議： 1. 新項目優先使用slice()和substring() 2. 維護舊代碼時需理解其特性 3. 處理Unicode字符時考慮使用Array.from(str).slice()等方案

掌握substr()方法有助于更好地理解JavaScript字符串操作的演變過程，但在實際開發中應根據具體情況選擇最合適的工具。 “`

注：本文實際約1000字，可通過以下方式擴展： 1. 增加更多邊界案例 2. 添加性能測試對比數據 3. 詳細說明Unicode處理方案 4. 補充歷史背景知識