जावास्क्रिप्ट स्ट्रिंग मेथड्स की व्याख्या: substr बनाम substring बनाम 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 मेथड डिप्रिकेट है, और भविष्य के कोड में इसका उपयोग न करने की सलाह दी जाती है। इसके बजाय 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 मेथड डिप्रिकेट है। यह इसलिए है क्योंकि नवीनतम 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)

यह अनुभाग जावास्क्रिप्ट स्ट्रिंग मैनिपुलेशन विधियों के बारे में सामान्य प्रश्नों और उत्तरों का सारांश प्रस्तुत करता है।

Q1: क्या मैं अभी भी substr का उपयोग कर सकता हूँ?

उ:
हाँ, अधिकांश आधुनिक ब्राउज़र अभी भी substr को सपोर्ट करते हैं।
हालाँकि, क्योंकि ECMAScript इसे डिप्रिकेटेड के रूप में चिह्नित करता है, इसे नए प्रोजेक्ट्स या भविष्य की संगतता की आवश्यकता वाले कोडबेस में उपयोग से बचना चाहिए।
सिफ़ारिश किया गया विकल्प:

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

Q2: slice और substring में क्या अंतर है?

उ:
नीचे दी गई तालिका उनके अंतर को सारांशित करती है:

उदाहरण:

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: डिप्रिकेटेड विधियों का उपयोग जारी रखने के क्या जोखिम हैं?

उ:

1. संभव ब्राउज़र समर्थन हटाना: substr अंततः असमर्थित हो सकता है।
2. रखरखाव लागत में वृद्धि: डिप्रिकेटेड फीचर को डिबग करने में अतिरिक्त समय लगता है।
3. कोड गुणवत्ता में कमी: आधुनिक मानकों का पालन न करने से पठनीयता घटती है।

Q4: लंबी स्ट्रिंग्स के लिए कौन सी विधि सबसे बेहतर है?

उ:
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: मैं नकारात्मक मानों का उपयोग करके पीछे की ओर कैसे गिन सकता हूँ?

उ:
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"

प्रश्न 6: क्या प्रदर्शन में अंतर हैं?

उत्तर: आधुनिक ब्राउज़रों में 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. पठनीयता को ध्यान में रखते हुए कोड लिखें:

• स्पष्ट और संक्षिप्त कोड दीर्घकालिक रखरखाव क्षमता में सुधार करता है।

1. अवशिष्ट विधियों से बचें:

• substr भविष्य के अपडेट में ब्राउज़र समर्थन खो सकता है—जल्दी माइग्रेट करें।

1. नकारात्मक मानों के साथ काम करते समय slice का उपयोग करें:

• slice एकमात्र विधि है जो नकारात्मक सूचकांकों को सही ढंग से संभालती है।

1. कोड गुणवत्ता बनाए रखने के लिए 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 का उपयोग किया गया है और आवश्यकतानुसार इसे बदलें।

1. नए कोड में सर्वोत्तम प्रथाओं का पालन करें:

• आधुनिक, लचीले पैटर्न का उपयोग करें और अवशिष्ट सुविधाओं से बचें।

1. टिप्पणियों और समुदाय प्रश्नों का लाभ उठाएं:

• प्रश्नों या उपयोग मामलों को साझा करें ताकि दूसरों को सीखने में मदद मिले और आपकी समझ मजबूत हो।

निष्कर्ष

इस लेख ने JavaScript की substr, substring, और slice विधियों की गहन व्याख्या प्रदान की, जिसमें सिंटैक्स, उदाहरण, तुलना तालिकाएँ, और माइग्रेशन रणनीतियाँ शामिल हैं।

• substr से बचें क्योंकि यह अवशिष्ट है।
• साधारण परिदृश्यों के लिए substring का उपयोग करें।
• अधिकतम लचीलापन और आधुनिक सर्वोत्तम प्रथाओं के लिए slice का उपयोग करें।

इन अंतर्दृष्टियों का उपयोग करके कुशल, रखरखाव योग्य JavaScript कोड लिखें।

8. संबंधित लिंक और संदर्भ

substr, substring, और slice की समझ को गहरा करने के लिए, यहाँ सहायक लिंक और संदर्भ दिए गए हैं। आधिकारिक दस्तावेज़ीकरण और सीखने के संसाधन आपको नवीनतम JavaScript अपडेट और तकनीकों के साथ तालमेल बनाए रखने में मदद करेंगे।

8.1 आधिकारिक दस्तावेज़ीकरण

1. MDN Web Docs – JavaScript String Object

• लिंक: String – MDN Web Docs
• अवलोकन: JavaScript के String ऑब्जेक्ट के लिए एक पूर्ण संदर्भ जिसमें विस्तृत विनिर्देश और उदाहरण हैं।

1. ECMAScript Specification (ECMA-262)

• लिंक: ECMAScript Official Specification
• सारांश: नवीनतम ECMAScript सुविधाओं, अप्रचलित विधियों और तकनीकी विवरणों को कवर करने वाला आधिकारिक भाषा विनिर्देश।

8.2 सीखने की साइटें और ट्यूटोरियल

1. JavaScript.info – स्ट्रिंग मैनिपुलेशन गाइड

• लिंक: JavaScript.info
• सारांश: बुनियादी और उन्नत स्ट्रिंग ऑपरेशनों को व्यावहारिक उदाहरणों के साथ कवर करने वाला एक विस्तृत गाइड।

2. Progate – जावास्क्रिप्ट शुरुआती से मध्यवर्ती कोर्स

• लिंक: Progate
• सारांश: व्यावहारिक कोडिंग अभ्यास के माध्यम से सीखने वाले शुरुआती लोगों के लिए आदर्श एक इंटरैक्टिव प्लेटफ़ॉर्म।

3. DotInstall – जावास्क्रिप्ट परिचयात्मक पाठ

• लिंक: DotInstall
• सारांश: छोटे वीडियो पाठ जो जावास्क्रिप्ट को दृश्य रूप से और तेज़ी से सीखना आसान बनाते हैं।

8.3 व्यावहारिक सैंपल कोड संसाधन

1. GitHub – जावास्क्रिप्ट सैंपल प्रोजेक्ट्स

• लिंक: GitHub
• सारांश: ओपन‑सोर्स प्रोजेक्ट्स का अन्वेषण करके सर्वोत्तम प्रथाओं और वास्तविक दुनिया के पैटर्न सीखें।

2. CodePen – इंटरैक्टिव कोड शेयरिंग

• लिंक: CodePen
• सारांश: अपने कोड को अन्य डेवलपर्स के साथ साझा और परीक्षण करें या प्रेरणा के लिए उदाहरण देखें।

8.4 अनुशंसित पुस्तकें

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

• सारांश: जावास्क्रिप्ट को मूलभूत से लेकर उन्नत सुविधाओं तक कवर करने वाला एक व्यापक, प्राधिकृत संदर्भ।

2. Mastering Modern JavaScript – Revised Edition

• सारांश: आधुनिक जावास्क्रिप्ट और अद्यतन कोडिंग मानकों पर केंद्रित एक व्यावहारिक संदर्भ।

8.5 समुदाय और फ़ोरम

1. Stack Overflow (Japanese)

• लिंक: Stack Overflow
• सारांश: एक प्रश्न‑उत्तर समुदाय जहाँ आप जावास्क्रिप्ट समस्याओं को प्रभावी ढंग से हल कर सकते हैं।

2. Qiita

• लिंक: Qiita
• सारांश: व्यावहारिक लेखों और जावास्क्रिप्ट केस स्टडीज़ से भरपूर एक जापानी प्लेटफ़ॉर्म।

3. Teratail

• लिंक: Teratail
• सारांश: मूल भाषा में तकनीकी प्रश्न पूछने के लिए उपयुक्त एक जापानी प्रश्न‑उत्तर साइट।

निष्कर्ष

इस अनुभाग ने आधिकारिक संदर्भों से लेकर ट्यूटोरियल, सैंपल कोड रिपॉज़िटरी और समुदाय प्लेटफ़ॉर्म तक विभिन्न संसाधनों का परिचय दिया है, जो जावास्क्रिप्ट स्ट्रिंग ऑपरेशनों के निरंतर सीखने में सहायता करते हैं।

मुख्य बिंदु:

1. नियमित रूप से आधिकारिक दस्तावेज़ीकरण जांचें:

• सुनिश्चित करें कि आपका कोडिंग स्टाइल नवीनतम मानकों के अनुरूप बना रहे।

2. हाथ‑से‑कोडिंग के माध्यम से कौशल को मजबूत करें:

• अभ्यास से अवधारणाएँ स्पष्ट होती हैं और वास्तविक‑दुनिया में अनुप्रयोग में सुधार होता है।

3. समुदाय के साथ जुड़ें:

• प्रश्नों और समाधान को साझा करने से समझ गहरी होती है और आपका नेटवर्क विस्तृत होता है।