JavaScript - typeof 运算符

上一页
下一页

typeof 运算符

在 JavaScript 中，typeof 运算符是一个一元运算符，用于获取特定变量的数据类型。它放在其单个操作数之前，该操作数可以是任何类型。它返回一个字符串值，指示其操作数的数据类型。JavaScript 包含基本数据类型和非基本数据类型。

JavaScript 中有七种基本数据类型 - 数字、字符串、布尔值、未定义、空、符号和大整数。还有一个称为对象的复合数据类型。对象数据类型包含三个子数据类型 - 对象、数组和日期。

语法

以下是 typeof 运算符的语法：

typeof (operand);

我们可以如下所示编写不带括号的操作数：

typeof operand;

参数

  • 操作数 - 它可以是表示对象或基本类型的值、变量或表达式。在 JavaScript 中，基本类型是不具有方法或属性的对象的数据。

返回值

  • 它返回一个字符串值，表示操作数的数据类型。

typeof 运算符返回的数据类型

以下是typeof运算符的返回值列表。

类型 typeof 返回的字符串
数字 "number"
字符串 "string"
布尔值 "boolean"
对象 "object"
函数 "function"
未定义 "undefined"
空 "object"
符号 "symbol"
大整数 "bigint"

JavaScript 中有七种基本数据类型 - 数字、字符串、布尔值、大整数、未定义、空和符号。typeof 运算符用于识别这些基本数据类型。

typeof 运算符返回所有基本类型的值的相同数据类型，除了空值。它为空值返回“object”。

对于对象、日期和数组，它返回“object”作为数据类型。

对于函数和类，它返回“function”作为数据类型。

让我们使用 typeof 运算符逐一识别这些数据类型。

typeof 10; // returns 'number'
typeof 'Hello World'; // returns 'string'
typeof true; // returns 'boolean'
typeof {name:"Tutorialspoint"}; // returns 'object'
typeof function foo(){};// returns 'function'
typeof undefined; // returns 'undefined'
typeof null; // returns 'object'
typeof Symbol(); // returns 'symbol'
typeof 10n; // returns 'bigint'

JavaScript typeof 运算符检查数字类型

在 JavaScript 中，数字类型表示数值。JavaScript 对所有数字使用浮点表示法。JavaScript typeof 运算符对所有类型的数字（如整数、浮点数、零、Infinity、NaN 等）返回“number”。

typeof 10; //returns "number";
typeof -10; //returns "number";
typeof 0; //returns "number";
typeof 10.20; //returns "number";
typeof Math.LN10; //returns "number";
typeof Infinity; //returns "number";
typeof NaN; //returns "number";
typeof Number('1'); //returns "number";
typeof Number('hello'); //returns "number";

示例

以下示例演示了如何使用 typeof 运算符检查数字数据类型。

<html>
   <body>
      <p> Using typeof operator to check number data type </p>
      <div id="output"></div>
      <script>
         let num = 42;
         document.getElementById("output").innerHTML = typeof num;
      </script>
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

输出

Using typeof operator to check number data type
number
Set the variable to different value and then try...

JavaScript typeof 运算符检查字符串类型

字符串表示字符序列。typeof 运算符有助于识别字符串变量。JavaScript 的 typeof 运算符对于所有类型的字符串都返回 "string"，例如空字符串、字符字符串、单词字符串、多行字符串等。

typeof "10"; //returns "string";
typeof ""; //returns "string";
typeof "Hello World"; //returns "string";
typeof String(10); //returns "string";
typeof typeof 2; //returns "string";

示例

在下面的示例中，我们使用 typeof 运算符来检查字符串数据类型。

<html>
   <body>
      <div id="output"></div>
      <script>
         let str = "Hello World";
         document.getElementById("output").innerHTML = typeof str;
      </script>
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

输出

string
Set the variable to different value and then try...

JavaScript typeof 运算符检查布尔类型

布尔值表示真或假。tyepof 操作数对布尔变量返回布尔值。

typeof true; //returns "boolean";
typeof false; //returns "boolean";
typeof Boolean(10); //returns "boolean";

示例

在下面的示例中，我们使用 typeof 运算符来检查布尔数据类型。

<html>
   <body>
      <div id="output"></div>
      <script>
         let bool = true;
         document.getElementById("output").innerHTML = typeof bool;
      </script>
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

输出

boolean
Set the variable to different value and then try...

JavaScript typeof 运算符检查 Symbol 类型

Symbol 在 ES6 中引入，提供了一种创建唯一标识符的方法。使用 typeof 运算符与 Symbol 一起使用时，会返回 "symbol"。

typeof Symbol(); //returns "symbol";
typeof Symbol("unique values"); //returns "symbol";

示例

在下面的示例中，我们使用 typeof 运算符来检查 Symbol 数据类型。

<html>
   <body>
      <div id="output"></div>
      <script>
         let sym = Symbol("Hello");
         document.getElementById("output").innerHTML = typeof sym;
      </script>
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

输出

symbol
Set the variable to different value and then try...

JavaScript typeof 运算符检查 Undefined 和 Null

"undefined" 类型表示缺少值。"null" 类型表示没有任何对象值。当使用 typeof 运算符与未定义变量一起使用时，它会返回 'undefined'。令人惊讶的是，使用 typeof 运算符与 null 一起使用也会返回 "object"，这是 JavaScript 中已知的怪癖。

typeof undefined; //returns "undefined";
typeof null; //returns "object";

请注意，typeof 运算符将对未声明的变量和已声明但未赋值的变量都返回 "undefined"。

示例

在下面的示例中，我们使用 typeof 运算符来检查 undefined 数据类型。

<html>
   <body>
      <div id="output"></div>
      <script>
         let x;
         document.getElementById("output").innerHTML = typeof x;
      </script>
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

输出

undefined
Set the variable to different value and then try...

JavaScript typeof 运算符检查对象类型

对于所有类型的对象，例如 JavaScript 对象、数组、日期、正则表达式等，JavaScript typeof 运算符都返回 "object"。

const obj = {age: 23};
typeof obj; //returns "object";
const arr = [1,2,3,4];
typeof arr; //returns "object";
typeof new Date(); //returns "object";
typeof new String("Hello World"); //returns "object";

示例

在下面的示例中，我们使用 typeof 运算符来检查对象数据类型。

<html>
   <body>
      <div id="output"></div>
      <script>
         const person = {name: "John", age: 34};
         document.getElementById("output").innerHTML = typeof person;
      </script>
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

输出

object
Set the variable to different value and then try...

JavaScript typeof 运算符检查函数类型

函数在 JavaScript 中是头等公民。JavaScript typeof 运算符对所有类型的函数都返回 "function"。有趣的是，它对类也返回 "function"。

const myFunc = function(){return "Hello world"};
typeof myFunc; //returns "function";
const func = new Function();
typeof func; //returns "function";
class myClass {constructor() { }}
typeof myClass; // returns "function";

示例

在下面的示例中，我们使用 typeof 运算符来检查函数数据类型。

<html>
   <body>
      <div id="output"></div>
      <script>
         const myFunc = function(){return "Hello world"};
         document.getElementById("output").innerHTML = typeof myFunc;
      </script>
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

输出

function
Set the variable to different value and then try...

JavaScript typeof 运算符检查 BigInt 类型

typeof 运算符对 BigInt 数字返回 "bigint"。BigInt 值是数值，其大小超过了 number 原语所能表示的范围。

typeof 100n; // returns "bigint"

JavaScript typeof 运算符在实时开发中的应用

例如，开发人员从 API 获取数据。如果只有一个字符串，API 返回字符串响应，对于多个字符串，API 返回字符串数组。在这种情况下，开发人员需要检查响应的类型是字符串还是数组，如果是数组，则需要遍历数组的每个字符串。

示例

在下面的示例中，我们检查 'response' 变量的类型并相应地打印其值。

<html>
   <body>
      <script>
         const response = ["Hello", "World!", "How", "are", "you?"];

         if (typeof response == "string") {
            document.write("The response is - ", response);
         } else {
            document.write("The response values are : ");
			
            // Traversing the array
            for (let val of response) {
               document.write(val, " ");
            }
         }
      </script>
   </body>
</html>

输出

The response values are : Hello World! How are you?

JavaScript 数组和 typeof 运算符

尽管数组在 JavaScript 中是一种对象类型，但它们在使用 typeof 运算符时具有不同的行为。

let numbers = [1, 2, 3];
typeof numbers; // Output: 'object'

使用 typeof 运算符时，数组返回 "object"，因此为了精确检测数组，通常最好使用 Array.isArray()。

示例

<html>
   <body>
      <div id="output"></div>
      <script>
         let numbers = [1, 2, 3];
         document.getElementById("output").innerHTML = Array.isArray(numbers);
      </script>
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

输出

true
Set the variable to different value and then try..
打印页面
上一页
下一页
广告