CODEWITHSUNDEEP
javascriptgoogle-chromeecmascript-5
jacky
jacky

Reputation: 679

How to detect ECMAscript version?

I want to see what ECMAscript version I'm using in my browser(e.g,chrome 59) ,because there is some difference between ECMAscript3 and ECMAscript5 when dealing with something RegExp stuff.
I've found the relevant information about this,but I can't find a specific answer about how to detect the ECMAscript version.
Thank's in advanced.

Upvotes: 26

Views: 43392

Answers (6)

Nandu Kalidindi
Nandu Kalidindi

Reputation: 6280

Maybe you can try to use some data structures that are specifically added in ES6 like Map, Set etc. This is to differentiate between ES5 and ES6 but you can look up for features that are added in ES5 which are not present in ES3 in your case?

try {
  var k = new Map();
  console.log("ES6 supported!!")
} catch(err) {
  console.log("ES6 not supported :(")
}

try {
  var k = new HashMap();
  console.log("ES100 supported!!")
} catch(err) {
  console.log("ES100 not supported :(")
}

Upvotes: 23

Infigon
Infigon

Reputation: 672

Here's an extended EcmaScript detector:

function getES() {
  var array = []
  if (!Array.isArray) {
    return 3
  } else if (!window.Promise) {
    return 5
  } else if (!array.includes) {
    return 6
  } else if (!"".padStart) {
    return 7
  } else if (!Promise.prototype.finally) {
    return 8
  } else if (!window.BigInt) {
    return 9
  } else if (!Promise.allSettled) {
    return 10
  } else if (!"".replaceAll) {
    return 11
  } else if (!array.at) {
    return 12
  } else if (!array.with) {
    return 13
  } else {
    return 14
  }
}

var ecmascript = getES()
var year = 1999
if (ecmascript !== 3) {
  year = ecmascript + 2009
}
console.log("Version " + ecmascript + ", Year " + year)

You may need to run this before using polyfills! Also be aware this might not work if polyfills are packaged in.

It just checks for a property that should exist in each version. However, I would only use this for maybe error logging, as you could just check for each feature.

Note that in special cases, a browser may actually have a high ES version but that specific feature just wasn't implemented. This shouldn't be too much of an issue though.

(ckhatton has the improved answer that should work for older versions; I have not tested this except in a shiny new browser.)

Note that window makes it only work in browsers, so maybe for the special case of NodeJS, try replacing it with global, or even older ones with GLOBAL. (This is not what the OP asked, so I'm not going into detail!)

Upvotes: 4

ckhatton
ckhatton

Reputation: 1572

Here is an extended ECMAScript detector (based off @Infigon's answer).

var ecmaScriptInfo = (function() {
                  // () => { is not allowed
  function getESEdition() {
    var array = [];
    switch (true) {
      case !Array.isArray:
        return 3;
      case !window.Promise:
        return 5;
      case !array.includes:
        return 6;
      case !''.padStart:
        return 7;
      case !Promise.prototype.finally:
        return 8;
      case !window.BigInt:
        return 9;
      case !Promise.allSettled:
        return 10;
      case !''.replaceAll:
        return 11;
      case !array.at:
        return 12;
      default:
        return 13;
    }
  }

  function getESYear(edition) {
    return {
      3: 1999,
      5: 2009
    }[edition] || (2009 + edition); // nullish coalescing (??) is not allowed
  }
  
  var edition = getESEdition();
  var year = getESYear(edition);

  return {
    edition: edition, // usually shortened [edition,]
    year: year,       // usually shortened [year,]
    text: 'Edition: '+ edition +' | Year: '+ year
       // `Edition: ${edition} | Year: ${year}` is not allowed
  }
})();

console.log(ecmaScriptInfo.edition);
console.log(ecmaScriptInfo.year);
console.log(ecmaScriptInfo.text);

The additions and changes are:

  • It adds a function closure to create private functions and variables.
  • It uses a switch for better performance.
  • It fixes the incorrect year for edition 5, by the use of an object literal, which was released 2009 (not 5 + 2009). A nullish coalescing would have been used, instead of an OR (||), but it did not exist in earlier editions.
  • It returns the values as an object that can be used however one wishes to. For example, console.log(ecmaScriptInfo.edition).

Note:

The Arrow Function Expression was introduced in edition 10 (2019); hence why a standard function call was used.

Nullish Coalescing was introduced in edition 11 (2020); hence why a logical OR (||) (logical disjunction) was used.

Object literal shared key and value shorthand came in later editions; hence why edition: edition was not shortened.

Template Literals was introduced in edition 9 (2018); hence why Edition: ${edition} | Year: ${year} was not used.

var was used instead of const as the constant might go outside of block-scope in older browsers [source]

Upvotes: 5

virender
virender

Reputation: 4647

ECMAScript support different object on each version. To detect the ECMAScript version we can check the object exits into a browser or not. If that object is identified that means ECMA Version supported into the browser.

Check the following link has a good example to detect ECMAScript Version.

https://www.devdiscuss.com/how-to-detect-the-ecmascript-version/

Upvotes: 1

themefield
themefield

Reputation: 4255

ECMAScript is an industry standard:

ECMAScript is a trademarked scripting-language specification standardized by Ecma International in ECMA-262 and ISO/IEC 16262. It was created to standardize JavaScript, so as to foster multiple independent implementations.

Javascript is a popular implementation, more or less:

JavaScript has remained the best-known implementation of ECMAScript since the standard was first published, with other well-known implementations including JScript and ActionScript. wikipedia

Considering the current status of JavaScript implementations in various browsers, node.js etc, no one is specifically versioning themselves but keeps evolving with new features. So the best way is to detect, possibly with 3rd party libs, if the feature wanted exists and then use. Otherwise fall back to a more traditional one. Normally it's to try some operations and then check if as expected, no magic.

Upvotes: 7

Niklas Higi
Niklas Higi

Reputation: 2309

I don't think that's possible because browsers normally don't implement all features of an ECMAScript version at once. That's why we have libraries like Modernizr and websites like Can I use ... to find out what features can be used.

You could still build a little test that determines how RegEx in the user's browser version behaves.

Upvotes: 10

Related Questions