笙亿网络策划

JavaScript typeof 操作符怎么用？

约 16 分钟读完 140 阅
文章导读
上一个 测验 下一个 typeof 运算符 JavaScript 中的 typeof 运算符是一个一元运算符，用于获取特定变量的数据类型。它放置在其单个操作数之前，该操作数可以是任何类型。它返回一个字符串值，表示其操作数的数据类型。JavaScript 包含原始数据类型和非
📋 目录
  1. 一 typeof 运算符
  2. 二 语法
  3. 三 typeof 运算符返回的数据类型
  4. 四 使用 JavaScript typeof 运算符检查 Number 类型
  5. 五 JavaScript typeof 操作符检查 String 类型
  6. 六 JavaScript typeof 操作符检查 Boolean 类型
  7. 七 JavaScript typeof 操作符检查 Symbol 类型
  8. 八 JavaScript typeof 操作符检查 Undefined 和 Null
  9. 九 JavaScript typeof 操作符检查对象类型
  10. 十 JavaScript typeof 操作符检查函数类型
A A

JavaScript - typeof 运算符

上一个
测验
下一个

typeof 运算符

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

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

语法

以下是 typeof 运算符的语法 −

typeof (operand);

我们也可以不使用括号来编写操作数，如下所示 −

typeof operand;

参数

  • operand − 可以是表示 object 或 primitive 的值、变量或表达式。在 JavaScript 中，primitives 是非 object 的数据，没有方法或属性。

返回值

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

typeof 运算符返回的数据类型

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

类型 typeof 返回的字符串
Number "number"
String "string"
Boolean "boolean"
Object "object"
Function "function"
Undefined "undefined"
Null "object"
Symbol "symbol"
Bigint "bigint"

JavaScript 有七种原始数据类型：number、string、boolean、bigint、undefined、null 和 symbol。typeof 运算符可用于识别这些原始或基本数据类型。

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

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

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

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

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

使用 JavaScript typeof 运算符检查 Number 类型

在 JavaScript 中，number 类型表示数值。JavaScript 对所有数字使用浮点数表示。JavaScript typeof 运算符对所有类型的数字（如整数、浮点数、零、Infinity、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 运算符检查 number 数据类型。

<html>
   <body>
      <p> 使用 typeof 运算符检查 number 数据类型 </p>
      <div id="output"></div>
      <script>
         let num = 42;
         document.getElementById("output").innerHTML = typeof num;
      </script>
      <p>将变量设置为不同的值，然后尝试...</p>
   </body>
</html>

输出

使用 typeof 运算符检查 number 数据类型
number
将变量设置为不同的值，然后尝试...

JavaScript typeof 操作符检查 String 类型

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

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

示例

在下面的示例中，我们使用 typeof 操作符检查 string 数据类型。

<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 操作符检查 Boolean 类型

Boolean 值表示 true 或 false。typeof 操作符对 boolean 变量返回 "boolean"。

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

示例

在下面的示例中，我们使用 typeof 操作符检查 boolean 数据类型。

<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 变量一起时，它返回 "undefined"。令人惊讶的是，使用 typeof 操作符与 null 一起也会返回 "object"，这是 JavaScript 中的一个已知怪癖。

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

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

示例

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

<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
Set the variable to different value and then try...

JavaScript typeof 操作符检查函数类型

在 JavaScript 中，函数是 first class citizens。JavaScript typeof 操作符对于所有类型的函数都会返回 "function"。有趣的是，它对于 class 也会返回 "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
Set the variable to different value and then try...

JavaScript typeof 操作符检查 BigInt 类型

typeof 操作符对于 BigInt 数字会返回 "bigint"。BigInt 值是太大而无法由 number 原始类型表示的数值。

typeof 100n; // 返回 "bigint"

JavaScript typeof 操作符在实时开发中的应用

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

示例

在下面的示例中，我们检查 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 : ");
			
            // 遍历数组
            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..