EcmaScript 10 - इस साल के जावास्क्रिप्ट (ES2019)

जेएस मानकीकरण ने एक वर्ष के अद्यतन चक्र पर स्विच किया है, और वर्ष की शुरुआत यह पता लगाने के लिए एक शानदार समय है कि वर्षगांठ में हमें क्या इंतजार है - एक्मास्क्रिप्ट का दसवां संस्करण!

ईएस 9 विनिर्देश का वर्तमान संस्करण है ।

ES 10 अभी भी एक मसौदा है ।

आज तक, स्टेज 4 ^{# में} कुछ सुझाव हैं।

और स्टेज 3 में - एक पूरे दर्जन!

इनमें से, मेरी राय में, सबसे दिलचस्प वर्ग के निजी क्षेत्र हैं ^# , लिपियों के लिए शेबंग व्याकरण ^# , मनमानी परिशुद्धता की संख्या ^# , वैश्विक संदर्भ तक पहुंच ^# और गतिशील आयात ^# ।

^{फ़ोटो द्वारा: kasper.green; पीला चुंबक: elfafeya.art और kasper.green}

सामग्री

पांच चरण ^#

चरण 4 - अंतिम ^#

• catch - तर्क वैकल्पिक हो गया है ^# ;

• Symbol().description - प्रतीक ^# के वर्णन के लिए अभिगमकर्ता ;

• ' EcmaScript' - JSON प्रारूप ^# के साथ बेहतर संगतता ;

• .toString() - प्रोटोटाइप विधि ^# अपडेट की गई ।

• Object.fromEntries() - जोड़े की एक सरणी से एक वस्तु बनाना - कुंजी \ मूल्य ^# ;

• .flat() और .flatMap() प्रोटोटाइप ^# सरणी विधियां हैं ।

चरण 3 - पूर्व-रिलीज़ ^#

· - ऑक्टोटर के माध्यम से कक्षाओं में सब कुछ निजी है ;

• #!/usr/bin/env node - लिपियों के लिए व्याकरण व्याकरण ^# ;

• BigInt() - एक नया आदिम, मनमाना सटीक संख्याओं के लिए ^# ;

• globalThis - वैश्विक संदर्भ का उपयोग करने का एक नया तरीका ^# ;

• import(dynamic) - गतिशील आयात ^# ;

• import.meta - लोड किए गए मॉड्यूल के बारे में मेटा जानकारी ^# ;

• JSON.stringify() - ^# विधि का फिक्स ;

• RegExp - पदावनत सुविधाएँ ^# ;

• .trimStart() और .trimEnd() - प्रोटोटाइप स्ट्रिंग विधियाँ ^# ;

• .matchAll() - .match() ग्लोबल फ्लैग ^{# के साथ} ;

परिणाम ^#

पाँच अवस्थाएँ

_{स्टेज} 0 be स्ट्रॉमन बस्टिंग एक ऐसा विचार जिसे बैबल- प्लगइन के माध्यम से कार्यान्वित किया जा सकता है;

_चरण 1 1 विचार व्यवहार्यता का प्रस्ताव ^{प्रस्ताव} सत्यापन ।;

_चरण 2 specification विनिर्देशन विकास का ड्राफ्ट ^{ड्राफ़्ट} प्रारंभ ।;

_चरण 3 3 उम्मीदवार ^{उम्मीदवार} पूर्वावलोकन विशिष्टता;

_चरण 4 ֍ समाप्त इस वर्ष के लिए विनिर्देश का अंतिम संस्करण पूरा हो गया है।

हम केवल चरण 4 पर विचार करेंगे - वास्तविक मानक।

और स्टेज 3 - जो इसका हिस्सा बनने वाला है।

֍ स्टेज 4

ये परिवर्तन पहले से ही मानक हैं।

वैकल्पिक तर्क को catch

https://github.com/tc39/proposal-optional-catch-binding

ईएस 10 से पहले, catch को त्रुटि जानकारी एकत्र करने के लिए एक आवश्यक तर्क की आवश्यकता थी, भले ही इसका उपयोग न किया गया हो:

 function isValidJSON(text) { try { JSON.parse(text); return true; } catch(unusedVariable) { //    return false; } } 

^{एज को अभी तक ES 10 में अपग्रेड नहीं किया गया है, और एक त्रुटि के साथ क्रैश होने की उम्मीद है।}

ES 10 संस्करण के साथ शुरू, कोष्ठक छोड़ा जा सकता है और catch की try तरह पानी की दो बूंदों की तरह हो जाएगा।

^{मेरा Chrome पहले ही ES 10 और कुछ स्थानों पर स्टेज 3 में अपडेट हो चुका है। आगे के स्क्रीनशॉट क्रोम से होंगे}

 function isValidJSON(text) { try { JSON.parse(text); return true; } catch { //   return false; } } 

एक्सेस प्रतीकात्मक लिंक विवरण

https://tc39.imtqy.com/proposal-Symbol-description/

एक प्रतीकात्मक लिंक विवरण को अप्रत्यक्ष रूप से (।) विधि का उपयोग करके प्राप्त किया जा सकता है:

 const symbol_link = Symbol("Symbol description") String(symbol_link) // "Symbol(Symbol description)" 

ईएस 10 के साथ शुरू होने वाले वर्णों में एक विवरण संपत्ति होती है जो केवल पढ़ने के लिए होती है। यह आपको बिना किसी नृत्य के प्रतीक के विवरण का वर्णन करने की अनुमति देता है:

 symbol_link.description // "Symbol description" 

यदि विवरण निर्दिष्ट नहीं है, तो यह वापस आ जाएगा - undefined :

 const without_description_symbol_link = Symbol() without_description_symbol_link.description // undefined const empty_description_symbol_link = Symbol('') empty_description_symbol_link.description // "" 

EcmaScript स्ट्रिंग्स JSON के साथ संगत

https://github.com/tc39/proposal-json-superset

EcmaScript, अपने दसवें संस्करण से पहले, दावा करता है कि JSON JSON.parse सबसेट है, लेकिन यह सच नहीं है।

JSON लाइनों में बिना तार वाली लाइन सेपरेटर U+2028 ^{LINE SEPARATOR} और पैराग्राफ U+2029 ^{PARAGRAPH SEPARATOR हो सकते हैं} ।

ECMAScript की दसवीं संस्करण तक पंक्तियाँ - नहीं।

यदि आप स्ट्रिंग में स्ट्रिंग "\u2029" eval() "\u2029" ,
यह ऐसा व्यवहार करता है मानो हमने एक लाइन ब्रेक किया हो - कोड के ठीक बीच में:

ES 10 लाइनों के साथ - सब कुछ ठीक है:

प्रोटोटाइप का शोधन .toString() विधि

http://tc39.imtqy.com/Function-prototype-toString-revision/

 //   function () { console.log('My Function!'); }.toString(); // function () { console.log('My Function!'); } //     Number.parseInt.toString(); // function parseInt() { [native code] } //     function () { }.bind(0).toString(); // function () { [native code] } //     Symbol.toString(); // function Symbol() { [native code] } //     Function().toString(); // function anonymous() {} //    - function* () { }.toString(); // function* () { } // .call   ,   ,  Function.prototype.toString.call({}); // Function.prototype.toString requires that 'this' be a Function" 

Object.fromEntries() विधि का उपयोग करके ऑब्जेक्ट बनाना

https://github.com/tc39/proposal-object-from-entries

^{क्रोम में काम करता है}

_.fromPairs से lodash का एनालॉग:

 Object.fromEntries([['key_1', 1], ['key_2', 2]]) // {key_1: 1; key_2: 2} 

.flat() और .flatMap() साथ एक आयामी सरणियाँ

https://github.com/tc39/proposal-flatMap

^{क्रोम में काम करता है}

सरणी ने प्रोटोटाइप का अधिग्रहण किया .flat() और .flatMap() , जो आम तौर पर दर्ज किए गए कार्यान्वयन के समान हैं, लेकिन फिर भी कुछ अंतर हैं। वैकल्पिक तर्क - अधिकतम पेड़ की गहराई को निर्धारित करता है:

 const deep_deep_array = [ '≥0 —  ', [ '≥1 —  ', [ '≥2 —  ', [ '≥3 —  ', [ '≥4 —  ' ] ] ] ] ] // 0 —     deep_deep_array.flat(0) //  ["≥0 —  ", Array(2)] // 1 —    deep_deep_array.flat() //  [" ", " ", Array(2)] deep_deep_array.flat(2) //  [" ", " ", " ", Array(2)] deep_deep_array.flat(100500) // [" ", " ", " ", " ", " "] 

.flatMap() लगातार कॉल करने के बराबर .flatMap() .map().flat() । कॉलबैक फ़ंक्शन को विधि में दिया गया एक सरणी लौटना चाहिए जो एक सामान्य फ्लैट सरणी का हिस्सा बन जाएगा:

 ['Hello', 'World'].flatMap(word => [...word]) // ["H", "e", "l", "l", "o", "W", "o", "r", "l", "d"] 

केवल .flat() और .flat() का उपयोग करके, उदाहरण को इस तरह से फिर से लिखा जा सकता है:

  ['Hello', 'World'].map(word => [...word]).flat() // ["H", "e", "l", "l", "o", "W", "o", "r", "l", "d"] 

यह भी ध्यान दें कि .flatMap() , .flatMap() के विपरीत .flat() क्रॉल गहराई सेटिंग्स नहीं है। इसलिए केवल पहले स्तर पर ही नजर रखी जाएगी।

֍ स्टेज 3

प्रस्ताव जो मसौदा की स्थिति से उभरा है, लेकिन अभी तक मानक के अंतिम संस्करण में प्रवेश नहीं किया है।

निजी \ स्थिर \ सार्वजनिक तरीके \ गुण \ गुण वर्गों की

https://github.com/tc39/proposal-class-fields
https://github.com/tc39/proposal-private-methods
https://github.com/tc39/proposal-static-class-features

कुछ भाषाओं में एक दृश्य स्थान के साथ निजी तरीकों को कॉल करने का एक समझौता है ^{(" _ " - इस तरह का एक टुकड़ा, आप इस नाम को गलत नाम के नीचे जान सकते हैं - अंडरस्कोर)} ।

उदाहरण के लिए, इस तरह:

 <?php class AdultContent { private $_age = 0; private $_content = '…is dummy example content (•)(•) —3 (.)(.) only for adults…'; function __construct($age) { $this->_age = $age; } function __get($name) { if($name === 'content') { return " (age: ".$this->_age.") → ".$this->_getContent()."\r\n"; } else { return 'without info'; } } private function _getContent() { if($this->_contentIsAllowed()) { return $this->_content; } return 'Sorry. Content not for you.'; } private function _contentIsAllowed() { return $this->_age >= 18; } function __toString() { return $this->content; } } echo "<pre>"; echo strval(new AdultContent(10)); // (age: 10) → Sorry. Content not for you echo strval(new AdultContent(25)); // (age: 25) → …is dummy example content (•)(•) —3 only for adults… $ObjectAdultContent = new AdultContent(32); echo $ObjectAdultContent->content; // (age: 32) → …is dummy example content (•)(•) —3 only for adults… ?> 

मुझे आपको याद दिलाना है - यह केवल एक समझौता है। अन्य उपसर्ग का उपयोग करने से अलग उपसर्ग का उपयोग करने, या बिल्कुल भी उपयोग नहीं करने से कुछ भी नहीं रोकता है।

^{व्यक्तिगत रूप से, मैं this लौटाने वाले कार्यों के लिए उपसर्ग के रूप में एक दृश्य स्थान का उपयोग करने के विचार से प्रभावित हूं। इसलिए उन्हें कॉल की एक श्रृंखला में जोड़ा जा सकता है।}

EcmaScript विनिर्देश के डेवलपर्स ने आगे बढ़कर सिंटैक्स का उपसर्ग- ऑक्टोटरप ^{(" # " -लॉटिस, हैश) बनाया} ।

ES 10 पर पिछले उदाहरण को इस प्रकार फिर से लिखा जा सकता है:

 export default class AdultContent { //    #age = 0 #adult_content = '…is dummy example content (•)(•) —3 (.)(.) only for adults…' constructor(age) { this.#setAge(age) } //    static #userIsAdult(age) { return age > 18 } //   get content () { return `(age: ${this.#age}) → ` + this.#allowed_content } //   get #allowed_content() { if(AdultContent.userIsAdult(this.age)){ return this.#adult_content } else { return 'Sorry. Content not for you.' } } //   #setAge(age) { this.#age = age } toString () { return this.#content } } const AdultContentForKid = new AdultContent(10) console.log(String(AdultContentForKid)) // (age: 10) → Sorry. Content not for you. console.log(AdultContentForKid.content) // (age: 10) → Sorry. Content not for you. const AdultContentForAdult = new AdultContent(25) console.log(String(AdultContentForAdult)) // (age: 25) → …is dummy example content (•)(•) —3 (.)(.) only for adults… console.log(AdultContentForAdult.content) // (age: 25) → …is dummy example content (•)(•) —3 (.)(.) only for adults… 

निजी गुणों, विधियों और विशेषताओं को एक साथ प्रदर्शित करने के लिए उदाहरण को अनावश्यक रूप से जटिल किया गया है। लेकिन सामान्य तौर पर, JS - PHP संस्करण की तुलना में अपनी संक्षिप्तता के साथ आंख को प्रसन्न करता है। कोई निजी फ़ंक्शन _... आपके लिए, पंक्ति के अंत में कोई अर्धविराम नहीं है, और ऑब्जेक्ट में गहराई तक जाने के लिए "->" के बजाय एक बिंदु।

नाम रखने वाले। गतिशील नामों के लिए, प्रॉक्सी ऑब्जेक्ट।

यह trifles लगता है, लेकिन JS पर स्विच करने के बाद, PHP में लौटने की इच्छा कम और कम होती है।

वैसे, निजी एक्सेसर्स केवल बेबल 7.3.0 और बाद में उपलब्ध हैं।

लेखन के समय, npmjs.com का सबसे हालिया संस्करण 7.2.2 है

स्टेज 4 के लिए आगे देख!

शेबंग ग्रामर

https://github.com/tc39/proposal-hashbang

हैशबैंग एक तरह से यूनिक्स एक निष्पादन योग्य फ़ाइल के लिए दुभाषिया निर्दिष्ट करने से परिचित है:

 #!/usr/bin/env node //   'use strict'; console.log(1); 

 #!/usr/bin/env node //   export {}; console.log(1); 

^{SyntaxError: Invalid or unexpected token Chrome एक SyntaxError: Invalid or unexpected token फेंक रहा है SyntaxError: Invalid or unexpected token एक समान SyntaxError: Invalid or unexpected token पर SyntaxError: Invalid or unexpected token}

BigInt के साथ बड़ी संख्या

https://github.com/tc39/proposal-bigint

अधिकतम पूर्णांक जिसे जावास्क्रिप्ट में सुरक्षित रूप से उपयोग किया जा सकता है (2 1 - 1):

 console.log(Number.MAX_SAFE_INTEGER) // 9007199254740991 

बिगआईंट को मनमाने ढंग से सटीक संख्याओं का उपयोग करने की आवश्यकता है।

यह प्रकार कई तरह से घोषित किया जाता है:

 //  'n'       910000000000000100500n // 910000000000000100500n //      BigInt()   BigInt( 910000000000000200500 ) // 910000000000000200500n //     -  BigInt( "910000000000000300500" ) // 910000000000000300500n //      1642  BigInt( "" ) \\ 

यह एक नया आदिम प्रकार है:

 typeof 123; // → 'number' typeof 123n; // → 'bigint' 

इसकी तुलना साधारण संख्याओं से की जा सकती है:

 42n === BigInt(42); // → true 42n == 42; // → true 

लेकिन गणितीय कार्यों को एक प्रकार से किया जाना चाहिए:

 20000000000000n/20n // 1000000000000n 20000000000000n/20 // Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions 

यूनरी माइनस का समर्थन किया जाता है, यूनरी प्लस एक त्रुटि देता है:

  -2n // -2n +2n // Uncaught TypeError: Cannot convert a BigInt value to a number 

globalThis - वैश्विक संदर्भ तक पहुंचने का एक नया तरीका

https://github.com/tc39/proposal-global

^{क्रोम में काम करता है}

चूंकि वैश्विक स्कोप कार्यान्वयन एक विशेष इंजन पर निर्भर करता है, आपको पहले कुछ इस तरह से करना था:

 var getGlobal = function () { if (typeof self !== 'undefined') { return self; } if (typeof window !== 'undefined') { return window; } if (typeof global !== 'undefined') { return global; } throw new Error('unable to locate global object'); }; 

और यहां तक ​​कि इस विकल्प ने भी गारंटी नहीं दी कि सब कुछ निश्चित रूप से काम करेगा।

globalThis वैश्विक प्लेटफार्मों तक पहुँचने के लिए सभी प्लेटफार्मों के लिए एक सामान्य तरीका है:

 //      globalThis.Array(1,2,3) // [1, 2, 3] //        globalThis.myGLobalSettings = { it_is_cool: true } //        globalThis.myGLobalSettings // {it_is_cool: true} 

गतिशील import(dynamic)

https://github.com/tc39/proposal-dynamic-import

मैं गतिशील आयात के साथ आयात लाइनों में चर चाहता था, यह संभव हो गया:

 import(`./language-packs/${navigator.language}.js`) 

डायनामिक इम्पोर्ट एक अतुल्यकालिक ऑपरेशन है। एक वादा लौटाता है, जो मॉड्यूल लोड करने के बाद, कॉलबैक फ़ंक्शन पर लौटता है।

इसलिए, आप मॉड्यूल लोड कर सकते हैं - जब आवश्यक हो तो आस्थगित:

 element.addEventListener('click', async () => { //   await    const module = await import(`./events_scripts/supperButtonClickEvent.js`) module.clickEvent() }) 

सिंथेटिक रूप से, यह import() फ़ंक्शन के लिए एक कॉल की तरह दिखता है, लेकिन फंक्शन.प्रोटोटाइप से विरासत में नहीं आता है, जिसका अर्थ है कि यह call या apply माध्यम से call में सफल नहीं होगा:

 import.call("example this", "argument") // Uncaught SyntaxError: Unexpected identifier 

import.meta - लोड किए गए मॉड्यूल के बारे में मेटा जानकारी।

https://github.com/tc39/proposal-import-meta

^{क्रोम में काम करता है}

लोड किए गए मॉड्यूल के कोड में, उस पर जानकारी प्राप्त करना संभव हो गया। अब यह केवल वह पता है जिस पर मॉड्यूल लोड किया गया था:

 console.log(import.meta); // { url: "file:///home/user/my-module.js" } 

JSON.stringify() विधि JSON.stringify()

https://github.com/tc39/proposal-well-formed-stringify

RFC 8259 की धारा 8.1 के लिए आवश्यक है कि JSON टेक्स्ट को बंद किए गए पारिस्थितिक तंत्र के बाहर UTF-8 का उपयोग करके एन्कोड किया जाए, लेकिन JSON.stringify उन स्ट्रेंथ पॉइंट्स को वापस कर सकता है, जो UTF-8 (विशेष रूप से, सरोगेट कोड पॉइंट्स) में प्रतिनिधित्व नहीं करते हैं। U + D800 से U + DFFF)

तो JSON.stringify () प्रसंस्करण के बाद लाइन \uDF06\uD834 \\udf06\\ud834 में बदल जाती है:

 /*         */ JSON.stringify('\uDF06\uD834') '"\\udf06\\ud834"' JSON.stringify('\uDEAD') '"\\udead"' 

यह नहीं होना चाहिए, और नया विनिर्देश इसे ठीक करता है। ^{एज और क्रोम को पहले ही अपडेट किया जा चुका है।}

पदावनत RegExp सुविधाएँ

https://github.com/tc39/proposal-regexp-legacy-features

RegExp.$1 , और RegExp.prototype.compile() विधि RegExp.prototype.compile() ।

प्रोटोटाइप स्ट्रिंग के तरीके .trimStart() और .trimEnd()

https://github.com/tc39/proposal-string-left-right-trim

^{क्रोम में काम करता है}

विधियों के साथ सादृश्य द्वारा .padStart() और .padEnd() , क्रमशः लाइन के आरंभ और अंत में .padEnd() काटें:

 const one = " hello and let "; const two = "us begin. "; console.log( one.trimStart() + two.trimEnd() ) // "hello and let us begin." 

.matchAll () एक नई प्रोटोटाइप स्ट्रिंग विधि है।

https://github.com/tc39/proposal-string-matchall

^{क्रोम में काम करता है}

g ध्वज के साथ .match() विधि की तरह काम करता है, लेकिन एक .match() देता है:

 const string_for_searh = 'olololo' //         string_for_searh.match(/o/) // ["o", index: 0, input: "olololo", groups: undefined] //       string_for_searh.match(/o/g) // ["o", "o", "o", "o"] //   string_for_searh.matchAll(/o/) // {_r: /o/g, _s: "olololo"} //        , //      .match    for(const item of string_for_searh.matchAll(/o/)) { console.log(item) } // ["o", index: 0, input: "olololo", groups: undefined] // ["o", index: 2, input: "olololo", groups: undefined] // ["o", index: 4, input: "olololo", groups: undefined] // ["o", index: 6, input: "olololo", groups: undefined] 

तर्क एक नियमित अभिव्यक्ति होना चाहिए, अन्यथा एक अपवाद फेंक दिया जाएगा:

 'olololo'.matchAll('o') // Uncaught TypeError: o is not a regexp! 

परिणाम

स्टेज 4 में और भी कॉस्मेटिक बदलाव आए। ब्याज स्टेज 3 है । क्रोम में अधिकांश सुझाव पहले से ही लागू हैं, और वस्तुओं के गुण वास्तव में आगे देख रहे हैं।

लेख में सुधार

यदि आपने लेख में कोई अशुद्धि, त्रुटि देखी है, या पूरक करने के लिए कुछ है, तो आप मुझे एक व्यक्तिगत संदेश लिख सकते हैं , लेकिन लेख रिपॉजिटरी https://github.com/KasperGreen/es10 का उपयोग करना बेहतर है। सक्रिय योगदान के लिए, मैं केडीपीवी के साथ पीले चुंबक-पदक का पुरस्कार दूंगा।

संबंधित सामग्री

Ecma-262 मानक का वर्तमान संस्करण

Ecma-262 मानक के अगले संस्करण का ड्राफ्ट

ECMAScript

जावास्क्रिप्ट में नए # निजी वर्ग के क्षेत्र

ES7, ES8 और ES9 मानकों का अवलोकन

कुटिया

बिगआईंट - जावास्क्रिप्ट में लंबी अंकगणित

जावास्क्रिप्ट मॉड्यूल पथ

क्यों नहीं निजी एक्स

ECMAScript प्रस्ताव: Array.prototype। {फ़्लैट, फ़्लैटमैप}

सार्वजनिक और निजी वर्ग के क्षेत्र

जावास्क्रिप्ट: बिग होल पूरा क्यों

यूपीडी (मार्च):

स्थिति को स्टेज में बदला - 4 :

• .trimStart() और .trimEnd() - प्रोटोटाइप स्ट्रिंग विधियाँ ^# ;

• .matchAll() - .match() ग्लोबल फ्लैग ^{# के साथ} ;

^{फ़ोटो द्वारा: kasper.green; पीला चुंबक: elfafeya.art और kasper.green}