Giải thích các phương thức chuỗi JavaScript: substr vs substring vs slice (Thực hành tốt nhất & Sử dụng hiện đại)

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

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

1. Giới thiệu

JavaScript là một ngôn ngữ lập trình thiết yếu trong phát triển web. Đặc biệt, việc thao tác chuỗi thường được sử dụng để định dạng dữ liệu, phân tích và cập nhật giao diện người dùng một cách động.
Trong bài viết này, chúng ta sẽ giải thích chi tiết ba phương thức chuỗi JavaScript thường được sử dụng — substr, substring và slice. Vì các phương thức này cung cấp chức năng tương tự, việc hiểu sự khác nhau giữa chúng sẽ giúp bạn chọn phương thức phù hợp cho từng tình huống.
Chúng tôi cũng sẽ thảo luận lý do tại sao substr đã bị loại bỏ và cung cấp các cách tiếp cận thay thế, đưa ra lời khuyên thực tế để viết JavaScript theo các thực tiễn tốt nhất hiện đại.

2. Thông tin cơ bản và cách sử dụng mỗi phương thức

Phần này giải thích cú pháp cơ bản và cách sử dụng của substr, substring và slice. Hiểu các phương thức này sẽ giúp bạn chọn lựa phù hợp và cải thiện khả năng đọc và bảo trì mã.

2.1 Phương thức substr

Cú pháp:

string.substr(start, length)

Mô tả:

• start : Xác định chỉ mục bắt đầu để trích xuất (đánh số từ 0).
• length : Xác định số ký tự cần trích xuất. Nếu bỏ qua, việc trích xuất sẽ tiếp tục đến cuối chuỗi.

Ví dụ sử dụng:

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

Lưu ý:
Phương thức substr đã bị loại bỏ, và nên tránh sử dụng nó trong mã tương lai. Hãy dùng slice hoặc substring thay thế.

Ví dụ thay thế (sử dụng slice):

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

2.2 Phương thức substring

Cú pháp:

string.substring(start, end)

Mô tả:

• start : Chỉ mục bắt đầu của việc trích xuất.
• end : Chỉ mục kết thúc (ký tự tại chỉ mục này không được bao gồm).

Ví dụ sử dụng:

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

Các điểm:

1. Thứ tự đối số được tự động điều chỉnh: Nếu bạn gọi substring(10, 4), nó sẽ được xử lý như substring(4, 10).
2. Giá trị âm bị bỏ qua: Bất kỳ đối số âm nào cũng được coi là 0.

Ví dụ thay thế khi cần giá trị âm (sử dụng slice):

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

2.3 Phương thức slice

Cú pháp:

string.slice(start, end)

Mô tả:

• start : Chỉ mục bắt đầu của việc trích xuất.
• end : Chỉ mục kết thúc (ký tự tại chỉ mục này không được bao gồm).

Ví dụ sử dụng:

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

Các điểm:

1. Hỗ trợ giá trị âm: Các chỉ mục âm được tính từ cuối chuỗi.
2. Hoạt động cho cả chuỗi và mảng: Nó cũng có thể trích xuất phần tử từ mảng, làm cho nó rất linh hoạt.

3. Bảng so sánh các phương thức

Chọn phương thức phù hợp theo trường hợp sử dụng:

• Trích xuất đoạn ngắn: → slice
• Khi cần giá trị âm: → slice
• Tương thích mã cũ: → Tránh substr; di chuyển khi cần

4. Ví dụ mã thực tế

Thao tác chuỗi cơ bản

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"

Trích xuất giá trị dựa trên mẫu

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

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

5. Cách xử lý các phương thức đã bị loại bỏ

Phương thức substr của JavaScript đã bị loại bỏ. Điều này là do substr đã được xếp vào danh sách các phương thức không được khuyến nghị trong các tiêu chuẩn ECMAScript mới nhất.
Phần này giải thích các vấn đề của substr, các phương thức thay thế, và cách di chuyển mã của bạn.

5.1 Tại sao substr bị deprecated?

1. Khả năng đọc kém:

• substr sử dụng đối số thứ hai như “số ký tự cần trích xuất,” điều này khác với các phương thức khác sử dụng chỉ số kết thúc. Sự không nhất quán này làm cho mã khó hiểu hơn.

1. Các vấn đề tương thích tương lai tiềm ẩn do thay đổi thông số kỹ thuật:

• Các tính năng cũ bị deprecated trong quá trình chuẩn hóa ECMAScript. Mã mới không nên phụ thuộc vào chúng.

1. Không hỗ trợ giá trị âm:

• substr không hỗ trợ chỉ số âm, trong khi slice thì có.

5.2 Cách Di chuyển đến Các Phương Thức Hiện Đại

Trường Hợp 1: Trích Xuất Chuỗi Con Có Độ Dài Cố Định

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

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

Trường Hợp 2: Trích Xuất Phần Cuối Của Chuỗi

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

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

Trường Hợp 3: Trích Xuất Phần Của URL hoặc Tên Tệp

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 Các Điểm Tái Cấu Trúc cho Mã Di Sản

1. Thực hiện quét mã:

• Sử dụng các công cụ như ESLint để phát hiện nơi substr được sử dụng.

1. Tăng cường độ bao phủ kiểm thử:

• Sử dụng các bài kiểm thử đơn vị để đảm bảo hành vi vẫn đúng sau khi thay thế phương thức.

1. Di chuyển dần dần:

• Ưu tiên thay thế trong các phần quan trọng hoặc thường được thực thi.

5.4 Lợi Ích Của Việc Di Chuyển Khỏi substr

1. Cải thiện khả năng đọc và khả năng duy trì:

• Ý định của mã trở nên rõ ràng hơn, cải thiện sự hiểu biết của đội ngũ.

1. Tương thích với các tiêu chuẩn hiện đại:

• Tuân theo các tiêu chuẩn ECMAScript đảm bảo sự ổn định lâu dài.

1. Hỗ trợ linh hoạt cho giá trị âm:

• slice cho phép trích xuất ngắn gọn từ cả vị trí bắt đầu và kết thúc.

6. Câu Hỏi Thường Gặp (FAQ)

Phần này tóm tắt các câu hỏi và câu trả lời phổ biến về các phương thức thao tác chuỗi JavaScript.

Q1: Tôi vẫn có thể sử dụng substr không?

A: Có, hầu hết các trình duyệt hiện đại vẫn hỗ trợ substr. Tuy nhiên, vì ECMAScript đánh dấu nó là deprecated, nên tránh sử dụng trong các dự án mới hoặc codebase yêu cầu tương thích tương lai. Phương thức thay thế được khuyến nghị:

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

Q2: Sự khác biệt giữa slice và substring là gì?

A: Bảng dưới đây tóm tắt sự khác biệt của chúng:

Ví dụ:

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: Những rủi ro khi tiếp tục sử dụng các phương thức bị deprecated là gì?

A:

1. Nguy cơ loại bỏ hỗ trợ trình duyệt: substr có thể cuối cùng không được hỗ trợ.
2. Tăng chi phí bảo trì: Gỡ lỗi các tính năng deprecated mất thêm thời gian.
3. Chất lượng mã thấp hơn: Không tuân theo các tiêu chuẩn hiện đại làm giảm khả năng đọc.

Q4: Phương thức nào tốt nhất cho chuỗi dài?

A: slice là tốt nhất vì nó hỗ trợ chỉ số âm và cung cấp tính linh hoạt mạnh mẽ. Ví dụ:

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: Làm thế nào để đếm ngược bằng giá trị âm?

A: Sử dụng slice, vì substring coi giá trị âm là 0. Ví dụ:

let str = "JavaScript";

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

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

Câu hỏi 6: Có sự khác biệt về hiệu năng không?

Đáp: Các trình duyệt hiện đại không có sự khác biệt đáng kể về hiệu năng giữa slice, substring và substr.
Vì tất cả đều là hàm gốc, hãy ưu tiên tính dễ đọc và khả năng bảo trì hơn là tối ưu vi mô.

7. Tổng kết và Các Thực hành Tốt Nhất Được Đề xuất

Trong bài viết này, chúng ta đã khám phá các phương thức chuỗi JavaScript substr, substring và slice, bao gồm cú pháp cơ bản, sự khác nhau, các ví dụ thực tế và chiến lược di chuyển cho các phương thức đã lỗi thời.
Phần này sắp xếp lại các đặc điểm chính của mỗi phương thức và đưa ra các thực hành hiện đại được khuyến nghị.

7.1 Tổng quan về Mỗi Phương thức

7.2 Tiêu chí Lựa chọn Thực tế

1. Sử dụng substring cho việc trích xuất phạm vi đơn giản:

• Thích hợp khi không cần giá trị âm. Ví dụ:

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

2. Sử dụng slice để có độ linh hoạt tối đa:

• Hỗ trợ chỉ số âm và là phương thức được ưu tiên cho mã mới. Ví dụ:

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

3. Thay thế substr càng sớm càng tốt:

• Di chuyển sang slice hoặc substring khi bảo trì mã legacy.

7.3 Thực hành Hiện đại

1. Viết mã với tính dễ đọc là ưu tiên:

• Mã rõ ràng, ngắn gọn giúp cải thiện khả năng bảo trì lâu dài.

2. Tránh các phương thức đã lỗi thời:

• substr có thể mất hỗ trợ trong các bản cập nhật trình duyệt trong tương lai — nên di chuyển sớm.

3. Sử dụng slice khi làm việc với giá trị âm:

• slice là phương thức duy nhất xử lý chỉ số âm một cách chính xác.

4. Áp dụng ESLint và bộ kiểm thử để duy trì chất lượng mã:

• Phân tích tĩnh giúp phát hiện các phương thức lỗi thời và thực thi phong cách mã hiện đại.

7.4 Ví dụ về Kiểu mã Hiện đại

// 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 Kế hoạch Hành động cho Độc giả

1. Xem lại mã hiện có của bạn:

• Kiểm tra xem dự án có sử dụng substr không và thay thế khi cần.

2. Áp dụng các thực hành tốt nhất trong mã mới:

• Sử dụng các mẫu linh hoạt, hiện đại và tránh các tính năng đã lỗi thời.

3. Tận dụng bình luận và câu hỏi cộng đồng:

• Chia sẻ câu hỏi hoặc trường hợp sử dụng để giúp người khác học hỏi đồng thời củng cố hiểu biết của bạn.

Kết luận

Bài viết này đã cung cấp giải thích chi tiết về các phương thức substr, substring và slice của JavaScript, bao gồm cú pháp, ví dụ, bảng so sánh và chiến lược di chuyển.

• Tránh substr vì nó đã bị lỗi thời.
• Sử dụng substring cho các trường hợp đơn giản.
• Sử dụng slice để có độ linh hoạt tối đa và tuân theo các thực hành tốt nhất hiện đại.

Hãy áp dụng những hiểu biết này để viết mã JavaScript hiệu quả và dễ bảo trì.

8. Liên kết và Tham khảo Liên quan

Để hiểu sâu hơn về substr, substring và slice, dưới đây là một số liên kết và tài liệu tham khảo hữu ích. Các tài liệu chính thức và nguồn học sẽ giúp bạn cập nhật các thay đổi và kỹ thuật mới nhất của JavaScript.

8.1 Tài liệu Chính thức

1. MDN Web Docs – Đối tượng String JavaScript

• Liên kết: String – MDN Web Docs
• Tổng quan: Tham khảo đầy đủ về đối tượng String của JavaScript, bao gồm các đặc tả chi tiết và ví dụ.

2. Đặc tả ECMAScript (ECMA-262)

• Liên kết: ECMAScript Official Specification
• Tổng quan: Bản đặc tả ngôn ngữ chính thức bao gồm các tính năng ECMAScript mới nhất, các phương pháp đã lỗi thời và chi tiết kỹ thuật.

8.2 Các trang học và hướng dẫn

1. JavaScript.info – Hướng dẫn thao tác chuỗi

• Liên kết: JavaScript.info
• Tổng quan: Một hướng dẫn chi tiết bao gồm cả các thao tác chuỗi cơ bản và nâng cao với các ví dụ thực tế.

1. Progate – Khóa học JavaScript cho người mới bắt đầu đến trung cấp

• Liên kết: Progate
• Tổng quan: Một nền tảng tương tác lý tưởng cho người mới bắt đầu học qua các bài tập mã thực tế.

1. DotInstall – Các bài học nhập môn JavaScript

• Liên kết: DotInstall
• Tổng quan: Các video ngắn giúp bạn học JavaScript một cách trực quan và nhanh chóng.

8.3 Tài nguyên mã mẫu thực tế

1. GitHub – Dự án mẫu JavaScript

• Liên kết: GitHub
• Tổng quan: Học các thực tiễn tốt nhất và các mẫu thực tế bằng cách khám phá các dự án mã nguồn mở.

1. CodePen – Chia sẻ mã tương tác

• Liên kết: CodePen
• Tổng quan: Chia sẻ và kiểm tra mã của bạn với các nhà phát triển khác hoặc duyệt các ví dụ để lấy cảm hứng.

8.4 Sách được đề xuất

1. JavaScript: The Definitive Guide (7th Edition)

• Tổng quan: Một tài liệu tham khảo toàn diện, uy tín, bao phủ JavaScript từ những nền tảng cơ bản đến các tính năng nâng cao.

1. Mastering Modern JavaScript – Revised Edition

• Tổng quan: Một tài liệu tham khảo thực tiễn tập trung vào JavaScript hiện đại và các tiêu chuẩn mã hóa mới nhất.

8.5 Cộng đồng và Diễn đàn

1. Stack Overflow (Tiếng Nhật)

• Liên kết: Stack Overflow
• Tổng quan: Cộng đồng hỏi đáp nơi bạn có thể giải quyết các vấn đề JavaScript một cách hiệu quả.

1. Qiita

• Liên kết: Qiita
• Tổng quan: Nền tảng tiếng Nhật phong phú với các bài viết thực tiễn và các case study về JavaScript.

1. Teratail

• Liên kết: Teratail
• Tổng quan: Trang Q&A tiếng Nhật lý tưởng để đặt câu hỏi kỹ thuật bằng ngôn ngữ mẹ đẻ.

Kết luận

Phần này giới thiệu một loạt các tài nguyên đa dạng — từ các tài liệu tham khảo chính thức đến các hướng dẫn, kho mã mẫu và các nền tảng cộng đồng — nhằm hỗ trợ việc học liên tục về các thao tác chuỗi trong JavaScript.
Những điểm chính:

1. Kiểm tra tài liệu chính thức thường xuyên:

• Đảm bảo phong cách mã của bạn luôn phù hợp với các tiêu chuẩn mới nhất.

1. Củng cố kỹ năng qua việc lập trình thực hành:

• Thực hành giúp các khái niệm trở nên rõ ràng hơn và cải thiện việc áp dụng trong thực tế.

1. Tham gia cộng đồng:

• Chia sẻ câu hỏi và giải pháp giúp tăng cường hiểu biết và mở rộng mạng lưới của bạn.