2020 में जावास्क्रिप्ट में क्या जोड़ा जाएगा

हाल ही में, वैकल्पिक चेनिंग और डिफ़ॉल्ट विशेषता मान ( Nullish Coalescing ) TC39 प्रक्रिया का अंतिम, चौथा चरण है।

व्यवहार में, इसका मतलब है कि ये और अन्य नवाचार 2020, पहले से ही जावास्क्रिप्ट मानक का हिस्सा बन जाएंगे। हम इस लेख में उन पर विचार करेंगे।

आप यहां ब्राउज़र समर्थन को ट्रैक कर सकते हैं ("2020 सुविधाएँ") - लगभग। ट्रांस।

String.prototype.matchAll

जब आप एक ही लाइन पर कई समूहों पर कब्जा करने की आवश्यकता होती है, तो चिपचिपा या वैश्विक नियमित अभिव्यक्ति का उपयोग करना, तुच्छ नहीं हो सकता है।

String.prototyp.match वैश्विक ध्वज की उपस्थिति में कैप्चर किए गए समूहों को वापस नहीं करता है, और इसके बिना आप टेम्पलेट और उसके समूह को केवल पहला पूर्ण मिलान प्राप्त कर सकते हैं।

एक उदाहरण:

let regexp = /t(e)(st(\d?))/g; let str = 'test1test2'; const results = str.match(regexp); console.log(results); 

परिणाम "झंडा" के साथ

ध्वज के बिना परिणाम "जी"

String.prototype.matchAll का उपयोग करना सुनिश्चित करता है कि सभी मैच और उनके समूह वापस आ गए हैं।

एक उदाहरण:

 let regexp = /t(e)(st(\d?))/g; let str = 'test1test2'; let array = [...str.matchAll(regexp)]; console.log(array); 

परिणाम:

BigInt

BigInt से पहले , संख्या का प्रतिनिधित्व सबसे बड़ा मूल्य 2 represented-1 (MAX_SAFE_INTEGER) था। जावास्क्रिप्ट में अब एक आदिम होगा जो सीमा से अधिक हो सकता है।

आप एक संख्या में 'n' जोड़कर या BigInt () फ़ंक्शन का उपयोग करके एक BigInt बना सकते हैं।

एक उदाहरण:

 let bigInt = 4n console.log(bigInt * bigInt) 

• BigInt संख्या के बराबर नहीं है, लेकिन बाद के लिए डाली जा सकती है।
• विभाजन जैसे ऑपरेशन करते समय, परिणाम निकटतम पूरे के लिए होगा।
• टाइप कास्टिंग के बिना नंबर के साथ उपयोग नहीं किया जा सकता है।

एक नंबर के साथ BigInt जोड़ने की कोशिश कर रहा है ...

 let bigInt = 4n + 2 console.log(bigInt) 

... एक अपवाद में परिणाम:

globalThis

जावास्क्रिप्ट दुनिया में वैश्विक वस्तुओं तक पहुंच हमेशा एक सिरदर्द रही है। आपको पर्यावरण के लिए विशिष्ट वाक्यविन्यास से परिचित होना चाहिए, जो पोर्टेबल कोड लिखते समय अनावश्यक कठिनाइयाँ पैदा करता है और गेटग्लोइड जैसी किसी चीज़ का उपयोग करना आवश्यक बनाता है।

एक उदाहरण:

 var getGlobal = function () { if (typeof self !== 'undefined') { return self; } if (typeof window !== 'undefined') { return window; } if (typeof global !== 'undefined') { return global; } throw new Error('no global object found'); }; var globals = getGlobal(); 

GlobalThis के आगमन के साथ , आप पर्यावरण के बारे में सोचना बंद कर सकते हैं और वैश्विक वस्तुओं को एकीकृत कर सकते हैं।

एक उदाहरण:

 globalThis.someFunction = () => 'hello' console.log(globalThis.someFunction()) 

Promise.allSettled

मान लीजिए कि आपके कुछ वादे हैं, और आप उन्हें पूरा करने के बाद कुछ करना चाहते हैं (यह सफल है या नहीं, इससे कोई फर्क नहीं पड़ता)। Promise.allSettled यह बहुत ही उद्देश्य के लिए है।

एक उदाहरण:

 const fulfilledPromise = Promise.resolve("success"); const rejectedPromise = Promise.reject("error") const promises = [fulfilledPromise, rejectedPromise]; Promise.allSettled(promises). then((results) => results.forEach((result) => console.log(result))); 

परिणाम:

गतिशील आयात

किसी विशेष स्थिति के आधार पर, किसी मॉड्यूल को रनटाइम पर लोड करना चाहते हैं? अब यह तीसरे पक्ष के पुस्तकालयों के बिना किया जा सकता है।

यह आयात फ़ंक्शन को कॉल करने के लिए पर्याप्त है, जो वादा वापस करेगा।

एक उदाहरण:

 import("some_module") .then(module => { module.doSomething(); }) .catch(err => { console.error(err.message); }); 

स्थिर आयात के विपरीत, जहां आपको मॉड्यूल नाम को स्पष्ट रूप से निर्दिष्ट करने की आवश्यकता होती है, गतिशील आयात के दौरान, उदाहरण के लिए, फ़ंक्शन को टेम्पलेट पास करें।

टेम्पलेट का उपयोग करके उदाहरण:

 import(`${some_module}.js`) .then(module => { module.doSomething(); }) .catch(err => { console.error(err.message); }); 

नालिश सहलाना

जब आपको एक विशेषता या डिफ़ॉल्ट मान प्राप्त करने की आवश्यकता होती है, यदि यह शून्य या अपरिभाषित है , तो हम आमतौर पर '' 'ऑपरेटर का उपयोग करते हैं।

Nullish से पहले:

 const response = someResponse.properties.mayBeUndefined || 'Response'; 

हालाँकि, कल्पना करें कि एक विशेषता का "गलत" मान है।

'||' का उपयोग करने की समस्या:

 const someResponse = {properties: { mayBeUndefined: ''}} const response = someResponse.properties.mayBeUndefined || 'Response'; console.log(response) 

परिणाम:

यह एक अवांछनीय व्यवहार है। इस मामले में, हमें एक डिफ़ॉल्ट मान नहीं, बल्कि एक विशेषता मान चाहिए।

Nullish के साथ यह समस्या नहीं होगी। डिफ़ॉल्ट मान केवल शून्य या अपरिभाषित विशेषताओं के लिए लौटाया जाएगा।

Nullish coalescing का उपयोग करना:

 const someResponse = {properties: { mayBeUndefined: ''}} const response = someResponse.properties.mayBeUndefined ?? 'Response'; console.log(response) 

परिणाम:

वैकल्पिक जंजीर

उप-विशेषता तक पहुंचने के लिए, हमें यह सुनिश्चित करने की आवश्यकता है कि ऊपर विशेषता मौजूद है। अब तक, प्रत्येक अति-विशेषताओं के अस्तित्व को मैन्युअल रूप से जांचने की आवश्यकता है।

वैकल्पिक श्रृंखलन से पहले:

 const someObj = { property: 'prop', otherProperty: { name: 'prop2' } }; const property = someObj.NotOtherProperty ? someObj.NotOtherProperty.name: undefined; console.log(property); 

वैकल्पिक चेनिंग के आगमन के साथ, आप '?' 'ऑपरेटर का उपयोग कर सकते हैं उप-विशेषताओं के लिए वैकल्पिक पहुँच के लिए। नीचे दिया गया कोड ऊपर दिए गए कोड के बराबर है।

वैकल्पिक श्रृंखलन का उपयोग करना:

 const someObj = { property: 'prop', otherProperty: { name: 'prop2' } }; const property = someObj.NotOtherProperty?.name; console.log(property); 

ऑप्शनल चेनिंग कोड को अधिक क्लीनर बनाती है, खासकर अगर स्ट्रिंग में बहुत सारी विशेषताएँ हैं।

निष्कर्ष

आप कंसोल में एक लेख से उदाहरणों को चलाने का प्रयास कर सकते हैं: उनमें से कुछ पहले से ही ब्राउज़रों के नवीनतम संस्करणों में लागू किए गए हैं, दूसरों को बहुत जल्द लागू किए जाने की संभावना है। एक तरह से या किसी अन्य, 2020 भाषा के भाग के रूप में लेख से संभावनाओं से संबंधित शुरू करना संभव है।