JavaScript 如何检查一个变量或对象的类型

JavaScript是一种松散类型的编程语言，意味着没有这样的规则来声明变量的类型。一个变量可以在程序中存储多种数据类型，所以在使用它之前必须了解变量的类型。在JavaScript中，我们可以使用 typeof 操作符来检查一个变量或对象的类型。 typeof 运算符接收一个变量，并以字符串格式返回其类型。

除了 typeof 操作符之外，JavaScript还提供了 instanceof 操作符来检查一个变量或对象的类型。 instanceof 操作符接受两个参数：要检查的对象和你想检查的类型的构造函数。如果构造函数属于该对象的类型，该操作符将返回true。

使用typeof操作符

typeof 运算符是一个单数运算符，它接受一个参数并返回一个表示该参数类型的字符串。例如， typeof 操作符可以用来检查一个变量或对象的类型。

语法

typeof variable_name

在上面的语法中，variable_name是一个变量的名字，你想确定它的类型。

typeof操作符可以返回以下字符串之一 –

“number “表示数字
字符串的 “string”。
“boolean “代表布尔值
“undefined “表示未定义的值
对象（包括数组和函数）的 “object”。
“symbol “表示符号（ECMAScript 2015的新规定）

例子

在这个例子中，我们使用typeof操作符来检查JavaScript中的变量或对象的类型。我们声明了多个不同类型的变量，如数字、字符串、布尔值等。我们在网页上显示了这些变量。我们在一个按钮上使用了一个点击事件处理程序来检查变量的类型。用户只要点击按钮，就可以在网页上看到所有的变量和它们各自的类型。typeof操作符有助于在执行特定操作之前确定变量或对象的类型。例如，你可以用它来确保一个变量在执行算术之前是一个数字，或者一个变量在与另一个字符串连接之前是一个字符串。

<html>
<body>
   <h2>Checking the <i> type of a variable or object </i> in JavaScript</h2>
   <h4>The variables are as follows:</h4>
   <ul>
      <li>let num = 10</li>
      <li>let str = "Hello"</li>
      <li>let bool = true</li>
      <li>let un</li>
      <li>let n = null</li>
      <li>let arr = [1, 2, 3]</li>
      <li>let func = function () {}</li>
   </ul>
   <button onclick = "checkType()"> Check Type </button>
   <div id = "root"> </div>
   <script>
      let num = 10
      let str = 'Hello'
      let bool = true
      let un
      let n = null
      let arr = [1, 2, 3]
      let func = function () {}
      let root = document.getElementById('root')
      function checkType() { 
         root.innerHTML = '<h4>The types of variables are as follows:</h4>'
         root.innerHTML += '<ul> <li> let num = 10 is a ' + typeof num + ' </li> <li> let str = "Hello" is a ' + typeof str + ' </li> <li> let bool = true is a ' + typeof bool + ' </li> <li> let un is a ' + typeof un + ' </li> <li> let n = null is a ' + typeof n + ' </li> <li> let arr = [1, 2, 3] is a ' + typeof arr + ' </li> <li> let func = function () {} is a ' + typeof func + ' </li> </ul> '
      }
   </script>
</body>
</html>

使用instanceof操作符

在JavaScript中， instanceof 操作符被用来在运行时确定一个对象的类型。它返回一个布尔结果，表明该对象是否是一个特定类的实例。

语法

object_name instanceof object_constructor

在上面的语法中，object_name是一个你想确定其类型的对象的名称。

例子

在这个例子中，我们使用 instanceof 操作符来检查JavaScript中变量或对象的类型。我们用一个字符串类的构造函数声明了一个字符串类型的变量和一个自定义类的对象，’myClassObject’，它是’myClass’的一个对象，并且在网页上显示了它们。我们用一个按钮的点击事件处理程序来检查对象的类型，并在网页上显示它们。

<html>
<body>
   <h2>Checking the <i> type of a variable or object </i> in JavaScript</h2>
   <h4>The object variables are as follows:</h4>
   <ul> 
      <li>let str = new String('Hello World!')</li>
      <li>let myClassObject = new MyClass()</li>
   </ul>
   <button onclick = "checkType()"> Check Type </button>
   <div id = "root"> </div>
   <script>
      let str = new String('Hello World!')
      class MyClass {}
      let myClassObject = new MyClass()
      let root = document.getElementById('root')
      function checkType() {
         root.innerHTML = '<h4> The types of objects using instanceof operator: </h4>'
         root.innerHTML += '<ul> <li> str is an instance of String: ' + (str instanceof String) + ' </li> <li> str is an instance of MyClass: ' + (str instanceof MyClass) + ' </li> </ul>'
         root.innerHTML += ' <ul> <li> myClassObject is an instance of String: ' + (myClassObject instanceof String) + ' </li> <li> myClassObject is an instance of MyClass: ' + (myClassObject instanceof MyClass) + ' </li> </ul>'
      }
   </script>
</body>
</html>

typeof 和instanceof运算符在与某些对象一起使用时，有时可能只返回预期的结果。例如， typeof 运算符对数组返回 “对象”，尽管它们在JavaScript中是一种对象类型。为了正确检查一个值是否是数组，你可以使用Array.isArray()方法。