Suchen des Variablentyps in JavaScript

146

In Java können Sie eine Variable verwenden instanceOfoder verwenden getClass(), um ihren Typ herauszufinden.

Wie finde ich den Typ einer Variablen in JavaScript heraus, der nicht stark typisiert ist?

Woher weiß ich zum Beispiel, ob das barein Booleanoder ein Numberoder ein ist String?

function foo(bar) {
    // what do I do here?
}
Tom Tucker
quelle
siehe auch: stackoverflow.com/questions/24318654
dreftymac

Antworten:

242

Verwendung typeof:

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

So können Sie tun:

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

Seien Sie jedoch vorsichtig, wenn Sie diese Grundelemente mit ihren Objekt-Wrappern definieren (was Sie niemals tun sollten, verwenden Sie nach Möglichkeit Literale):

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

Der Typ eines Arrays ist immer noch object. Hier braucht man wirklich den instanceofOperator.

Aktualisieren:

Ein weiterer interessanter Weg ist die Untersuchung der Ausgabe von 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]"

Damit müssten Sie nicht zwischen primitiven Werten und Objekten unterscheiden.

Felix Kling
quelle
Was wäre der Nachteil bei der Verwendung von proto .constructor.name? Eine dreifache Funktion wäre: function getVariableType (object) {return (object .__ proto__.constructor.name); }
Stu
Aktualisierung der oben aufgeführten Funktionsdefinition: function getVariableType (object) {return (object === undefined? "Undefined": object.__proto__.constructor.name);
Stu
29

typeof ist nur für die Rückgabe der "primitiven" Typen wie Zahl, Boolescher Wert, Objekt, Zeichenfolge und Symbole geeignet. Sie können auch instanceoftesten, ob ein Objekt von einem bestimmten Typ ist.

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

var obj = new MyObj(10);

console.log(obj instanceof MyObj && obj instanceof Object); // outputs true
Juan Mendes
quelle
23

Verwenden von 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';
krishna singh
quelle
Es gibt keine Probleme bei der Verwendung Number(1), Boolean(true)...Die einzigen Probleme sind, wenn Sie newein Boxed-Objekt verwenden und es erstellen. Die Verwendung als Funktionen kann tatsächlich nützlich sein, um von anderen Typen zu konvertieren. Boolean(0) === false, Number(true) === 1
Juan Mendes
was ist mit null? typeof nullist 'Objekt'
Dheeraj
15

In Javascript können Sie dies mithilfe der Funktion typeof tun

function foo(bar){
  alert(typeof(bar));
}
wajiw
quelle
3
Wie ich in meiner Antwort erwähnt habe, gibt typof nur number, boolean, object, string zurück. Nicht nützlich, um andere Typen wie Array, RegExp oder benutzerdefinierte Typen zu bestimmen.
Juan Mendes
7

Um etwas ECMAScript-5.1-präziser zu sein als die anderen Antworten (manche könnten pedantisch sagen):

In JavaScript haben Variablen (und Eigenschaften) keine Typen: Werte. Außerdem gibt es nur 6 Arten von Werten: Undefiniert, Null, Boolesch, String, Zahl und Objekt. (Technisch gesehen gibt es auch 7 "Spezifikationstypen", aber Sie können Werte dieser Typen nicht als Eigenschaften von Objekten oder Werte von Variablen speichern. Sie werden nur innerhalb der Spezifikation selbst verwendet, um die Funktionsweise der Sprache zu definieren. Die Werte Sie können explizit nur die 6 Typen manipulieren, die ich aufgelistet habe.)

Die Spezifikation verwendet die Notation "Typ (x)", wenn sie über "den Typ von x" sprechen möchte. Dies ist nur eine Notation, die in der Spezifikation verwendet wird: Sie ist kein Merkmal der Sprache.

Wie andere Antworten deutlich machen, möchten Sie in der Praxis möglicherweise mehr als den Typ eines Werts wissen - insbesondere, wenn der Typ Objekt ist. Unabhängig davon und der Vollständigkeit halber ist hier eine einfache JavaScript-Implementierung von Typ (x), wie sie in der Spezifikation verwendet wird:

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';
    }
}
Wir s
quelle
Es gibt auch Symbole
Juan Mendes
Nicht in ECMAScript 5.1, gibt es nicht.
Wes
6

Ich finde es frustrierend, dass typeofdas so begrenzt ist. Hier ist eine verbesserte Version:

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);
    }   
};

Probentest:

realtypeof( '' ) // "string"
realtypeof( new String('') ) // "[object String]"
Object.prototype.toString.call("foo bar") //"[object String]" 
Tom Söderlund
quelle
3

Für integrierte JS-Typen können Sie Folgendes verwenden:

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

Hier verwenden wir die Methode 'toString' aus der Klasse 'Object', die anders funktioniert als die gleiche Methode eines anderen Typs.

Beispiele:

// 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"

Wenn Sie einen Klassennamen benötigen, können Sie Folgendes verwenden:

instance.constructor.name

Beispiele:

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

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

Diese Funktion wurde jedoch in ES2015 hinzugefügt .

WebBrother
quelle
1

Hier ist die Komplettlösung.

Sie können es auch als Hilfsklasse in Ihren Projekten verwenden.

"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>

Für exportierbares CommonJs-Modul oder RequireJS-Modul ....

"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;

Wird derzeit in einem öffentlichen Git-Repo verwendet. Github-Projekt

Jetzt können Sie diesen Sys-Code in eine Sys.js-Datei importieren. Dann können Sie diese Sys-Objektfunktionen verwenden, um den Typ der JavaScript-Objekte herauszufinden

Sie können auch überprüfen, ob Objekt definiert ist oder Typ Funktion ist oder ob das Objekt leer ist ... usw.

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

Beispielsweise

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

console.log(Sys.isDefined(jQuery));
Tarandeep Singh
quelle
1

In JavaScript ist alles ein Objekt

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

Verwenden Sie diese Option, um den Real- Typ zu erhalten

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

Hoffe das hilft

Yogendra Saxena
quelle