JavaScript - typeof 运算符

typeof 运算符

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

JavaScript 中有七种原始或基本数据类型:number、string、boolean、undefined、null、symbol 和 bigint。还有一种称为 object 的复合数据类型。object 数据类型包含三个子数据类型:Object、Array 和 Date。

语法

以下是 typeof 运算符的语法 -

typeof (操作数);

我们可以像下面这样写操作数，不用括号 -

typeof operand;

参数

• 操作数 - 它可以是表示对象或原始值的值、变量或表达式。在 JavaScript 中，原始数据是指不属于对象且没有方法或属性的数据。

返回值

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

typeof 运算符返回的数据类型

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

JavaScript 中有七种原始数据类型:数字、字符串、布尔值、bigint、undefined、null 和 symbol。typeof 运算符可用于识别这些原始或基本数据类型。

typeof 运算符返回除 null 之外的所有原始值的相同数据类型。对于 null 值，它返回"object"。

对于 object、date 和数组，它返回"object"作为数据类型。

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

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

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

JavaScript typeof 运算符检查数字类型

在 JavaScript 中，数字类型表示数值。JavaScript 使用浮点数表示所有数字。JavaScript typeof 运算符对所有类型的数字(例如整数、浮点数、零、无穷大、NaN 等)都返回"number"。

typeof 10; //返回"number";
typeof -10; //返回"number";
typeof 0; //返回"number";
typeof 10.20; //返回"number";
typeof Math.LN10; //返回"number";
typeof Infinity; //返回"number";
typeof NaN; //返回"number";
typeof Number('1'); //返回"number";
typeof Number('hello'); //返回"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>将变量设置为不同的值，然后尝试...</p>
   </body>
</html>

输出

Using typeof operator to check number data type
number
将变量设置为不同的值，然后尝试...

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

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

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

示例

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

<html>
   <body>
      <div id="output"></div>
      <script>
         let str = "Hello World";
         document.getElementById("output").innerHTML = typeof str;
      </script>
      <p>将变量设置为不同的值，然后尝试...</p>
   </body>
</html>

输出

string
将变量设置为不同的值，然后尝试...

JavaScript typeof 运算符检查布尔类型

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

typeof true; //返回"boolean";
typeof false; //返回"boolean";
typeof Boolean(10); //返回"boolean";

示例

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

<html>
   <body>
      <div id="output"></div>
      <script>
         let bool = true;
         document.getElementById("output").innerHTML = typeof bool;
      </script>
      <p>将变量设置为不同的值，然后尝试...</p>
   </body>
</html>

输出

boolean
将变量设置为不同的值，然后尝试...

JavaScript typeof 运算符检查 Symbol 类型

Symbol 是在 ES6 中引入的，它提供了一种创建唯一标识符的方法。使用 typeof 运算符对 Symbol 进行操作将返回"symbol"。

typeof Symbol(); //返回"symbol";
typeof Symbol("unique values"); //返回"symbol";

示例

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

<html>
   <body>
      <div id="output"></div>
      <script>
         let sym = Symbol("Hello");
         document.getElementById("output").innerHTML = typeof sym;
      </script>
      <p>将变量设置为不同的值，然后尝试...</p>
   </body>
</html>

输出

symbol
将变量设置为不同的值，然后尝试...

JavaScript typeof 运算符检查 Undefined 和 Null 值

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

typeof undefined; //返回"undefined";
typeof null; //返回"object";

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

示例

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

<html>
   <body>
      <div id="output"></div>
      <script>
         let x;
         document.getElementById("output").innerHTML = typeof x;
      </script>
      <p>将变量设置为不同的值，然后尝试...</p>
   </body>
</html>

输出

undefined
将变量设置为不同的值，然后尝试...

JavaScript typeof 运算符检查对象类型

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

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

示例

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

<html>
   <body>
      <div id="output"></div>
      <script>
         const person = {name: "John", age: 34};
         document.getElementById("output").innerHTML = typeof person;
      </script>
      <p>将变量设置为不同的值，然后尝试...</p>
   </body>
</html>

输出

object
将变量设置为不同的值，然后尝试...

JavaScript typeof 运算符检查函数类型

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

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

示例

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

<html>
   <body>
      <div id="output"></div>
      <script>
         const myFunc = function(){return "Hello world"};
         document.getElementById("output").innerHTML = typeof myFunc;
      </script>
      <p>将变量设置为不同的值，然后尝试...</p>
   </body>
</html>

输出

function
将变量设置为不同的值，然后尝试...

JavaScript typeof 运算符检查 BigInt 类型

typeof 运算符对 BigInt 数字返回"bigint"。BigInt 值是指太大而无法用数字原语表示的数值。

typeof 100n; // 返回"bigint"

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

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

示例

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

<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 : ");
			
            // 遍历数组
            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; // 输出:'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>将变量设置为不同的值，然后尝试...</p>
   </body>
</html>

输出

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