जावास्क्रिप्ट नवाचार: Google I / O 2019 परिणाम। भाग 1

वह सामग्री, जिसके अनुवाद का पहला भाग आज हम प्रकाशित कर रहे हैं, नए मानक जावास्क्रिप्ट विशेषताओं के लिए समर्पित है, जिनकी चर्चा Google I / O 2019 सम्मेलन में की गई थी। विशेष रूप से, यहां हम नियमित अभिव्यक्तियों के बारे में, क्लास फील्ड्स के बारे में, स्ट्रिंग्स के साथ काम करने के बारे में बात करेंगे।

नियमित अभिव्यक्ति की जाँच

नियमित अभिव्यक्ति (नियमित अभिव्यक्ति, संक्षेप में - RegEx या RegExp) एक शक्तिशाली स्ट्रिंग प्रसंस्करण तकनीक है जिसे कई प्रोग्रामिंग भाषाओं में लागू किया जाता है। उन मामलों में जहां आप की जरूरत है, नियमित अभिव्यक्ति बहुत उपयोगी है, उदाहरण के लिए, जटिल पैटर्न द्वारा तार के टुकड़े की खोज करना। हाल तक तक, नियमित अभिव्यक्ति के जावास्क्रिप्ट कार्यान्वयन में सब कुछ था लेकिन लुकबैकहाइंड।

यह समझने के लिए कि पूर्वव्यापी चेक क्या है, पहले लुकहैड्स के बारे में बात करते हैं जो पहले से ही जावास्क्रिप्ट में समर्थित हैं।

→ दूसरा भाग

Check अग्रिम जांच

नियमित अभिव्यक्तियों में प्रमुख जांच के वाक्यविन्यास आपको स्ट्रिंग्स के टुकड़ों की खोज करने की अनुमति देते हैं जब यह ज्ञात होता है कि अन्य टुकड़े उनके दाईं ओर हैं। उदाहरण के लिए, स्ट्रिंग MangoJuice, VanillaShake, GrapeJuice साथ काम करते समय MangoJuice, VanillaShake, GrapeJuice आप एक सकारात्मक अग्रणी चेक के वाक्यविन्यास का उपयोग कर सकते हैं ताकि शब्द का तुरंत Juice पा सकें। हमारे मामले में, ये Mango और Grape शब्द हैं।

दो प्रकार के अग्रणी चेक हैं। ये पॉजिटिव लुकहेड और निगेटिव लुकहेड हैं।

सकारात्मक लीड की जाँच

एक सकारात्मक अग्रणी चेक का उपयोग लाइनों के दाईं ओर खोजने के लिए किया जाता है, जो अन्य, पहले से ज्ञात लाइनें हैं। इस जाँच के लिए नियमित अभिव्यक्ति सिंटैक्स का उपयोग किस प्रकार किया जाता है:

 /[a-zA-Z]+(?=Juice)/ 

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

 const testString = "MangoJuice, VanillaShake, GrapeJuice"; const testRegExp = /[a-zA-Z]+(?=Juice)/g; const matches = testString.match( testRegExp ); console.log( matches ); // ["Mango", "Grape"] 

नकारात्मक लीड की जाँच करें

यदि हम विचार करते हैं, तो उपरोक्त पंक्ति का उपयोग करते हुए, नकारात्मक अग्रणी जांच की कार्रवाई का तंत्र, यह पता चलता है कि वे आपको उन शब्दों को खोजने की अनुमति देते हैं जिनके लिए Juice शब्द नहीं है। नकारात्मक अग्रणी चेक का सिंटैक्स सकारात्मक जांच के सिंटैक्स के समान है। हालांकि, इसमें एक विशेषता है, जो यह है कि प्रतीक = (बराबर) एक प्रतीक में बदलता है ! (विस्मयादिबोधक चिह्न)। यहाँ यह कैसा दिखता है:

 /[a-zA-Z]+(?!Juice)/ 

यह नियमित अभिव्यक्ति आपको उन सभी शब्दों को चुनने की अनुमति देती है, जिनमें कोई शब्द Juice नहीं है। लेकिन इस तरह के टेम्पलेट को लागू करते समय, लाइन के सभी शब्दों का चयन किया जाएगा ( MangoJuice, VanillaShake, GrapeJuice )। तथ्य यह है कि, सिस्टम के अनुसार, यहां एक भी शब्द Juice साथ समाप्त नहीं होता है। नतीजतन, वांछित परिणाम प्राप्त करने के लिए, आपको नियमित अभिव्यक्ति को स्पष्ट करने और इसे इस तरह से फिर से लिखने की आवश्यकता है:

 /(Mango|Vanilla|Grape)(?!Juice)/ 

इस टेम्पलेट का उपयोग करने से आप Mango , या Vanilla , या Grape शब्दों का चयन कर सकते हैं, जिसके बाद कोई शब्द Juice नहीं है। यहाँ एक उदाहरण है:

 const testString = "MangoJuice, VanillaShake, GrapeJuice"; const testRegExp = /(Mango|Vanilla|Grape)(?!Juice)/g; const matches = testString.match( testRegExp ); console.log( matches ); // ["Vanilla"] 

▍ पूर्वव्यापी जांच

अग्रणी चेक के वाक्य विन्यास के साथ सादृश्य द्वारा, पूर्वव्यापी जांच के वाक्यविन्यास आपको केवल वर्णों के अनुक्रमों का चयन करने की अनुमति देता है, यदि इन अनुक्रमों के बाईं ओर एक निश्चित निर्दिष्ट पैटर्न है। उदाहरण के लिए, जब स्ट्रिंग FrozenBananas, DriedApples, FrozenFish तो हम शब्दों के बाईं ओर शब्द खोजने के लिए एक सकारात्मक पूर्वव्यापी जांच का उपयोग कर सकते हैं जिसमें Frozen शब्द है। हमारे मामले में, Bananas और Fish शब्द इस स्थिति के अनुरूप हैं।

अग्रणी जांच, सकारात्मक पूर्वव्यापी जांच (सकारात्मक खोज) और नकारात्मक पूर्वव्यापी जांच (नकारात्मक या नकारात्मक दिखावट) के मामले में ऐसा ही है।

सकारात्मक पूर्वव्यापी समीक्षा

पॉजिटिव रेट्रोस्पेक्टिव चेक का उपयोग बाईं ओर के पैटर्न की खोज करने के लिए किया जाता है, जो अन्य पैटर्न हैं। इस तरह के चेक का वर्णन करने के लिए उपयोग किए गए वाक्यविन्यास का एक उदाहरण यहां दिया गया है:

 /(?<=Frozen)[a-zA-Z]+/ 

प्रतीक < उपयोग यहां किया गया है, जो प्रमुख जांचों के विवरण में नहीं था। इसके अलावा, नियमित अभिव्यक्ति में स्थिति हमारे लिए हित के टेम्पलेट के दाईं ओर स्थित नहीं है, लेकिन बाईं ओर है। उपरोक्त टेम्पलेट का उपयोग करके, आप Frozen शुरू होने वाले सभी शब्दों का चयन कर सकते हैं। एक उदाहरण पर विचार करें:

 const testString = "FrozenBananas, DriedApples, FrozenFish"; const testRegExp = /(?<=Frozen)[a-zA-Z]+/g; const matches = testString.match( testRegExp ); console.log( matches ); // ["Bananas", "Fish"] 

नकारात्मक पूर्वव्यापी जांच

नकारात्मक पूर्वव्यापी जांच का तंत्र आपको उन पंक्तियों में पैटर्न की खोज करने की अनुमति देता है जिनके बाईं ओर कोई निर्दिष्ट पैटर्न नहीं है। उदाहरण के लिए, यदि आपको ऐसे शब्दों का चयन करने की आवश्यकता है जो FrozenBananas, DriedApples, FrozenFish लाइन में Frozen साथ शुरू नहीं FrozenBananas, DriedApples, FrozenFish , तो आप इस नियमित अभिव्यक्ति का उपयोग करके देख सकते हैं:

 /(?<!Frozen)[a-zA-Z]+/ 

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

 /(?<!Frozen)(Bananas|Apples|Fish)/ 

यहाँ एक उदाहरण है:

 const testString = "FrozenBananas, DriedApples, FrozenFish"; const testRegExp = /(?<!Frozen)(Bananas|Apples|Fish)/g; const matches = testString.match( testRegExp ); console.log( matches ); // ["Apples"] 

→ सहायता

यह और इसी तरह के अन्य खंड तकनीकी समिति 39 (तकनीकी समिति 39, टीसी 39) में वर्णित जेएस विशेषताओं के सामंजस्य के मंच पर जानकारी प्रदान करेंगे, जो ईसीएमएस्क्रिप्ट विनिर्देशों का समर्थन करने के लिए ईसीएमए इंटरनेशनल में जिम्मेदार है। ऐसे अनुभागों में, Chrome और Node.js (और कभी-कभी फ़ायरफ़ॉक्स के संस्करण पर) के संस्करणों पर डेटा भी प्रदान किया जाएगा, जिसके साथ आप संबंधित क्षमताओं का उपयोग कर सकते हैं।

• TC39: चरण 4
• क्रोम: 62+
• नोड: 8.10.0+

क्लास फील्ड्स

क्लास फ़ील्ड एक नया सिंटैक्स निर्माण है जिसका उपयोग क्लास कंस्ट्रक्टर के बाहर क्लास इंस्टेंसेस (ऑब्जेक्ट्स) के गुणों को परिभाषित करने के लिए किया जाता है। दो प्रकार के वर्ग फ़ील्ड हैं: सार्वजनिक वर्ग फ़ील्ड और निजी क्लास फ़ील्ड।

▍Public वर्ग के क्षेत्र

हाल तक तक, वस्तुओं के गुणों को क्लास कंस्ट्रक्टर के अंदर परिभाषित किया जाना था। ये गुण सार्वजनिक (सार्वजनिक) थे। इसका मतलब है कि उन्हें कक्षा (ऑब्जेक्ट) के एक उदाहरण के साथ काम करके पहुँचा जा सकता है। यहां सार्वजनिक संपत्ति घोषित करने का एक उदाहरण दिया गया है:

 class Dog {    constructor() {        this.name = 'Tommy';    } } 

जब एक वर्ग बनाने के लिए आवश्यक था जो एक निश्चित माता-पिता वर्ग का विस्तार करेगा, तो बाल वर्ग के निर्माता में super() को कॉल करना आवश्यक था। बाल वर्ग में अपनी संपत्तियों को जोड़ने से पहले यह किया जाना चाहिए था। यहाँ यह कैसा दिखता है:

 class Animal {} class Dog extends Animal {    constructor() {        super(); //  super   `this`          this.sound = 'Woof! Woof!';    }    makeSound() {        console.log( this.sound );    } } //    const tommy = new Dog(); tommy.makeSound(); // Woof! Woof! 

एक वर्ग के सार्वजनिक क्षेत्रों के वाक्यविन्यास की उपस्थिति के लिए धन्यवाद, निर्माणकर्ता के बाहर वर्ग के क्षेत्रों का वर्णन करना संभव है। सिस्टम super() को एक अंतर्निहित कॉल करेगा।

 class Animal {} class Dog extends Animal {    sound = 'Woof! Woof!'; //       makeSound() {        console.log( this.sound );    } } //    const tommy = new Dog(); tommy.makeSound(); // Woof! Woof! 

जब स्पष्ट रूप से super() कॉलिंग होती है super() यह उपयोगकर्ता द्वारा प्रदान की गई सभी दलीलों को पास करता है जब वर्ग उदाहरण (यह मानक जावास्क्रिप्ट व्यवहार है, निजी वर्ग के क्षेत्रों के बारे में कुछ खास नहीं है)। यदि मूल वर्ग के निर्माता को एक विशेष तरीके से तैयार किए गए तर्कों की आवश्यकता होती है, तो आपको super() खुद कॉल करने की आवश्यकता है। चाइल्ड क्लास का एक उदाहरण बनाते समय मूल वर्ग के निहित निर्माता कॉल के परिणामों पर एक नज़र डालें।

 class Animal {    constructor( ...args ) {        console.log( 'Animal args:', args );    } } class Dog extends Animal {    sound = 'Woof! Woof!'; //    makeSound() {        console.log( this.sound );    } } //    const tommy = new Dog( 'Tommy', 'Loves', 'Toys!' ); tommy.makeSound(); // Animal args: [ 'Tommy', 'Loves', 'Toys!' ] 

Fields निजी वर्ग के क्षेत्र

जैसा कि आप जानते हैं, जावास्क्रिप्ट में, public , private या protected जैसे वर्ग क्षेत्रों में कोई पहुँच संशोधक नहीं हैं। वस्तुओं के सभी गुण डिफ़ॉल्ट रूप से सार्वजनिक हैं। इसका मतलब है कि उन तक पहुंच असीमित है। निजी संपत्ति के समान किसी वस्तु की संपत्ति बनाने के लिए निकटतम चीज Symbol डेटा प्रकार का उपयोग करना है। यह आपको बाहरी दुनिया से वस्तुओं के गुणों को छिपाने की अनुमति देता है। आपने यह इंगित करने के लिए कि (केवल अंडरस्कोर) गुण वाले नामों का उपयोग किया है, जो इंगित करते हैं कि संबंधित गुणों को केवल ऑब्जेक्ट के भीतर उपयोग के लिए माना जाना चाहिए। हालांकि, यह उन लोगों के लिए एक तरह की अधिसूचना है जो सुविधा का उपयोग करेंगे। यह गुणों तक पहुंच के वास्तविक प्रतिबंध की समस्या को हल नहीं करता है।

कक्षाओं के निजी क्षेत्रों के तंत्र के लिए धन्यवाद, इस वर्ग के अंदर ही वर्ग के गुणों को सुलभ बनाना संभव है। यह इस तथ्य की ओर जाता है कि उन्हें बाहर से नहीं पहुँचा जा सकता है और कक्षा (ऑब्जेक्ट) के एक उदाहरण के साथ काम कर रहा है। पिछले उदाहरण को लें और वर्ग की संपत्ति को बाहर से एक्सेस करने का प्रयास करें, जब _ उपसर्ग का उपयोग किया गया था।

 class Dog {    _sound = 'Woof! Woof!'; //            makeSound() {        console.log( this._sound );    } } //    const tommy = new Dog(); console.log( tommy._sound ); // Woof! Woof! 

जैसा कि आप देख सकते हैं, _ उपसर्ग का उपयोग करने से हमारी समस्या हल नहीं होती है। कक्षाओं के निजी क्षेत्रों को सार्वजनिक फ़ील्ड के रूप में उसी तरह से घोषित किया जा सकता है, लेकिन अंडरस्कोर के रूप में उपसर्ग के बजाय, आपको उनके नामों के लिए पाउंड चिह्न ( # ) के रूप में एक उपसर्ग जोड़ना होगा। इस तरह से घोषित वस्तु की निजी संपत्ति तक अनधिकृत पहुंच के प्रयास के परिणामस्वरूप निम्नलिखित त्रुटि होगी:

 SyntaxError: Undefined private field 

यहाँ एक उदाहरण है:

 class Dog {    #sound = 'Woof! Woof!'; //  -      makeSound() {        console.log( this.#sound );    } } //    const tommy = new Dog(); tommy.makeSound() // Woof! Woof! //console.log( tommy.#sound ); // SyntaxError 

ध्यान दें कि निजी संपत्तियों को केवल उस वर्ग से एक्सेस किया जा सकता है जिसमें वे घोषित किए गए हैं। परिणामस्वरूप, वंशज वर्ग सीधे मूल वर्ग के समान गुणों का उपयोग नहीं कर सकते हैं।

निजी (और सार्वजनिक) क्षेत्र उनमें कुछ मान लिखे बिना घोषित किए जा सकते हैं:

 class Dog {    #name;    constructor( name ) {        this.#name = name;    }    showName() {        console.log( this.#name );    } } //    const tommy = new Dog( 'Tommy' ); tommy.showName(); // Tommy 

→ सहायता

• TC39: स्टेज 3
• क्रोम: 74+
• नोड: 12+

स्ट्रिंग विधि। MatchAll ()

String डेटा प्रकार प्रोटोटाइप में एक .match() विधि है जो स्ट्रिंग के टुकड़े की एक सरणी लौटाती है जो नियमित अभिव्यक्ति द्वारा निर्दिष्ट स्थिति से मेल खाती है। इस विधि का उपयोग करके एक उदाहरण दिया गया है:

 const colors = "#EEE, #CCC, #FAFAFA, #F00, #000"; const matchColorRegExp = /([A-Z0-9]+)/g; console.log( colors.match( matchColorRegExp ) ); // : ["EEE", "CCC", "FAFAFA", "F00", "000"] 

इस पद्धति का उपयोग करते समय, हालांकि, स्ट्रिंग के पाए गए टुकड़ों के बारे में कोई अतिरिक्त जानकारी (जैसे सूचकांक) नहीं दी गई है। यदि आप .match() विधि में दी गई नियमित अभिव्यक्ति से g ध्वज .match() , तो यह एक सरणी लौटाएगा जिसमें खोज परिणामों के बारे में अतिरिक्त जानकारी होगी। हालांकि, इस दृष्टिकोण के साथ, नियमित अभिव्यक्ति से मेल खाने वाले स्ट्रिंग का केवल पहला टुकड़ा मिलेगा।

 const colors = "#EEE, #CCC, #FAFAFA, #F00, #000"; const matchColorRegExp = /#([A-Z0-9]+)/; console.log( colors.match( matchColorRegExp ) ); // : (       ) ["#EEE", "EEE", index: 0, input: "<colors>"] 

कुछ समान पाने के लिए, लेकिन एक स्ट्रिंग के कई टुकड़ों के लिए, आपको नियमित अभिव्यक्ति विधि .exec() का उपयोग करना होगा। इसके लिए जिन निर्माणों की आवश्यकता होती है, वे उसी से अधिक जटिल होते हैं जिसमें समान परिणाम प्राप्त करने के लिए एकल स्ट्रिंग पद्धति का उपयोग किया जाएगा। विशेष रूप से, यहां हमें while आवश्यकता होती है जो कि .exec() null तक निष्पादित करेगा। इस दृष्टिकोण का उपयोग करते हुए, ध्यान रखें कि .exec() एक .exec() वापस नहीं करता है।

 const colors = "#EEE, #CCC, #FAFAFA, #F00, #000"; const matchColorRegExp = /#([A-Z0-9]+)/g; //        , // Uncaught ReferenceError: match is not defined while( match = matchColorRegExp.exec( colors ) ) {  console.log( match ); } // : (       ) ["#EEE", "EEE", index: 0, input: "<colors>"] ["#CCC", "CCC", index: 6, input: "<colors>"] ["#FAFAFA", "FAFAFA", index: 12, input: "<colors>"] ["#F00", "F00", index: 21, input: input: "<colors>"] ["#000", "000", index: 27, input: input: "<colors>"] 

ऐसी समस्याओं को हल करने के लिए, हम अब स्ट्रिंग विधि .matchAll() उपयोग कर सकते हैं, जो एक .matchAll() देता है। इस .next() के .next() पद्धति का प्रत्येक कॉल खोज परिणामों से अगला तत्व .next() । परिणामस्वरूप, उपरोक्त उदाहरण को निम्नानुसार फिर से लिखा जा सकता है:

 const colors = "#EEE, #CCC, #FAFAFA, #F00, #000"; const matchColorRegExp = /#([A-Z0-9]+)/g; console.log( ...colors.matchAll( matchColorRegExp ) ); // : (       ) ["#EEE", "EEE", index: 0, input: "<colors>"] ["#CCC", "CCC", index: 6, input: "<colors>"] ["#FAFAFA", "FAFAFA", index: 12, input: "<colors>"] ["#F00", "F00", index: 21, input: input: "<colors>"] ["#000", "000", index: 27, input: input: "<colors>"] 

→ सहायता

• TC39: चरण 4
• क्रोम: 73+
• नोड: 12+
• फ़ायरफ़ॉक्स: 67+

नियमित अभिव्यक्तियों में नामित समूह

नियमित अभिव्यक्ति तंत्र के जावास्क्रिप्ट कार्यान्वयन में समूहों की अवधारणा अन्य भाषाओं में समान अवधारणा के कार्यान्वयन से थोड़ी अलग है। अर्थात्, जब जावास्क्रिप्ट का उपयोग करते हुए, RegEx- टेम्पलेट को कोष्ठक में रखा जाता है (सिवाय जब कोष्ठक का उपयोग पूर्वव्यापी या उन्नत जांच के लिए किया जाता है), तो टेम्पलेट एक समूह बन जाता है।

समूह द्वारा पकड़े गए स्ट्रिंग के टुकड़े नियमित अभिव्यक्ति को लागू करने के परिणामों में परिलक्षित होंगे।

पिछले उदाहरण में, आप देख सकते हैं कि खोज परिणामों के साथ सरणी का पहला तत्व वह है जो संपूर्ण नियमित अभिव्यक्ति से मेल खाता है, और दूसरा वह है जो समूह से मेल खाता है। यहाँ इस सरणी तत्व है:

 ["#EEE", "EEE", index: 0, input: "<colors>"] 

यदि नियमित अभिव्यक्ति में कई समूह हैं, तो वे नियमित अभिव्यक्ति में उनके विवरण के क्रम में स्ट्रिंग को संसाधित करने के परिणामों में मिलेंगे। एक उदाहरण पर विचार करें:

 const str = "My name is John Doe."; const matchRegExp = /My name is ([az]+) ([az]+)/i; const result = str.match( matchRegExp );console.log( result ); //   result  null -   console.log( { firstName: result[1], lastName: result[2] } ); // : ["My name is John Doe", "John", "Doe", index: 0, input: "My name is John Doe.", groups: undefined] {firstName: "John", lastName: "Doe"} 

यहां आप देख सकते हैं कि आउटपुट की पहली पंक्ति नियमित अभिव्यक्ति के अनुरूप पूरी लाइन है। दूसरा और तीसरा तत्व प्रतिनिधित्व करते हैं कि समूहों द्वारा कब्जा कर लिया गया था।

नामित समूहों का उपयोग करने से आपको यह पता चलता है कि groups ऑब्जेक्ट के भीतर कौन से समूह कैप्चर कर रहे हैं, जिनकी संपत्ति के नाम समूहों को सौंपे गए नामों के अनुरूप हैं।

 const str = "My name is John Doe."; const matchRegExp = /My name is (?<firstName>[az]+) (?<lastName>[az]+)/i; const result = str.match( matchRegExp ); console.log( result ); console.log( result.groups ); // : ["My name is John Doe", "John", "Doe", index: 0, input: "My name is John Doe.", groups: {firstName: "John", lastName: "Doe"}] {firstName: "John", lastName: "Doe"} 

यह ध्यान दिया जाना चाहिए कि नामित समूह .matchAll() पद्धति के साथ मिलकर काम करते हैं।

→ सहायता

• TC39: चरण 4
• क्रोम: 64+
• नोड: 10+

जारी रखने के लिए ...

प्रिय पाठकों! क्या आपने यहां वर्णित किसी भी जावास्क्रिप्ट नवाचार का उपयोग किया है?