Summary of data type detection methods in JavaScript

This article describes the method of detecting data type in JavaScript. If you don’t know the method of detecting data type in JavaScript or you are not familiar with the method of detecting data type in JavaScript, If you are interested in the method, then let’s take a look at this article. Okay, let’s stop talking and get to the point!

Before that, let’s talk about the types of js. js has 5 basic types and one complex type
5 basic types: undefined, null, number, string, bollean
A complex type: object

1.typeof

Return value type: string

is detected as follows:

                      /*5大基本类型*/

var a = 123;
console.log(typeof a == "number");      //true

var a = '123';
console.log(typeof a == "string");      //true

var a = true;
console.log(typeof a == "boolean");     //true

var a = undefined;
console.log(typeof a == "undefined");   //true

var a = null;
console.log(a == null);                 //true

            /*复杂类型*/

var a = function(){};
console.log(typeof a == "function");    //true

For other reference type objects, typeof cannot detect and distinguish, and will return Object, such as date type, Regular expression type, etc., so we cannot distinguish what is detected (using Other methods are detected below)

typeof method function encapsulation

function typeOf(obj){
    return (obj === 'null') ? 'null' : (typeof obj)
}

At the end, add a special NaN

console.log(typeof NaN === "number");       //true

2.instanceof

instanceof operator Can be used to detect whether an object is an instance of another object

Syntax: object1 instanceof object2
Parameters: object1-an object, constructor-another object

Return value Type: Boolean value Boolean

How to understand the above abstract words?

In other words, the prototype object of the constructor object can be accessed through the prototype chain of the instance object. This is how instanceof works. This also shows that instanceof does not care about the object. The structure itself only cares about the relationship between objects and constructors.

var a = new Date();
console.log(a instanceof Date);         //true
console.log(a instanceof Object);       //true

var a = new RegExp('123');
console.log(a instanceof RegExp);       //true
console.log(a instanceof Object);       //true

var a = function(){};
console.log(a instanceof Function);     //true
console.log(a instanceof Object);       //true

var a = [];
console.log(a instanceof Array);        //true
console.log(a instanceof Object);       //true

var a = {};
console.log(a instanceof Object);       //true

Here I have listed the more commonly used examples. If you are really concerned about instanceof, click here for the MDN document

3. Constructor attribute

Constructor attribute return A reference to the constructor that created this object.

Return value type: Object

The point to note here is that we usually create, such as: var a = 1, var b = '123'..., In fact, they refer to their corresponding constructors to create their corresponding types, rather than directly creating them as we see on the surface.

The testing methods for each type are as follows:

         /*5大基本类型*/

var a = 123;
console.log(a.constructor == Number);   //true

var a = '123';
console.log(a.constructor == String);   //true

var a = true;
console.log(a.constructor == Boolean);  //true

var a = undefined;
console.log(a && a.constructor);        //undefined

var a = null;
console.log(a && a.constructor);        //null

            /*复杂类型*/

var a = function(){};
console.log(a.constructor == Function); //true

var a = new Date();
console.log(a.constructor == Date);     //true

var a = new Object();
console.log(a.constructor == Object);   //true
var a = {};
console.log(a.constructor == Object);   //true

var a = new Array();
console.log(a.constructor == Array);    //true
var a = [];
console.log(a.constructor == Array);    //true

var a = new RegExp('abc');
console.log(a.constructor == RegExp);   //true
var a = /^abc$/;
console.log(a.constructor == RegExp);   //true

4.toString() method

This method is the safest and most accurate way to detect the object type.

Return value type: String

/*toString 检测类型函数*/
function toStringType(obj){
    return Object.prototype.toString.call(obj).slice(8, -1);
}
            /*5大基本类型*/

var a = 123;
console.log(toStringType(a));       //"Number"

var a = '123';
console.log(toStringType(a));       //"String"

var a = true;
console.log(toStringType(a));       //"Boolean"

var a = undefined;
console.log(toStringType(a));       //"Undefined"

var a = null;
console.log(toStringType(a));       //"Null"

            /*复杂类型*/

var a = function(){};
console.log(toStringType(a));       //"Function"

var a = new Date();
console.log(toStringType(a));       //"Date"

var a = new Object();
console.log(toStringType(a));       //"Object"
var a = {};
console.log(toStringType(a));       //"Object"

var a = new Array();
console.log(toStringType(a));       //"Array"
var a = [];
console.log(toStringType(a));       //"Array"

var a = new RegExp('abc');
console.log(toStringType(a));       //"RegExp"
var a = /^abc$/;
console.log(toStringType(a));       //"RegExp"

If you think the case of the returned string is troublesome, you can convert it all to lowercase

The code is as follows:

function toStringType(obj){
    return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
}

When you reach this place, you may have doubts.

var a = 123;
console.log(a.toString()); //"123"

1. Why is "123" returned when written like this?
Answer: Because each object in js has its own toString method predefined, which is similar to rewriting toString

2. Why is the call method used in the article? What is the function?
Answer: The function of call is to change the scope to the current scope. Taking the article as an example, it changes the scope execution environment of Object to a.

3. What is the role of slice?

var a = 123;
console.log(Object.prototype.toString.call(a));  //"[Object Number]"

Through this example, you will understand the comparison, it is for the intuitiveness of the results.

The above is all the content of this article. If you don’t know much about it, you can easily master both sides by yourself!

Related recommendations:

Detailed explanation of PHP data type detection examples

In JavaScript Summary of data type detection methods

The above is the detailed content of Summary of data type detection methods in JavaScript. For more information, please follow other related articles on the PHP Chinese website!