JavaScript 字串方法說明：substr、substring 與 slice（最佳實踐與現代用法）

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. 介紹

JavaScript 是網頁開發中不可或缺的程式語言。特別是字串操作，常用於資料格式化、分析以及動態更新 UI。
在本篇文章中，我們將詳細說明三個常用的 JavaScript 字串方法——substr、substring 與 slice。由於這些方法提供相似的功能，了解它們的差異能幫助你在不同情境下選擇最適合的方式。
我們也會討論為何 substr 已被棄用，並提供替代寫法，給予使用現代最佳實踐的實用建議。

2. 各方法的基本資訊與用法

本節說明 substr、substring、slice 的基本語法與使用方式。掌握這些方法能協助你選擇合適的工具，提升程式碼的可讀性與可維護性。

2.1 substr 方法

語法：

string.substr(start, length)

說明：

• start：指定擷取的起始索引（從 0 開始）。
• length：指定要擷取的字元數。若省略，則會持續擷取至字串結尾。

範例用法：

let str = "JavaScript";
console.log(str.substr(0, 4)); // Output: "Java"
console.log(str.substr(4, 6)); // Output: "Script"

備註：
substr 方法已 不建議使用（deprecated），建議未來的程式碼避免使用。請改用 slice 或 substring。

替代範例（使用 slice）：

let str = "JavaScript";
console.log(str.slice(0, 4)); // Output: "Java"
console.log(str.slice(4));   // Output: "Script"

2.2 substring 方法

語法：

string.substring(start, end)

說明：

• start：擷取的起始索引。
• end：結束索引（此索引的字元不包含在內）。

範例用法：

let str = "JavaScript";
console.log(str.substring(0, 4)); // Output: "Java"
console.log(str.substring(4, 10)); // Output: "Script"

重點：

1. 參數順序會自動校正：若呼叫 substring(10, 4)，會被視為 substring(4, 10)。
2. 負值會被忽略：任何負數參數皆視為 0。

需要負值時的替代範例（使用 slice）：

let str = "JavaScript";
console.log(str.slice(-6)); // Output: "Script"

2.3 slice 方法

語法：

string.slice(start, end)

說明：

• start：擷取的起始索引。
• end：結束索引（此索引的字元不包含在內）。

範例用法：

let str = "JavaScript";
console.log(str.slice(0, 4));  // Output: "Java"
console.log(str.slice(-6));   // Output: "Script"

重點：

1. 支援負值：負數索引會從字串末端開始計算。
2. 同時適用於字串與陣列：也能從陣列中擷取元素，具備高度彈性。

3. 各方法的比較表

依使用情境選擇合適的方法：

• 擷取短段文字：→ slice
• 需要負值時：→ slice
• 相容舊有程式碼：→ 盡量避免使用 substr；視需求遷移

4. 實用程式碼範例

基本字串操作

let text = "JavaScriptProgramming";

// Extract the first 10 characters
console.log(text.slice(0, 10)); // "JavaScript"

// Extract the last 3 characters
console.log(text.slice(-3));   // "ing"

依模式擷取值

let url = "https://example.com/index.html";

// Get the file name
console.log(url.slice(url.lastIndexOf("/") + 1)); // "index.html"

5. 如何處理已棄用的方法

JavaScript 的 substr 方法已 不建議使用（deprecated）。原因是最新的 ECMAScript 規範已將 substr 列為不建議使用的方法。
本節說明 substr 的問題、可替代的方法，以及如何遷移程式碼。

5.1 為何 substr 已被棄用？

1. 可讀性差：

• substr 使用第二個參數作為「要擷取的字元數」，
  這與其他方法使用結束索引的方式不同。
  此不一致性使得程式碼較難理解。

1. 因規範變更可能產生未來相容性問題：

• 在 ECMAScript 標準化過程中，舊有功能會被標記為棄用。
  新程式碼不應依賴它們。

1. 不支援負值：

• substr 不支援負索引，而 slice 則支援。

5.2 如何遷移至現代方法

案例 1：擷取固定長度的子字串

// Deprecated code
let str = "JavaScript";
console.log(str.substr(0, 4)); // "Java"

// Recommended (slice)
console.log(str.slice(0, 4)); // "Java"

案例 2：擷取字串的結尾

// Deprecated code
console.log(str.substr(-6)); // Error (negative not supported)

// Recommended (slice)
console.log(str.slice(-6)); // "Script"

案例 3：擷取 URL 或檔名的一部分

let url = "https://example.com/index.html";

// Deprecated code
let filename = url.substr(url.lastIndexOf("/") + 1);
console.log(filename); // "index.html"

// Recommended (slice)
let filenameNew = url.slice(url.lastIndexOf("/") + 1);
console.log(filenameNew); // "index.html"

5.3 對舊有程式碼的重構要點

1. 執行程式碼掃描：

• 使用 ESLint 等工具偵測 substr 的使用位置。

1. 加強測試覆蓋率：

• 透過單元測試確保替換方法後行為仍然正確。

1. 逐步遷移：

• 優先在重要或執行頻繁的區段進行取代。

5.4 遠離 substr 的好處

1. 提升可讀性與可維護性：

• 程式碼意圖更為清晰，增進團隊理解。

1. 符合現代標準的相容性：

• 遵循 ECMAScript 標準可確保長期穩定。

1. 彈性支援負值：

• slice 能簡潔地從起始或結尾位置擷取。

6. 常見問題 (FAQ)

本節彙總了關於 JavaScript 字串操作方法的常見問題與解答。

Q1：我還能使用 substr 嗎？

A：
可以，絕大多數現代瀏覽器仍支援 substr。
但因 ECMAScript 已將其標記為棄用，在新專案或需要未來相容性的程式碼中應避免使用。
建議的替代方案：

let str = "JavaScript";
console.log(str.slice(0, 4)); // "Java"

Q2：slice 與 substring 有何差異？

A：
下表總結了兩者的差異：

範例：

let str = "JavaScript";

// slice examples
console.log(str.slice(0, 4));   // "Java"
console.log(str.slice(-6));    // "Script"

// substring examples
console.log(str.substring(0, 4));  // "Java"
console.log(str.substring(4, 10)); // "Script"

Q3：持續使用已棄用的方法有什麼風險？

A：

1. 可能被瀏覽器移除支援： substr 最終可能不再被支援。
2. 維護成本上升： 除錯已棄用功能會額外耗時。
3. 程式碼品質下降： 不遵循現代標準會降低可讀性。

Q4：哪種方法最適合處理長字串？

A：
slice 最適合，因為它支援負索引，且具備高度彈性。
範例：

let longText = "This is a very long text string used for testing purposes.";

// First 10 characters
console.log(longText.slice(0, 10)); // "This is a "

// Last 10 characters
console.log(longText.slice(-10));  // "purposes."

Q5：如何使用負值進行倒數計算？

A：
使用 slice，因為 substring 會將負值視為 0。
範例：

let str = "JavaScript";

// slice supports negative values
console.log(str.slice(-6));  // "Script"

// substring treats negative as 0
console.log(str.substring(-6)); // "JavaScript"

Q6：是否存在效能差異？

A: 現代瀏覽器在 slice、substring 或 substr 之間並無顯著的效能差異。
由於這些都是原生函式，應優先考慮可讀性與可維護性，而非微小的效能優化。

7. 摘要與建議最佳實踐

在本文中，我們探討了 JavaScript 字串方法 substr、substring 與 slice，涵蓋其基本語法、差異、實務程式碼範例，以及對已棄用方法的遷移策略。
本節重新整理各方法的關鍵特性，並提出建議的現代最佳實踐。

7.1 各方法摘要

7.2 實務選擇準則

1. 使用 substring 進行簡單範圍擷取：

• 不需要負值時的最佳選擇。範例：

  let str = "JavaScript";
  console.log(str.substring(0, 4)); // Output: "Java"
  

2. 使用 slice 以獲得最大彈性：

• 支援負索引，且是新程式碼的首選方法。範例：

  let str = "JavaScript";
  console.log(str.slice(-6)); // Output: "Script"
  

3. 盡快取代 substr：

• 在維護舊有程式碼時，遷移至 slice 或 substring。

7.3 現代最佳實踐

1. 以可讀性為首要考量撰寫程式碼：

• 清晰簡潔的程式碼有助於長期維護。

2. 避免使用已棄用的方法：

• substr 未來可能失去瀏覽器支援——請儘早遷移。

3. 在需要負值時使用 slice：

• slice 是唯一能正確處理負索引的方法。

4. 使用 ESLint 與測試套件維護程式碼品質：

• 靜態分析可偵測已棄用的方法，並強制執行現代程式風格。

7.4 現代程式風格範例

// Example: Extract domain from an email address
let email = "user@example.com";
let domain = email.slice(email.indexOf("@") + 1);
console.log(domain); // Output: "example.com"

// Example: Get file extension from a URL
let url = "document.pdf";
let extension = url.slice(-3);
console.log(extension); // Output: "pdf"

7.5 讀者行動計畫

1. 檢視現有程式碼：

• 檢查專案中是否仍使用 substr，並在必要時進行替換。

2. 在新程式碼中遵循最佳實踐：

• 採用現代、彈性的寫法，避免使用已棄用的功能。

3. 善用註解與社群提問：

• 分享問題或使用案例，協助他人學習，同時加深自己的理解。

結論

本文深入說明了 JavaScript 的 substr、substring 與 slice 方法，包含語法、範例、比較表與遷移策略。

• 避免使用已棄用的 substr。
• 在簡單情境下使用 substring。
• 在需要最大彈性與現代最佳實踐時使用 slice。

運用這些見解，撰寫高效且易於維護的 JavaScript 程式碼。

8. 相關連結與參考資料

為了加深對 substr、substring 與 slice 的了解，以下提供實用的連結與參考資料。官方文件與學習資源能協助您掌握最新的 JavaScript 更新與技巧。

8.1 官方文件

1. MDN Web Docs – JavaScript String 物件

• 連結： String – MDN Web Docs
• 概述： 完整的 JavaScript String 物件參考，包含詳細規格與範例。

1. ECMAScript 規範 (ECMA-262)

• 連結： ECMAScript 官方規範
• 概述： 官方語言規範，涵蓋最新的 ECMAScript 功能、已棄用的方法與技術細節。

8.2 學習網站與教學

1. JavaScript.info – 字串操作指南

• 連結： JavaScript.info
• 概述： 詳盡的指南，涵蓋基礎與進階的字串操作，並提供實作範例。

1. Progate – JavaScript 初學者至中階課程

• 連結： Progate
• 概述： 互動式平台，適合新手透過實作練習學習 JavaScript。

1. DotInstall – JavaScript 入門教學

• 連結： DotInstall
• 概述： 短片教學，讓你以視覺化且快速的方式學習 JavaScript。

8.3 實作範例程式碼資源

1. GitHub – JavaScript 範例專案

• 連結： GitHub
• 概述： 透過探索開源專案，學習最佳實踐與真實世界的程式碼模式。

1. CodePen – 互動式程式碼分享

• 連結： CodePen
• 概述： 與其他開發者分享與測試程式碼，或瀏覽範例以獲得靈感。

8.4 推薦書籍

1. JavaScript: The Definitive Guide (第 7 版)

• 概述： 全面且權威的參考書，從基礎到進階功能皆有詳盡說明。

1. Mastering Modern JavaScript – 修訂版

• 概述： 實務導向的參考書，聚焦於現代 JavaScript 與最新的程式碼標準。

8.5 社群與論壇

1. Stack Overflow（日文版）

• 連結： Stack Overflow
• 概述： Q&A 社群，能快速解決 JavaScript 問題。

1. Qiita

• 連結： Qiita
• 概述： 日本平台，充斥實用文章與 JavaScript 案例研究。

1. Teratail

• 連結： Teratail
• 概述： 日文 Q&A 網站，適合以母語提問技術問題。

結論

本節介紹了多元資源，從官方文件、教學網站、範例程式碼庫到社群平台，協助你持續學習 JavaScript 字串操作。

重點回顧：

1. 定期查閱官方文件：

• 確保你的程式風格與最新標準保持一致。

1. 透過實作強化技能：

• 多練習能讓概念更清晰，提升實務應用能力。

1. 積極參與社群：

• 分享問題與解答能加深理解，同時擴大人脈。