<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>JavaScript `is` Helper Function</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>JavaScript `is` Helper Function</h1>
<p>`is` can be used with every object and allows you to get its class as String. This is more consistend as the use of the JavaScript `typeof` function and allows better detection of native classes.</p>
<p>@license MIT</p>
<p>See <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString#Using_toString_to_detect_object_type">Using toString() to detect object class</a> for more details, or take a look to the code.</p>
<h2>Here are some comparisation asserts between <a href="#typeof">typeof</a> and <a href="#is">is</a>:</h2>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/0x04/javascript-is-helper-function-GpltB */
body
{
padding: 10px;
background: linear-gradient(
45deg,
#333 25%,
#222 25%,
#222 50%,
#222 50%,
#333 50%,
#333 75%,
#222 75%
);
background-size: 64px 64px;
font-family: monospace;
font-weight: bold;
color: #fff;
}
a
{
color: #fff;
}
.assert
{
padding: 20px;
margin-bottom: 5px;
border-radius: 8px;
}
.assert-success
{
background-color: #393;
border-left: 20px solid #363;
}
.assert-fail
{
background-color: #933;
border-left: 20px solid #633;
}
/*Downloaded from https://www.codeseek.co/0x04/javascript-is-helper-function-GpltB */
//------------------------------------------------------------------------------
//
// @section Definition of `is` helper function
//
//------------------------------------------------------------------------------
/**
* Returns the internal class name of the given object.
* @see {Using toString() to detect object class|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString#Using_toString_to_detect_object_type}
* @param {*} value
* @return {String} 'Array', 'Boolean', 'Date', 'Number', 'Object' etc.
*/
function is(value)
{
var string = Object.prototype.toString.call(value);
// `string` contains something like "[object Object]"
// so extract the interessting part: ^^^^^^.
// Quite simple :-)
return string.substring(8, string.length - 1);
}
//------------------------------------------------------------------------------
//
// @section Demo
//
//------------------------------------------------------------------------------
var asserts = document.createElement('div');
asserts.classList.add('asserts');
document.body.appendChild(asserts);
function createAssertElement(text, result)
{
var assert = document.createElement('div');
assert.classList.add('assert', result ? 'assert-success' : 'assert-fail');
assert.innerHTML = text;
return assert;
}
function assert(text, result)
{
asserts.appendChild(createAssertElement(text, result));
}
header = document.createElement('h3');
header.textContent = 'typeof ...';
header.id = 'typeof';
asserts.appendChild(header);
assert('typeof true == "boolean"', typeof true == "boolean");
assert('typeof [ 1, 2, 3 ] == "array"', typeof [ 1, 2, 3 ] == "array");
assert('typeof tfunction(){}rue == "boolean"', typeof function(){} == "function");
assert('typeof new Date() == "date"', typeof new Date() == "date");
assert('typeof 0x133700 == "number"', typeof 0x133700 == "number");
assert('typeof { a: 1 } == "object"', typeof { a: 1 } == "object");
assert('typeof /test/ == "regexp"', typeof /test/ == "regexp");
assert('typeof "foobar" == "string"', typeof "foobar" == "string");
assert('typeof new function(){} == "object"', typeof new function(){} == "object");
assert('typeof document == "htmldocument"', typeof document == "htmldocument");
header = document.createElement('h3');
header.textContent = 'is(...)';
header.id = 'is';
asserts.appendChild(header);
assert('is(true) == "Boolean"', is(true) == "Boolean");
assert('is([ 1, 2, 3 ]) == "Array"', is([ 1, 2, 3 ]) == "Array");
assert('is(function(){}) == "Function"', is(function(){}) == "Function");
assert('is(new Date()) == "Date"', is(new Date()) == "Date");
assert('is(0x133700) == "Number"', is(0x133700) == "Number");
assert('is({ a: 1 }) == "Object"', is({ a: 1 }) == "Object");
assert('is(/test/) == "RegExp"', is(/test/) == "RegExp");
assert('is("foobar") == "String"', is("foobar") == "String");
assert('is(new function(){}) == "Object"', is(new function(){}) == "Object");
assert('is(document) == "HTMLDocument"', is(document) == "HTMLDocument");
// and so on.