es6-feature-detection.js

var str = 'class ಠ_ಠ extends Array {constructor(j = "a", ...c) {const q = (({u: e}) => {return { [`s${c}`]: Symbol(j) };})({});super(j, q, ...c);}}' + 
          'new Promise((f) => {const a = function* (){return "\u{20BB7}".match(/./u)[0].length === 2 || true;};for (let vre of a()) {' +
          'const [uw, as, he, re] = [new Set(), new WeakSet(), new Map(), new WeakMap()];break;}f(new Proxy({}, {get: (han, h) => h in han ? han[h] ' + 
          ': "42".repeat(0o10)}));}).then(bi => new ಠ_ಠ(bi.rd));';

try {
  eval(str);
} catch(e) {
  alert('Your browser does not support ES6!')
}

/* 
 * All credits to Netflix for providing this approach to ES6 feature detection. Although this could be written in many different ways
 * this proved to be the most direct and elegant approach for me.
 * License: MIT
*/

If you've got a decent CSP then eval() won't work. And unfortunately, eval() is the only way to safely test for syntax support. However, global APIs such as WeakMap can be safely tested without using eval().

There is another way also, using 2 script tags

Maybe useful

Here's something i put together for "good-enough" client-side feature detection using OP's pattern and comments in this gist.
This checks support for:

• ES6
• WebGL
• base64 btoa
• navigator.storage.estimate

.. (but wait there's more) :D

• does not use eval
• no extra script tag needed
• works well with CSP

function playsNice(cb)
{
   var x='(function(){class ಠ extends Array{constructor(j=`a`,...c){const q=(({u:e})=>{return {[`${c}`]:Symbol(j)};})({});'+
   'super(j,q,...c)}}new Promise(f=>{const a=function*(){return "\u{20BB7}".match(/./u)[0].length===2||!0};for (let z of a())'+
   '{const [x,y,w,k]=[new Set(),new WeakSet(),new Map(),new WeakMap()];break}f(new Proxy({},{get:(h,i)=>i in h ?h[i]:"j".repeat'+
   '(0o2)}))}).then(t=>new ಠ(t.d)); if(!navigator.storage||!navigator.storage.estimate){throw "!"}; let n=document.createElement'+
   '("canvas"); let g=(!!n.getContext?(n.getContext("webgl")||n.getContext("experimental-webgl")):null); if(!g||!(g instanceof '+
   'WebGLRenderingContext)){throw "!"}; if(btoa("jz\'")!=="anon"){throw "!"};})();';

   if(!window.addEventListener){cb(false)}; var n=document.createElement('script'); n.ondone=function(event,s)
   {
      s=this; if(s.done){window.removeEventListener('error',s.ondone,true); if(s.parentNode){s.parentNode.removeChild(s)}; return};
      this.done=1; cb(((event&&event.error)?false:true));
   };

   window.addEventListener('error',n.ondone,true); n.appendChild(document.createTextNode(x));
   document.head.appendChild(n); setTimeout(n.ondone,50);
};


playsNice(function(bool)
{
   console.log(bool);
});

How would https://gist.github.com/DaBs/89ccc2ffd1d435efdacff05248514f38#gistcomment-2626592 work unless CSP script-src 'unsafe-inline' is added?

Found an issue. Need to replace

\u{20BB7}

With

\\u{20BB7}

Otherwise that is parsed outside of the eval and it will cause failures with things like UglifyJS that expects ES5

Found an issue. Need to replace

\u{20BB7}

With

\\u{20BB7}

Otherwise that is parsed outside of the eval and it will cause failures with things like UglifyJS that expects ES5

It also rises a parse error in IE 11 Expected hexadecimal digit, and thus fails its purpose.