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

更新於 發佈於 閱讀時間約 7 分鐘

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

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

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

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



關於 Modern JavaScript

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

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

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

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

JavaScript 也是在這樣的狀況下誕生的,那 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

但僅僅了解 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 標準了:

raw-image

在上圖中,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

留言
avatar-img
留言分享你的想法!
avatar-img
Vivian Yeh - 跨領域轉職的軟體工程師
453會員
103內容數
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶,不用腳踩十公分、連妝都可以不用化的職場人生,文組少女毅然決然踏上RD的養成日常。
2024/05/23
與 cookie 相比,localStorage 與 sessionStorage 的機制相對單純,兩者皆是瀏覽器中的儲存空間,與 cookie 最大的不同在於:localStorage 與 ⋯⋯
Thumbnail
2024/05/23
與 cookie 相比,localStorage 與 sessionStorage 的機制相對單純,兩者皆是瀏覽器中的儲存空間,與 cookie 最大的不同在於:localStorage 與 ⋯⋯
Thumbnail
2024/05/22
在瀏覽器環境中有許多的儲存空間,想要查看這些空間的話,可以透過「chrome > Dev Tools > Application > Storage」即能進行查看。 瀏覽器內存空間的差異不僅常常被拿來被當作面試考題,在實務開發中更扮演舉足輕重的角色,今天就想透過這系列的文章深度了解這些瀏覽器內存⋯
Thumbnail
2024/05/22
在瀏覽器環境中有許多的儲存空間,想要查看這些空間的話,可以透過「chrome > Dev Tools > Application > Storage」即能進行查看。 瀏覽器內存空間的差異不僅常常被拿來被當作面試考題,在實務開發中更扮演舉足輕重的角色,今天就想透過這系列的文章深度了解這些瀏覽器內存⋯
Thumbnail
2024/02/20
上一篇文章分享了 TypeScript 的定義、前端角色定位,如果你不是很確定「TypeScript 是什麼?」、「TypeScript 作為 JavaScript 的超集,在網頁開發扮演怎麼樣的角色?」這兩個問題的答案,建議可以回到上一篇先了解一下。
Thumbnail
2024/02/20
上一篇文章分享了 TypeScript 的定義、前端角色定位,如果你不是很確定「TypeScript 是什麼?」、「TypeScript 作為 JavaScript 的超集,在網頁開發扮演怎麼樣的角色?」這兩個問題的答案,建議可以回到上一篇先了解一下。
Thumbnail
看更多
你可能也想看
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
JavaScript (簡稱 JS) 是具有一級函數的輕量級、直譯式或即時編譯的程式語言。它因為用作網頁的腳本語言而大為知名,但也用於許多非瀏覽器的環境,像是 Node.js 等。由於 JavaScript 語法上的一些缺點,軟體工程師們又設計出了 CoffeeScript、TypeScript 和
Thumbnail
JavaScript (簡稱 JS) 是具有一級函數的輕量級、直譯式或即時編譯的程式語言。它因為用作網頁的腳本語言而大為知名,但也用於許多非瀏覽器的環境,像是 Node.js 等。由於 JavaScript 語法上的一些缺點,軟體工程師們又設計出了 CoffeeScript、TypeScript 和
Thumbnail
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言,應用範圍廣泛,包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
Thumbnail
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言,應用範圍廣泛,包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
Thumbnail
如果你曾經撰寫過網頁,那你一定接觸過 JavaScript 無論是在 NodeJs 或是瀏覽器中運行。 但你有沒有想過,我們寫下的 JS 程式碼,這些看似單純的英文和符號,是如何被轉化為機器能夠理解和執行的程式呢? 今天,讓我們一起深入了解其中的核心主角 ——Google 開發的開源 Java
Thumbnail
如果你曾經撰寫過網頁,那你一定接觸過 JavaScript 無論是在 NodeJs 或是瀏覽器中運行。 但你有沒有想過,我們寫下的 JS 程式碼,這些看似單純的英文和符號,是如何被轉化為機器能夠理解和執行的程式呢? 今天,讓我們一起深入了解其中的核心主角 ——Google 開發的開源 Java
Thumbnail
在剛開始寫 JavaScript 可能大多數的人不會特別意識到 JavaScript 的型別系統有什麼特別之處,我是在看完 Youtube 上 CS50 的課程,才理解到在不同的程式語言中,會因為語言的特性而有不同的系統,JavaScript 就是偏向比較特別的那一種。
Thumbnail
在剛開始寫 JavaScript 可能大多數的人不會特別意識到 JavaScript 的型別系統有什麼特別之處,我是在看完 Youtube 上 CS50 的課程,才理解到在不同的程式語言中,會因為語言的特性而有不同的系統,JavaScript 就是偏向比較特別的那一種。
Thumbnail
在進入到 React 前端框架之前,幫讀者複習有關 JavaScript 的知識。此篇著重,JavaScript 的歷史、let & const & var 差異、樣板字面值( Template Literals )、箭頭函式( Arrow Function )JS ES6 一個非常重要的前置知識。
Thumbnail
在進入到 React 前端框架之前,幫讀者複習有關 JavaScript 的知識。此篇著重,JavaScript 的歷史、let & const & var 差異、樣板字面值( Template Literals )、箭頭函式( Arrow Function )JS ES6 一個非常重要的前置知識。
Thumbnail
JavaScript 中的 ESM(ES Modules)和 CJS(CommonJS)是用於模塊化開發的兩種不同的模組系統。 關於CJS CJS 是 CommonJS 的模塊系統,最初是為了在伺服器端使用的 Node.js 開發而設計的,但也被廣泛用於前端開發。CJS 使用 require 函數來
Thumbnail
JavaScript 中的 ESM(ES Modules)和 CJS(CommonJS)是用於模塊化開發的兩種不同的模組系統。 關於CJS CJS 是 CommonJS 的模塊系統,最初是為了在伺服器端使用的 Node.js 開發而設計的,但也被廣泛用於前端開發。CJS 使用 require 函數來
Thumbnail
JavaScript 的關鍵價值 JavaScript 是一種強大且廣泛使用的編程語言,具有許多價值和應用。以下整理 JavaScript 的關鍵價值: 客戶端網頁開發、跨平台開發: JavaScript 是種瀏覽器的語言,可實現動態網頁效果,並通過操作 HTML 和 CSS,使網頁互動性提昇,提供
Thumbnail
JavaScript 的關鍵價值 JavaScript 是一種強大且廣泛使用的編程語言,具有許多價值和應用。以下整理 JavaScript 的關鍵價值: 客戶端網頁開發、跨平台開發: JavaScript 是種瀏覽器的語言,可實現動態網頁效果,並通過操作 HTML 和 CSS,使網頁互動性提昇,提供
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News