【JavaScript 簡史】什麼是 ES5、ES6？網頁開發與 ECMAScript 的小故事

在一開始學習前端開發的時候，一直遇到講師在課程內容中提到 ES5、ES6 等關鍵字，當初的我，單純認為 ES5、ES6 是講述 JavaScript 的版本，所以在使用上就沒有想太多，反正就是 JavaScript 1.0 、2.0 的感覺吧？

殊不知等到想更精進自己技術時，才發現自己對於 JavaScript 這門程式語言的特性很不了解，導致在使用時總會有不順手的地方，此時，我才意會到「了解某項技術會問世」的原因非常重要。

比起聽到某一個技術很潮、很酷，而想要跟風使用，不如多花時間了解某項技術是為了解決什麼問題才出現，才能在對的時間用最快速、最有效率的辦法解決問題。

如果你目前也正在嘗試讓自己的 JavaScript 進步，那多了解 JavaScript 的歷史，會是一個非常好的起手式，那麼就讓我們開始吧！

在開始了解 JavaScript 與網頁瀏覽器的愛恨糾葛前，我們首先要先認知到一件事：現在的 JavaScript 一定跟最一開始發展起來的模樣有所落差，落差的程度不只一點點，甚至差距非常多！

我們現在常使用的 Chrome DevTools、框架，甚至常見的 library 都不是只有一個公司、一個團隊所完成的。

就像先前所說到，在軟體開發的領域中，往往不是新技術出現後，才有人去使用，或者是在某一段時間突然出現新框架、新技術，開發者們就馬上拿來用，更多時候是由遇到某個問題的開發者，為了解決當前的困擾，而創造出新的技術，再根據這個技術延伸出技術社群。

同理，當社群中有人遇到了新的問題，此時又會有相對應的新技術產生。

JavaScript 也是在這樣的狀況下誕生的，那 JavaScript 究竟是要解決什麼問題呢？這件事要從網路技術的誕生開始說起。

在 1960 年代，網路作為美軍的通訊技術誕生，一直到 1990 年代中旬，才在美國被廣泛使用在商業上，而我們現今常用的網路瀏覽器，正式在當時的時空背景下誕生的。

在 1993 年時，美國 NCSA （國家超級電腦應用中心）發表了 Mosaic ，作為最早普遍流行的圖形化瀏覽器，Mosaic 支援多種網路協定。

由於 Mosaic 的興起，在 1994 年時 Mosaic 的主要開發人員自立門戶，創立了 Netscape 公司，並後續開發了 NetScape Navigator 瀏覽器，也就是現今眾多瀏覽器的前身。

於是在這樣瀏覽器蓬勃發展的時空背景下，為了可以讓網頁有更多種呈現方式，譬如插入圖片等需求，HTML 作為標記語言在 1993 年誕生了。

然而在最初，開發人員都需要仰賴 SSR （伺服器端渲染）的方式進行網頁資訊的渲染及驗證，簡單來說就是，當使用者在網頁上修改了什麼資訊，需要直接傳送到伺服器端進行檢查。

萬一有錯字、格式錯誤怎麼辦呢？那就在從伺服器端把資料丟回給使用者囉！

於是為了讓網頁可以在資料傳送到伺服器端前進行簡單的驗證，NetScape 更是在 1995 年時，由公司的一名職員 Brendan Eich ，在短短十天內開發出一款能在網頁上執行的語言，沒錯！這個語言就是 JavaScript 啦（當時並不是叫 JavaScript ）！

現在你知道 JavaScript 是要解決什麼問題了吧？

但僅僅了解 JavaScript 的前世今生，其實還不足以解釋 ES5、ES6 到底什麼東西，為什麼對初學者來說這麼重要？讓我們繼續說完剛剛沒有說完的故事！

相信各位現在多多少少都聽過鼎鼎大名的 IE （Internet Explorer），但是卻沒有聽過所謂的 NetScape Navigator 吧？其實我也是在進入網頁開發領域後，才發現其實網頁瀏覽器百百種，不是只有 Google Chrome、Edge、Safari 及 IE 等。

1995 年時，不僅僅是 NetScape，微軟也加入了瀏覽器實作的戰場，微軟針對 NetScape Navigator 進行逆向工程，並根據 JavaScript 實作了一套 JScript，甚至自己額外加了一些功能，導致有些網頁在不同的瀏覽器上會有不同顯示效果，甚至根本無法顯示。

於是 JavaScript 徹底失去了標準化的規範，假設每個廠商都為了爭取市場佔有率，而開發出各式各樣獨特的語法、功能，那最後倒霉的不就是使用者自己嗎？

這樣的行為並沒有解決當前使用者使用網頁效率的問題，反而產生了更多問題。

於是在 1996 年時，NetScape 向 ECMA（歐洲計算機製造商協會）提出標準化語言標準，並於隔年實現 ECMA-262 標準，再之後，就是我們所知道的每個 ECMA 標準了：

在上圖中，ECMA 會提出一些對於 JavaScript 實作的規範，而這些規範可能會被瀏覽器實作（也就是有被這個這個瀏覽器支援），也有可能不會。

所謂的 ES5 以前，就是泛指 2011 年前所被實作的 JavaScript， 而 ES6 則是指 ECMAScript 2015，在這個版本中，一次性的規範：let、const、arrow function、Promise、Symbol、class 等概念，讓開發上更加嚴謹，而詳細的實作細節可以參考 W3C 文件。

當然後續的 ES7、ES8 的相關規範，大家也都可以在網路上找到相關的知識。

現在大家知道為什麼在職缺上，會有「需要 ES6+ JavaScript 技能」的相關技能描述了吧！

這裡眼尖的朋友們可能會想，即便 JavaScript 被標準化了，不同的版本依然有可能同時存在，那瀏覽器之間是否有向下、向上相容的狀況呢？那又是另外一個議題了。

相信透過這篇文章，大家可以更加了解何謂 ECMAScript 及 JavaScript 版本間的差異，關於網頁開發你有沒有什麼問題想要跟我分享的呢？歡迎你在下方留言與我分享。

希望今天的文章有幫助到正在閱讀的你，如果你喜歡我的文章的話，可以留下你的愛心或是收藏我的文章，也或者可以點選「贊助」，你的一杯咖啡絕對是我持續寫下去的動力！或是透過拍拍手，用你小小的行動支持我的創作！

我是Vivian，我們下次見。

關於我：

一名從英文系畢業的前端工程師，喜歡閱讀、寫東西及自我成長。

｜Instagram: Vivian Yeh｜vivian_enlife

｜聯絡我：vivian.enlife@gmail.com