ES6 的功能偵測庫 ES-Checker

阮一峰發表於2015-06-30

兩週前，《ECMAScript國際標準（第6版）》正式透過，下一代 JavaScript 語言定案。

ECMAScript 6（以下簡稱 ES6）總共新增了20多項重大的語言特性。各種瀏覽器和 Node.js 都積極支援，但還有不少功能沒實現。

上個週末，我讀到了 Kyle Simpson 的文章《ES6: Features By Testing》，發現他開發了一組測試，可以偵測執行環境支援哪些 ES6 的功能。

我就在他的基礎上 ，寫了功能偵測庫 ES-Checker ，用於檢視 ES6 的支援情況。

今天，我把這個庫提交到 Hacker News，結果居然進入了首頁！雖然，名次不高，上榜時間也不長，但也算實現了一個人生願望。

請看Demo，你的瀏覽器支援多少 ES6？

ES-Checker 可用於多種環境。

（1）命令列環境


$ npm install -g es-checker
$ es-checker

（2）Node環境

將 ES-Checker 安裝在專案的根目錄。


$ npm install es-checker

就可以在指令碼中引用 ES-Checker 了。


var Supports = require("es-checker");

if (Supports.letConst) {
  let x = 5;
} else {
  var x = 5;
}

Supports 物件的屬性清單，請見後文。

（3）瀏覽器環境

將 es-checker.js 插入頁面。


<script src="http://ruanyf.github.io/es-checker/es-checker.js"></script>

然後在指令碼中使用 Supports 物件，決定哪些功能可以使用。


<script>
if (Supports.letConst) {
  let x = 5;
} else {
  var x = 5;
}
</script>

附：Supports 的屬性清單

  • letConst: let 和 const 命令
  • defaultParameter: 函式的預設引數
  • spreadRest: 擴充套件（...）運算子
  • destructuring: 解構賦值
  • parameterDestructuring: 函式引數的解構
  • templateString: 模板字串
  • forOf: for...of迴圈
  • arrow: 箭頭函式
  • generator: generator函式
  • conciseMethodProperty: 物件屬性的簡潔表示法
  • computedProperty: 物件屬性名使用表示式
  • moduleExport: 模組的export命令
  • moduleImport: 模板的import命令
  • numericLiteral: 數值的八進位制和二進位制表示法
  • oldOctalLiteral: 八進位制的字首零表示法
  • symbol: Symbol型別
  • unicodeEscape: Unicode字元的大括號表示法
  • unicodeIdentifier: Unicode字元是否可用作標識名
  • unicodeRegExp: 正規表示式的u修飾符
  • stickyRegExp: 正規表示式的y修飾符
  • class: 類（class）
  • letTDZ: let命令的暫時性死區
  • constRedef: 不允許再次用const宣告同一變數
  • objectProto: 物件的proto屬性
  • objectSuper: 物件方法是否可以使用super
  • extendNatives: 原生型別的擴充套件
  • tco: 尾呼叫最佳化
  • symbolImplicitCoercion: Symbol值不能用於運算
  • functionNameInference: 匿名函式的name屬性推斷函式名
  • objectStatics: Object的靜態方法
  • arrayStatics: 陣列的靜態方法
  • arrayMethods: 陣列的例項方法
  • typedArrays: 型別化陣列
  • typedArrayStatics: 型別化陣列的靜態方法
  • typedArrayMethods: 型別化陣列的例項方法
  • stringMethods: 字串的例項方法
  • numberStatics: Number物件的靜態方法
  • mathStatics: Math物件的靜態方法
  • collections: Map, Set, WeakMap, WeakSet
  • proxy: Proxy物件
  • promise: Promise物件

（完）

相關文章