ECMASCript 2019可能會有哪些特性?
譯者按:又過了1年…
- 原文: What’s New in JavaScript for 2019
- 譯者:Fundebug
為了保證可讀性,本文采用意譯而非直譯。另外,本文版權歸原作者所有,翻譯僅用於學習。
最近這些年,ECMASCript標準發展節奏非常穩定,每年都會發布新的特性。那麼,ECMASCript 2019可能會有哪些特性呢?
ECMASCript語法提案的批准流程
JavaScript的標準即為 ECMAScript ,其標準委員會是 TC39 。
所有語法提案都需要經歷標準的 批准流程 ,該流程包括5個階段:
- Stage 0 - Strawman(展示階段)
- Stage 1 - Proposal(徵求意見階段)
- Stage 2 - Draft(草案階段)
- Stage 3 - Candidate(候選階段)
- Stage 4 - Finished(定案階段)
只有語法特性到達Stage 4,該特性才能成為正式的ECMAScript標準。但是,JS引擎例如 V8 (Chrome和Node.js)以及 SpiderMonkey (Firefox)會試驗性地支援Stage 4之前的語法特性,這樣開發者可以進行測試和反饋。
當我寫這篇部落格的時候,還沒有新的Stage 4的 語法提案 ,處於Stage 3的語法提案有好幾個。ES2019可能不會包括所有Stage 3的語法提案。事實上,有些提案已經被擱置很多年了。
Class相關變化
有好幾個提案是針對Class的,包括:
程式碼示例如下:
class Truck extends Automobile { model = "Heavy Duty"; // 公有屬性 #numberOfSeats = 5; // 私有屬性 #isCrewCab = true; static #name = "Truck"; // 靜態私有屬性 // 靜態方法 static formattedName() { return `This vehicle is a ${ Truck.#name }.`; } constructor( model, seats = 2 ) { super(); this.seats = seats; } // 私有方法 #getBodyType() { return this.#isCrewCab ? "Crew Cab" : "Standard Cab"; } bodyType() { return `${ this.#numberOfSeats }-passenger ${ this.model } ${ this.#getBodyType() }`; } get seats() { return this.#numberOfSeats; } set seats( value ) { if ( value >= 1 && value < 7 ) { this.#numberOfSeats = value; this.#isCrewCab = value > 3; } } }
個人認為,使用 #
來定義私有成員不是很好,學習其他語言,使用 private
來定義顯然更好。
String的trimStart()與trimEnd()方法
String有一個trim()方法可以移除字串開頭和結尾的空格,而trimStart()與trimEnd()方法則可以分別移除開頭和結尾的空格:
const one = "hello and let "; const two = "us begin."; console.log( one.trimStart() + two.trimEnd() ) // 列印"hello and let us begin."
有趣的是,不少瀏覽器已經 支援 了這2個方法。可見,瀏覽器們一直在推動ECMASCript標準的進步。
使用BigInt定義大整數
Number所能定義的最大整數為2^53 ,對於更大數,則可以使用 BigInt 來定義:
// 最大的Number const theBiggestIntegerToday = Number.MAX_SAFE_INTEGER; // 9007199254740991 // 在整數後面新增n來定義BigInt const ABiggerInteger = 9100000000000001n; // 使用BigInt() const EvenBigger = BigInt( 9100000000000002 ); // 9100000000000002n // 使用BigInt() const SuchBigWow = BigInt( "9100000000000003" ); // 9100000000000003n
關於BigInt的更多使用示例,可以檢視 BigInt: arbitrary-precision integers in JavaScript
Array的flat()與flatMap()方法
如果你學習過函數語言程式設計,那麼你應該知道 flat()和flatMap() 。flat()可以將一個包含巢狀陣列的陣列變換為一維陣列。
const nestedArraysOhMy = [ "a", ["b", "c"], ["d", ["e", "f"]]]; // flat()的引數為陣列的巢狀深度 const ahhThatsBetter = nestedArraysOhMy.flat( 2 ); console.log( ahhThatsBetter ); // [ "a", "b", "c", "d", "e", "f" ]
flatMap()與map()類似,當回撥函式返回陣列時,flatMap()返回的是一維陣列,而map()返回的是巢狀陣列:
const scattered = [ "my favorite", "hamburger", "is a", "chicken sandwich" ]; const huh = scattered.map( chunk => chunk.split( " " ) ); console.log( huh ); // [ [ "my", "favorite" ], [ "hamburger" ], [ "is", "a" ], [ "chicken", "sandwich" ] ] const better = scattered.flatMap( chunk => chunk.split( " " ) ); console.log( better ); // [ "my", "favorite", "hamburger", "is", "a", "chicken", "sandwich" ]
其他ES2019候選特性
這些是當前的Stage 3候選特性:
- globalThis
- 動態import()
- 遺留的RegExp特性 features
- import.meta
- String的matchAll()方法
- Object.fromEntries()
- 規範JSON.stringify
- 標準化命令列程式的Hashbang
ES2019什麼時候釋出?
過去幾年,TC39通常在6月份釋出ECMAScript標準。因此,ES2019很可能也會在今年6月份釋出。
如何試用ES2019特性?
其實有些特性其實JS引擎已經支援了,我們只需要配置一下就好了。
使用Node.js 11
Node.js使用V8引擎,而V8引擎已經支援了一些最新的特性,例如Array.prototype.flat和String.prototype.trimEnd,因此使用最新版的Node.js,即Node.js 11即可試用這些特性。
我使用的Node.js版本為11.8.0:
node -v v11.8.0
如果要啟用某個特性,可以使用node命令的 --harmony-{feature-flag}
選項。使用 --v8-options
,則可以檢視node命令的所有選項,一些實驗性的特性被標記為”in progress”。
macOS / Linux
node --v8-options | grep "in progress" --harmony-do-expressions (enable "harmony do-expressions" (in progress)) --harmony-class-fields (enable "harmony fields in class literals" (in progress)) --harmony-static-fields (enable "harmony static fields in class literals" (in progress)) --harmony-await-optimization (enable "harmony await taking 1 tick" (in progress)) --harmony-locale (enable "Intl.Locale" (in progress)) --harmony-intl-list-format (enable "Intl.ListFormat" (in progress)) --harmony-intl-relative-time-format (enable "Intl.RelativeTimeFormat" (in progress))
Windows
node --v8-options | find "in progress"
例如,當我們的Node.js程式碼index.js中的Class有靜態方法,則在執行的時候新增 --harmony-static-fields
選項即可:
node --harmony-class-fields --harmony-static-fields index.js
使用Babel 7.0 +
使用Babel,我們就可以使用最新的JavaScript語法了,因為它會對程式碼進行轉換以相容舊的瀏覽器。
Babel支援通過一些 外掛 來支援實驗性的JS特性。Babel所支援的ECMAScript特性提案可以檢視 babel/proposals 倉庫。
參考
- Learn JavaScript in 2019!
- The History (and Future) of Asynchronous JavaScript
- Build a Secure Node.js Application with JavaScript Async Await Using Hapi
- Use TypeScript to Build a Node API with Express
- Standard ECMA-262
關於Fundebug
Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線,Fundebug累計處理了9億+錯誤事件,付費客戶有Google、360、金山軟體、百姓網等眾多品牌企業。歡迎大家免費試用!