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)

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 hiện đại. Đặ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.

Bài viết này cung cấp giải thích chi tiết về ba phương thức chuỗi JavaScript thường được dùng—substr, substring và slice. Vì các phương thức này có 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 nhất cho từng tình huống.

Chúng tôi cũng sẽ thảo luận lý do substr đã bị loại bỏ, giới thiệu các lựa chọn thay thế được khuyến nghị, và đưa ra lời khuyên thực tế để đồng bộ mã của bạn với các thực tiễn tốt nhất của JavaScript hiện đại.

2. Tổng quan cơ bản và cách sử dụng mỗi phương thức

Phần này giải thích chi tiết cú pháp và cách sử dụng substr, substring và slice. Bằng cách hiểu mỗi phương thức, bạn có thể chọn lựa phù hợp và cải thiện khả năng đọc cũng như bảo trì mã.

2.1 Phương thức substr

Syntax:

string.substr(start, length)

Mô tả:

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

Ví dụ:

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

Lưu ý quan trọng:
Phương thức substr đã bị loại bỏ, và việc sử dụng nó không được khuyến khích trong phát triển JavaScript hiện đại. Thay vào đó, hãy sử dụng slice hoặc substring như các lựa chọn 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ỉ định vị trí bắt đầu để trích xuất.
• end : Chỉ định vị trí kết thúc (ký tự tại chỉ mục này sẽ không được bao gồm).

Ví dụ:

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

Các điểm chính:

1. Thứ tự đối số được tự động điều chỉnh: Nếu chỉ định substring(10, 4), nó sẽ tự động được hiểu là substring(4, 10).
2. Giá trị âm bị bỏ qua: Nếu cung cấp một giá trị âm, nó sẽ đượ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ỉ định vị trí bắt đầu để trích xuất.
• end : Chỉ định vị trí kết thúc (ký tự tại chỉ mục này sẽ không được bao gồm).

Ví dụ:

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

Các điểm chính:

1. Hỗ trợ giá trị âm: Giá trị âm được hiểu là độ lệch từ cuối chuỗi.
2. Áp dụng cho cả chuỗi và mảng: Vì slice cũng có thể được sử dụng với mảng, nên đây là một phương thức rất linh hoạt.

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

Cách chọn dựa trên trường hợp sử dụng:

• Trích xuất một phần ngắn của chuỗi: → slice
• Khi cần chỉ mục âm: → slice
• Tương thích mã legacy: → Tránh substr và chuyển sang các lựa chọn hiện đại

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ị từ mẫu cụ thể

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

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

5. Xử lý các phương pháp đã lỗi thời

Trong JavaScript, phương thức substr được coi là đã lỗi thời. Điều này là do nó đã được chính thức phân loại là cách tiếp cận không được khuyến nghị trong các đặc tả ECMAScript mới nhất. Phần này giải thích các vấn đề với substr, các lựa chọn thay thế có sẵn, và các chiến lược di chuyển thực tiễn.

5.1 Tại sao substr lại bị lỗi thời?

1. Độ dễ đọc thấp:

• Phương thức substr chỉ định số ký tự cần trích xuất dưới dạng đối số thứ hai, khác với các phương thức khác sử dụng vị trí bắt đầu và kết thúc. Sự không nhất quán này khiến mã khó hiểu hơn khi nhìn nhanh.

2. Các vấn đề tương thích tiềm năng trong tương lai do thay đổi đặc tả:

• Trong quá trình chuẩn hoá ECMAScript, các tính năng cũ có thể bị đánh dấu là lỗi thời. Do đó, nên tránh sử dụng substr trong mã mới để đảm bảo tính tương thích lâu dài.

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

• Mặc dù substr không hỗ trợ giá trị âm, slice hoàn toàn hỗ trợ chỉ mục âm, cho phép trích xuất chuỗi linh hoạt hơn.

5.2 Cách di chuyển sang các phương pháp thay thế

Trường hợp 1: Trích xuất một chuỗi con có độ dài cố định

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

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

Trường hợp 2: Trích xuất phần cuối của một chuỗi

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

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

Trường hợp 3: Trích xuất mộ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); // Output: "index.html"

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

5.3 Mẹo tái cấu trúc cho mã legacy

1. Chạy quét mã:

• Sử dụng các công cụ như ESLint để phát hiện các lần xuất hiện của substr trong cơ sở mã của bạn.

2. Cải thiện độ bao phủ kiểm thử:

• Sử dụng các kiểm thử đơn vị để xác minh hành vi sau khi tái cấu trúc và đảm bảo rằng các thay đổi không gây ra lỗi hồi quy.

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

• Ưu tiên các phần quan trọng của cơ sở mã và thay thế các phương pháp lỗi thời từng bước.

5.4 Lợi ích của việc di chuyển khỏi substr

1. Cải thiện độ dễ đọc và khả năng bảo trì:

• Ý định của mã trở nên rõ ràng hơn, giúp việc hợp tác và bảo trì lâu dài dễ dàng hơn.

2. Phù hợp với các đặc tả hiện đại:

• Tuân thủ tiêu chuẩn ECMAScript đảm bảo các bản cập nhật và tính tương thích trong tương lai diễn ra suôn sẻ hơn.

3. Xử lý linh hoạt các giá trị âm:

• Sử dụng slice cho phép trích xuất dễ dàng từ cả đầu và cuối chuỗi, tạo ra mã sạch hơn và ngắn gọn hơn.

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 liên quan đến các phương pháp thao tác chuỗi trong JavaScript, giúp người đọc nhanh chóng giải quyết các thắc mắc thường gặp.

Câu hỏi 1: substr vẫn có thể sử dụng được không?

A:
Có, substr vẫn hoạt động trong hầu hết các trình duyệt hiện đại. Tuy nhiên, vì nó đã lỗi thời trong đặc tả ECMAScript, nên nên tránh sử dụng trong các dự án mới hoặc khi cân nhắc tính tương thích lâu dài.

Lựa chọn thay thế được đề xuất:

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

Câu hỏi 2: Sự khác nhau giữa slice và substring là gì?

A:
Bảng dưới đây tóm tắt các điểm khác biệt chính giữa slice và substring.

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"

Câu hỏi 3: Những rủi ro khi tiếp tục sử dụng các phương pháp đã lỗi thời là gì?

A:
Tiếp tục sử dụng các phương pháp đã lỗi thời có thể dẫn đến các rủi ro sau.

1. Kết thúc hỗ trợ của trình duyệt: Trong tương lai, substr có thể không còn được trình duyệt hỗ trợ.
2. Chi phí bảo trì tăng lên: Việc xử lý các lỗi hoặc cảnh báo do các phương pháp đã lỗi thời gây ra có thể làm tăng gánh nặng không cần thiết.
3. Giảm chất lượng mã: Không tuân thủ các tiêu chuẩn hiện đại làm giảm khả năng đọc và bảo trì.

Q4: Phương pháp nào là tốt nhất để xử lý chuỗi dài?

A:
Khi làm việc với chuỗi dài, slice là lựa chọn tốt nhất vì tính linh hoạt và hỗ trợ các chỉ mục âm.

Example:

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

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

// Get the last 10 characters
console.log(longText.slice(-10));  // "purposes."

Q5: Làm thế nào để đếm từ cuối bằng các giá trị âm?

A:
Trong khi slice hỗ trợ các giá trị âm, substring coi các giá trị âm là 0, vì vậy cần thận trọng.

Example:

let str = "JavaScript";

// Extract from the end using slice
console.log(str.slice(-6));  // "Script"

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

Q6: Có sự khác biệt về hiệu năng nào không?

A:
Trong 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 được triển khai dưới dạng hàm gốc, nên nên ưu tiên tính dễ đọc và khả năng bảo trì hơn là hiệu năng.

7. Tóm tắt và Các thực hành tốt nhất được đề xuất

Bài viết này giải thích các phương pháp thao tác chuỗi JavaScript—substr, substring và slice—từ cách sử dụng cơ bản đến các điểm khác biệt chính, ví dụ thực tế và chiến lược xử lý các phương pháp đã lỗi thời.

Phần này tóm tắt mỗi phương pháp và nêu bật các thực hành tốt nhất được đề xuất dựa trên tiêu chuẩn JavaScript hiện đại.

7.1 Summary of Each Method

7.2 Practical Criteria for Choosing the Right Method

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

• Được khuyến nghị khi làm việc với chuỗi ngắn và không cần các giá trị âm. Ví dụ:

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

2. Chọn slice để có tính linh hoạt tối đa:

• Vì nó hỗ trợ các chỉ mục âm và cung cấp tính đa dụng cao hơn, slice là lựa chọn được đề xuất nhất cho mã hiện đạ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:

• Trong các codebase cũ, nên thay thế substr bằng slice hoặc substring một cách chủ động.

7.3 Thực hành tốt nhất hiện đại

1. Ưu tiên tính dễ đọc:

• Viết mã rõ ràng và ngắn gọn cải thiện khả năng bảo trì lâu dài.

2. Loại bỏ các phương pháp đã lỗi thời:

• Vì substr có thể bị loại bỏ trong các bản cập nhật tương lai, nên tích cực chuyển sang slice hoặc substring.

3. Sử dụng slice khi cần các giá trị âm:

• slice cung cấp khả năng trích xuất ngược linh hoạt, làm cho nó trở nên lý tưởng cho nhiều trường hợp thực tế.

7.4 Ví dụ về phong cách mã

Cuối cùng, dưới đây là một số ví dụ về thao tác chuỗi hiện đại được viết theo phong cách sạch sẽ và dễ bảo trì.

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

// Example: Extracting a 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 người đọc

1. Thực hiện đánh giá mã nguồn:

• Kiểm tra các dự án hiện có để tìm việc sử dụng substr và thay thế bằng slice hoặc substring khi phù hợp.

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

• Tuân thủ các tiêu chuẩn hiện đại và thiết kế mã với tính dễ đọc và xử lý chỉ mục âm trong tâm trí.

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

• Khuyến khích đặt câu hỏi và thảo luận về các điểm không rõ ràng hoặc trường hợp sử dụng cụ thể để chia sẻ kiến thức trong cộng đồng.

Kết luận

Bài viết này đã giải thích các phương thức chuỗi JavaScript substr, substring, và slice bằng cách sử dụng cú pháp cơ bản, ví dụ sử dụng, và bảng so sánh.

• substr nên được tránh vì nó đã bị deprecated.
• substring phù hợp cho các trường hợp sử dụng đơn giản.
• slice là phương thức linh hoạt nhất và được khuyến nghị.

Sử dụng kiến thức này để viết mã JavaScript hiệu quả, dễ đọc và dễ bảo trì.

8. Liên kết và Tài liệu Tham khảo Liên quan

Để làm sâu sắc thêm hiểu biết của bạn về substr, substring, và slice, phần này cung cấp các liên kết hữu ích và tài liệu tham khảo. Tài liệu chính thức và tài nguyên học tập sẽ giúp bạn cập nhật với các thông số kỹ thuật mới nhất và kỹ thuật nâng cao.

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

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

• Liên kết: Chuỗi – Tài liệu MDN Web
• Mô tả: Tài liệu tham khảo chính thức cho đối tượng String của JavaScript, bao gồm các thông số kỹ thuật chi tiết và ví dụ cho từng phương thức.

2. Thông số kỹ thuật ECMAScript (ECMA-262)

• Liên kết: Thông số kỹ thuật Chính thức ECMAScript
• Mô tả: Thông số kỹ thuật ECMAScript chính thức chi tiết các tính năng ngôn ngữ JavaScript, bao gồm các phương thức đã bị deprecated và các cập nhật gần đây.

8.2 Các Trang Học Tập và Hướng dẫn

1. JavaScript.info – Các Phương thức Chuỗi

• Liên kết: JavaScript.info
• Mô tả: Giải thích toàn diện về việc thao tác chuỗi, từ cơ bản đến các trường hợp sử dụng nâng cao, với các ví dụ thực tế.

2. Progate – Các Khóa Học JavaScript

• Liên kết: Progate
• Mô tả: Nền tảng học tập tương tác dành cho người mới bắt đầu, bao quát các nguyên tắc cơ bản của JavaScript qua mã hóa thực hành.

3. Dotinstall – Khóa Học JavaScript Cho Người Mới Bắt Đầu

• Liên kết: Dotinstall
• Mô tả: Nền tảng học tập dựa trên video cho phép hiểu nhanh và trực quan các khái niệm JavaScript.

8.3 Tài nguyên Mã Mẫu Thực tế

1. GitHub – Các Dự án Mẫu JavaScript

• Liên kết: GitHub
• Mô tả: Học các mẫu JavaScript thực tế và thực hành tốt nhất qua các dự án mã nguồn mở.

2. CodePen – Sân Chơi Mã Tương Tác

• Liên kết: CodePen
• Mô tả: Nền tảng để chia sẻ và thử nghiệm mã JavaScript theo thời gian thực.

8.4 Sách Khuyến nghị

1. JavaScript: The Definitive Guide, Ấn bản 7 (O’Reilly)

• Tổng quan: Tài liệu tham khảo toàn diện bao quát các nguyên tắc cơ bản của JavaScript đến các tính năng ngôn ngữ mới nhất.

2. Hướng dẫn Phát triển JavaScript Hiện đại (Ấn bản Sửa chữa)

• Tổng quan: Hướng dẫn thực tế tập trung vào cú pháp JavaScript hiện đại và các kỹ thuật phát triển thực tế.

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

1. Stack Overflow

• Liên kết: Stack Overflow
• Mô tả: Cộng đồng Q&A toàn cầu dành cho các câu hỏi liên quan đến lập trình và khắc phục sự cố.

2. Qiita

• Liên kết: Qiita
• Mô tả: Nền tảng bài viết kỹ thuật Nhật Bản với nhiều ví dụ JavaScript thực tế.

3. Teratail

• Liên kết: Teratail
• Mô tả: Trang Q&A Nhật Bản nơi các nhà phát triển có thể đặt câu hỏi bằng tiếng Nhật.

Tóm tắt

Phần này giới thiệu các tài liệu tham khảo chính thức, tài nguyên học tập, kho mã mẫu, và cộng đồng nhà phát triển liên quan đến việc thao tác chuỗi JavaScript.

Những điểm chính:

1. Xác minh thông số kỹ thuật bằng tài liệu chính thức:

• Hãy biến việc kiểm tra các thông số kỹ thuật và hướng dẫn sử dụng mới nhất thành thói quen.

2. Củng cố kỹ năng thực hành thông qua các hướng dẫn và mã mẫu:

• Việc lập trình thực hành giúp củng cố cả hiểu biết lý thuyết và ứng dụng thực tế.

3. Chia sẻ kiến thức qua các cộng đồng nhà phát triển:

• Tham gia thảo luận giúp mở rộng chuyên môn và mạng lưới chuyên nghiệp của bạn.