การค้นหาประเภทตัวแปรใน JavaScript


146

ใน Java คุณสามารถใช้instanceOfหรือgetClass()ตัวแปรเพื่อค้นหาชนิดของมัน

ฉันจะค้นหาประเภทของตัวแปรใน JavaScript ที่ไม่ได้พิมพ์อย่างรุนแรงได้อย่างไร

ตัวอย่างเช่นฉันจะทราบได้อย่างไรว่าbarเป็นBooleanหรือNumberหรือString?

function foo(bar) {
    // what do I do here?
}

ดูเพิ่มเติมได้ที่: stackoverflow.com/questions/24318654
dreftymac

คำตอบ:


242

ใช้typeof:

> typeof "foo"
"string"
> typeof true
"boolean"
> typeof 42
"number"

ดังนั้นคุณสามารถทำได้:

if(typeof bar === 'number') {
   //whatever
}

ระวังแม้ว่าคุณจะกำหนดคำสั่งดั้งเดิมเหล่านี้ด้วยตัวห่อวัตถุ (ซึ่งคุณไม่ควรทำให้ใช้ตัวอักษรหากเป็นไปได้):

> typeof new Boolean(false)
"object"
> typeof new String("foo")
"object"
> typeof new Number(42)
"object"

ประเภทของอาร์เรย์ยังคงobjectอยู่ ที่นี่คุณต้องการinstanceofผู้ประกอบการจริงๆ

ปรับปรุง:

อีกวิธีที่น่าสนใจคือการตรวจสอบผลลัพธ์ของObject.prototype.toString:

> Object.prototype.toString.call([1,2,3])
"[object Array]"
> Object.prototype.toString.call("foo bar")
"[object String]"
> Object.prototype.toString.call(45)
"[object Number]"
> Object.prototype.toString.call(false)
"[object Boolean]"
> Object.prototype.toString.call(new String("foo bar"))
"[object String]"
> Object.prototype.toString.call(null)
"[object Null]"
> Object.prototype.toString.call(/123/)
"[object RegExp]"
> Object.prototype.toString.call(undefined)
"[object Undefined]"

เมื่อคุณไม่ต้องแยกความแตกต่างระหว่างค่าดั้งเดิมและวัตถุ


สิ่งที่จะเป็นข้อเสียของการใช้proto .constructor.name ฟังก์ชัน siple จะเป็น: function getVariableType (object) {return (object .__ proto__.constructor.name); }
Stu

อัปเดตเป็นคำจำกัดความของฟังก์ชั่น i ด้านบน: function getVariableType (object) {return (object === undefined? "Undefined": object.__proto__.constructor.name);
Stu

29

typeof นั้นดีสำหรับการส่งคืนชนิด "ดั้งเดิม" เช่นตัวเลขบูลีนวัตถุสตริงและสัญลักษณ์ นอกจากนี้คุณยังสามารถใช้instanceofเพื่อทดสอบว่าวัตถุชนิดใดชนิดหนึ่ง

function MyObj(prop) {
  this.prop = prop;
}

var obj = new MyObj(10);

console.log(obj instanceof MyObj && obj instanceof Object); // outputs true

23

การใช้type:

// Numbers
typeof 37                === 'number';
typeof 3.14              === 'number';
typeof Math.LN2          === 'number';
typeof Infinity          === 'number';
typeof NaN               === 'number'; // Despite being "Not-A-Number"
typeof Number(1)         === 'number'; // but never use this form!

// Strings
typeof ""                === 'string';
typeof "bla"             === 'string';
typeof (typeof 1)        === 'string'; // typeof always return a string
typeof String("abc")     === 'string'; // but never use this form!

// Booleans
typeof true              === 'boolean';
typeof false             === 'boolean';
typeof Boolean(true)     === 'boolean'; // but never use this form!

// Undefined
typeof undefined         === 'undefined';
typeof blabla            === 'undefined'; // an undefined variable

// Objects
typeof {a:1}             === 'object';
typeof [1, 2, 4]         === 'object'; // use Array.isArray or Object.prototype.toString.call to differentiate regular objects from arrays
typeof new Date()        === 'object';
typeof new Boolean(true) === 'object'; // this is confusing. Don't use!
typeof new Number(1)     === 'object'; // this is confusing. Don't use!
typeof new String("abc") === 'object';  // this is confusing. Don't use!

// Functions
typeof function(){}      === 'function';
typeof Math.sin          === 'function';

ไม่มีปัญหากับการใช้Number(1), Boolean(true)...งานปัญหาที่เกิดขึ้นก็ต่อเมื่อคุณใช้งานnewและมีการสร้างออบเจ็กต์แบบกล่องโดยใช้เนื่องจากฟังก์ชั่นสามารถแปลงให้เป็นประโยชน์จากประเภทอื่นได้ Boolean(0) === false, Number(true) === 1
Juan Mendes

แล้วnullไงล่ะ typeof nullคือ 'object'
Dheeraj

15

ใน Javascript คุณสามารถทำได้โดยใช้ฟังก์ชัน typeof

function foo(bar){
  alert(typeof(bar));
}

3
เช่นเดียวกับที่ฉันกล่าวถึงในคำตอบของฉัน typof จะส่งกลับเฉพาะจำนวนบูลีนวัตถุสตริง ไม่มีประโยชน์สำหรับการพิจารณาประเภทอื่น ๆ เช่น Array, RegExp หรือประเภทที่กำหนดเอง
Juan Mendes

7

หากต้องการ ECMAScript-5.1- แม่นยำกว่าคำตอบอื่น ๆ เล็กน้อย (บางคนอาจพูดว่าอวดรู้):

ใน JavaScript ตัวแปร (และคุณสมบัติ) ไม่มีประเภท: ค่ามี นอกจากนี้ยังมีค่าเพียง 6 ประเภท: ไม่ได้กำหนด, Null, Boolean, String, Number, และ Object (โดยทางเทคนิคแล้วยังมี 7 "ประเภทข้อมูลจำเพาะ" แต่คุณไม่สามารถจัดเก็บค่าของประเภทเหล่านั้นเป็นคุณสมบัติของวัตถุหรือค่าของตัวแปร - พวกเขาจะใช้เฉพาะภายในสเป็คเองเพื่อกำหนดวิธีการทำงานของภาษาค่า คุณสามารถจัดการได้อย่างชัดเจนมีเพียง 6 ประเภทที่ฉันระบุไว้)

ข้อมูลจำเพาะใช้สัญกรณ์ "Type (x)" เมื่อต้องการพูดคุยเกี่ยวกับ "ชนิดของ x" นี่เป็นเพียงสัญกรณ์ที่ใช้ภายในสเป็ค: ไม่ใช่คุณสมบัติของภาษา

เป็นคำตอบอื่น ๆ ที่ชัดเจนในทางปฏิบัติคุณอาจต้องการทราบมากกว่าประเภทของค่า - โดยเฉพาะเมื่อประเภทเป็นวัตถุ โดยไม่คำนึงถึงและเพื่อความสมบูรณ์นี่คือการใช้ JavaScript อย่างง่ายของ Type (x) ตามที่ใช้ในข้อกำหนด:

function Type(x) { 
    if (x === null) {
        return 'Null';
    }

    switch (typeof x) {
    case 'undefined': return 'Undefined';
    case 'boolean'  : return 'Boolean';
    case 'number'   : return 'Number';
    case 'string'   : return 'String';
    default         : return 'Object';
    }
}

นอกจากนี้ยังมีสัญลักษณ์ต่างๆ
Juan Mendes

ไม่ใช่ใน ECMAScript 5.1 ไม่มี
Wes

6

ฉันพบว่ามันน่าผิดหวังที่typeofมี จำกัด นี่คือรุ่นที่ได้รับการปรับปรุง:

var realtypeof = function (obj) {
    switch (typeof(obj)) {
        // object prototypes
        case 'object':
            if (obj instanceof Array)
                return '[object Array]';
            if (obj instanceof Date)
                return '[object Date]';
            if (obj instanceof RegExp)
                return '[object regexp]';
            if (obj instanceof String)
                return '[object String]';
            if (obj instanceof Number)
                return '[object Number]';

            return 'object';
        // object literals
        default:
            return typeof(obj);
    }   
};

ทดสอบตัวอย่าง:

realtypeof( '' ) // "string"
realtypeof( new String('') ) // "[object String]"
Object.prototype.toString.call("foo bar") //"[object String]" 

3

สำหรับชนิด JS ในตัวคุณสามารถใช้:

function getTypeName(val) {
    return {}.toString.call(val).slice(8, -1);
}

ที่นี่เราใช้วิธีการ 'toString' จากคลาส 'วัตถุ' ซึ่งทำงานแตกต่างจากวิธีการเดียวกันของประเภทอื่น

ตัวอย่าง:

// Primitives
getTypeName(42);        // "Number"
getTypeName("hi");      // "String"
getTypeName(true);      // "Boolean"
getTypeName(Symbol('s'))// "Symbol"
getTypeName(null);      // "Null"
getTypeName(undefined); // "Undefined"

// Non-primitives
getTypeName({});            // "Object"
getTypeName([]);            // "Array"
getTypeName(new Date);      // "Date"
getTypeName(function() {}); // "Function"
getTypeName(/a/);           // "RegExp"
getTypeName(new Error);     // "Error"

หากคุณต้องการชื่อชั้นคุณสามารถใช้:

instance.constructor.name

ตัวอย่าง:

({}).constructor.name       // "Object"
[].constructor.name         // "Array"
(new Date).constructor.name // "Date"

function MyClass() {}
let my = new MyClass();
my.constructor.name         // "MyClass"

แต่คุณลักษณะนี้ถูกบันทึกอยู่ในES2015


1

นี่คือทางออกที่สมบูรณ์

คุณยังสามารถใช้เป็นคลาสผู้ช่วยในโครงการของคุณ

"use strict";
/**
 * @description Util file
 * @author Tarandeep Singh
 * @created 2016-08-09
 */

window.Sys = {};

Sys = {
  isEmptyObject: function(val) {
    return this.isObject(val) && Object.keys(val).length;
  },
  /** This Returns Object Type */
  getType: function(val) {
    return Object.prototype.toString.call(val);
  },
  /** This Checks and Return if Object is Defined */
  isDefined: function(val) {
    return val !== void 0 || typeof val !== 'undefined';
  },
  /** Run a Map on an Array **/
  map: function(arr, fn) {
    var res = [],
      i = 0;
    for (; i < arr.length; ++i) {
      res.push(fn(arr[i], i));
    }
    arr = null;
    return res;
  },
  /** Checks and Return if the prop is Objects own Property */
  hasOwnProp: function(obj, val) {
    return Object.prototype.hasOwnProperty.call(obj, val);
  },
  /** Extend properties from extending Object to initial Object */
  extend: function(newObj, oldObj) {
    if (this.isDefined(newObj) && this.isDefined(oldObj)) {
      for (var prop in oldObj) {
        if (this.hasOwnProp(oldObj, prop)) {
          newObj[prop] = oldObj[prop];
        }
      }
      return newObj;
    } else {
      return newObj || oldObj || {};
    }
  }
};

// This Method will create Multiple functions in the Sys object that can be used to test type of
['Arguments', 'Function', 'String', 'Number', 'Date', 'RegExp', 'Object', 'Array', 'Undefined']
.forEach(
  function(name) {
    Sys['is' + name] = function(obj) {
      return toString.call(obj) == '[object ' + name + ']';
    };
  }
);
<h1>Use the Helper JavaScript Methods..</h1>
<code>use: if(Sys.isDefined(jQuery){console.log("O Yeah... !!");}</code>

สำหรับโมดูล CommonJs ที่ส่งออกได้หรือโมดูล RequireJS ....

"use strict";

/*** Helper Utils ***/

/**
 * @description Util file :: From Vault
 * @author Tarandeep Singh
 * @created 2016-08-09
 */

var Sys = {};

Sys = {
    isEmptyObject: function(val){
        return this.isObject(val) && Object.keys(val).length;
    },
    /** This Returns Object Type */
    getType: function(val){
        return Object.prototype.toString.call(val);
    },
    /** This Checks and Return if Object is Defined */
    isDefined: function(val){
        return val !== void 0 || typeof val !== 'undefined';
    },
    /** Run a Map on an Array **/
    map: function(arr,fn){
        var res = [], i=0;
        for( ; i<arr.length; ++i){
            res.push(fn(arr[i], i));
        }
        arr = null;
        return res;
    },
    /** Checks and Return if the prop is Objects own Property */
    hasOwnProp: function(obj, val){
        return Object.prototype.hasOwnProperty.call(obj, val);
    },
    /** Extend properties from extending Object to initial Object */
    extend: function(newObj, oldObj){
        if(this.isDefined(newObj) && this.isDefined(oldObj)){
            for(var prop in oldObj){
                if(this.hasOwnProp(oldObj, prop)){
                    newObj[prop] = oldObj[prop];
                }
            }
            return newObj;
        }else {
            return newObj || oldObj || {};
        }
    }
};

/**
 * This isn't Required but just makes WebStorm color Code Better :D
 * */
Sys.isObject
    = Sys.isArguments
    = Sys.isFunction
    = Sys.isString
    = Sys.isArray
    = Sys.isUndefined
    = Sys.isDate
    = Sys.isNumber
    = Sys.isRegExp
    = "";

/** This Method will create Multiple functions in the Sys object that can be used to test type of **/

['Arguments', 'Function', 'String', 'Number', 'Date', 'RegExp', 'Object', 'Array', 'Undefined']
    .forEach(
        function(name) {
            Sys['is' + name] = function(obj) {
                return toString.call(obj) == '[object ' + name + ']';
            };
        }
    );


module.exports = Sys;

ขณะนี้ใช้งานบน repo สาธารณะ git โครงการ Github

ตอนนี้คุณสามารถนำเข้ารหัส Sys นี้ในไฟล์ Sys.js จากนั้นคุณสามารถใช้ฟังก์ชันวัตถุ Sys นี้เพื่อค้นหาประเภทของวัตถุ JavaScript

คุณยังสามารถตรวจสอบว่า Object is Defined หรือ Type is Function หรือ Object is Empty ... เป็นต้น

  • Sys.isObject
  • Sys.isArguments
  • Sys.isFunction
  • Sys.isString
  • Sys.isArray
  • Sys.isUndefined
  • Sys.isDate
  • Sys.isNumber
  • Sys.isRegExp

ตัวอย่างเช่น

var m = function(){};
Sys.isObject({});
Sys.isFunction(m);
Sys.isString(m);

console.log(Sys.isDefined(jQuery));

1

ใน JavaScript ทุกอย่างเป็นวัตถุ

console.log(type of({}))  //Object
console.log(type of([]))  //Object

ในการรับประเภทจริงใช้สิ่งนี้

console.log(Object.prototype.toString.call({}))   //[object Object]
console.log(Object.prototype.toString.call([]))   //[object Array]

หวังว่านี่จะช่วยได้

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.