อธิบายเมธอดสตริงใน JavaScript: substr vs substring vs slice (แนวปฏิบัติที่ดีที่สุดและการใช้งานสมัยใหม่)

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

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

1. บทนำ

JavaScript เป็นภาษาการเขียนโปรแกรมที่สำคัญในงานพัฒนาเว็บ โดยเฉพาะการจัดการสตริงที่มักใช้ในการจัดรูปแบบข้อมูล การวิเคราะห์ และการอัปเดต UI อย่างไดนามิก ในบทความนี้ เราจะอธิบายวิธีการของสตริงใน JavaScript ที่ใช้บ่อยสามวิธีคือ substr , substring และ slice อย่างละเอียด เนื่องจากวิธีเหล่านี้ให้ฟังก์ชันคล้ายกัน การเข้าใจความแตกต่างจะช่วยให้คุณเลือกใช้ได้อย่างเหมาะสมในแต่ละสถานการณ์ เราจะอธิบายเหตุผลที่ substr ถูกยกเลิกการใช้งานและเสนอวิธีทางเลือก พร้อมคำแนะนำเชิงปฏิบัติสำหรับการเขียน JavaScript ตามแนวปฏิบัติที่ทันสมัย

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. วิธีจัดการเมธอดที่ถูกยกเลิก

เมธอด substr ของ JavaScript ถูกยกเลิกการใช้งาน (deprecated) เนื่องจาก substr ถูกจัดเป็นเมธอดที่ไม่แนะนำในสเปค ECMAScript ล่าสุด ส่วนนี้อธิบายปัญหาที่เกิดจาก 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. เสริมความครอบคลุมของการทดสอบ:

• ใช้ unit test เพื่อให้แน่ใจว่าพฤติกรรมยังคงถูกต้องหลังจากเปลี่ยนวิธี

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. ใช้ประโยชน์จากคอมเมนต์และคำถามจากชุมชน:

• แบ่งปันคำถามหรือกรณีการใช้งานเพื่อช่วยผู้อื่นเรียนรู้พร้อมกับเสริมความเข้าใจของคุณ

สรุป

บทความนี้ให้คำอธิบายเชิงลึกเกี่ยวกับเมธอด substr, substring, และ slice ของ JavaScript รวมถึงไวยากรณ์ ตัวอย่าง ตารางเปรียบเทียบ และกลยุทธ์การย้าย

• หลีกเลี่ยง substr เนื่องจากมันถูกเลิกใช้.
• ใช้ substring สำหรับสถานการณ์ง่าย.
• ใช้ slice เพื่อความยืดหยุ่นสูงสุดและแนวปฏิบัติสมัยใหม่.

ใช้ข้อมูลเหล่านี้เพื่อเขียนโค้ด JavaScript ที่มีประสิทธิภาพและบำรุงรักษาได้ง่าย

8. ลิงก์และอ้างอิงที่เกี่ยวข้อง

เพื่อเพิ่มพูนความเข้าใจของคุณเกี่ยวกับ substr, substring, และ slice นี่คือลิงก์และอ้างอิงที่เป็นประโยชน์ เอกสารอย่างเป็นทางการและแหล่งเรียนรู้จะช่วยให้คุณตามทันการอัปเดตและเทคนิคล่าสุดของ JavaScript

8.1 เอกสารอย่างเป็นทางการ

1. MDN Web Docs – วัตถุ String ของ JavaScript

• ลิงก์: String – MDN Web Docs
• ภาพรวม: เอกสารอ้างอิงครบถ้วนสำหรับวัตถุ String ของ JavaScript พร้อมสเปคและตัวอย่างโดยละเอียด

2. สเปค ECMAScript (ECMA-262)

• ลิงก์: สเปคอย่างเป็นทางการของ ECMAScript
• ภาพรวม: สเปคภาษาทางการที่ครอบคลุมฟีเจอร์ล่าสุดของ ECMAScript, วิธีการที่เลิกใช้, และรายละเอียดทางเทคนิค

8.2 เว็บไซต์การเรียนรู้และบทเรียน

1. JavaScript.info – คู่มือการจัดการสตริง

• ลิงก์: JavaScript.info
• ภาพรวม: คู่มือที่ครอบคลุมทั้งการทำงานพื้นฐานและขั้นสูงของสตริง พร้อมตัวอย่างเชิงปฏิบัติ

1. Progate – คอร์ส JavaScript ตั้งแต่ระดับเริ่มต้นถึงระดับกลาง

• ลิงก์: Progate
• ภาพรวม: แพลตฟอร์มเชิงโต้ตอบที่เหมาะสำหรับผู้เริ่มต้นเรียนผ่านการฝึกเขียนโค้ดจริง

1. DotInstall – บทเรียนแนะนำ JavaScript

• ลิงก์: DotInstall
• ภาพรวม: วิดีโอสั้น ๆ ที่ทำให้การเรียน JavaScript ด้วยภาพเป็นเรื่องง่ายและรวดเร็ว

8.3 แหล่งโค้ดตัวอย่างเชิงปฏิบัติ

1. GitHub – โปรเจกต์ตัวอย่าง JavaScript

• ลิงก์: GitHub
• ภาพรวม: เรียนรู้แนวปฏิบัติที่ดีที่สุดและรูปแบบการใช้งานจริงโดยสำรวจโครงการโอเพ่นซอร์ส

1. CodePen – การแชร์โค้ดแบบโต้ตอบ

• ลิงก์: CodePen
• ภาพรวม: แชร์และทดสอบโค้ดของคุณกับนักพัฒนาคนอื่น หรือเรียกดูตัวอย่างเพื่อเป็นแรงบันดาลใจ

8.4 หนังสือแนะนำ

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

• ภาพรวม: หนังสืออ้างอิงที่ครอบคลุมและเป็นอำนาจสูงสุด ตั้งแต่พื้นฐานจนถึงฟีเจอร์ขั้นสูงของ JavaScript

1. Mastering Modern JavaScript – Revised Edition

• ภาพรวม: หนังสืออ้างอิงเชิงปฏิบัติที่มุ่งเน้น JavaScript สมัยใหม่และมาตรฐานการเขียนโค้ดที่อัปเดตล่าสุด

8.5 ชุมชนและฟอรั่ม

1. Stack Overflow (ญี่ปุ่น)

• ลิงก์: Stack Overflow
• ภาพรวม: ชุมชน Q&A ที่คุณสามารถแก้ไขปัญหา JavaScript ได้อย่างมีประสิทธิภาพ

1. Qiita

• ลิงก์: Qiita
• ภาพรวม: แพลตฟอร์มญี่ปุ่นที่เต็มไปด้วยบทความเชิงปฏิบัติและกรณีศึกษา JavaScript

1. Teratail

• ลิงก์: Teratail
• ภาพรวม: เว็บไซต์ Q&A ภาษาญี่ปุ่นที่เหมาะสำหรับการถามคำถามเชิงเทคนิคในภาษาท้องถิ่น

สรุป

ส่วนนี้ได้นำเสนอแหล่งทรัพยากรที่หลากหลาย — ตั้งแต่เอกสารอ้างอิงอย่างเป็นทางการ ไปจนถึงบทเรียน, คลังโค้ดตัวอย่าง, และแพลตฟอร์มชุมชน — เพื่อสนับสนุนการเรียนรู้ต่อเนื่องเกี่ยวกับการจัดการสตริงใน JavaScript
ประเด็นสำคัญที่ควรจำ:

1. ตรวจสอบเอกสารอย่างเป็นทางการเป็นประจำ:

• ทำให้สไตล์การเขียนโค้ดของคุณสอดคล้องกับมาตรฐานล่าสุด

2. เสริมทักษะด้วยการเขียนโค้ดจริง:

• การฝึกทำให้แนวคิดชัดเจนขึ้นและเพิ่มประสิทธิภาพการใช้งานในโลกจริง

3. มีส่วนร่วมกับชุมชน:

• การแบ่งปันคำถามและวิธีแก้ไขช่วยให้ความเข้าใจลึกซึ้งยิ่งขึ้นและขยายเครือข่ายของคุณ