Javascript 简明教程

JavaScript - typeof Operator

The typeof Operator

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

The typeof operator in JavaScript is a unary operator used to get the data type of a particular variable. It is placed before its single operand, which can be of any type. Its returns a string value indicating the data type of its operand. JavaScript contains primitive and non-primitive data types.

JavaScript 中有七种原始或基本数据类型 - 数值、字符串、布尔值、undefined、null、符号和 BigInt。还有一种称为对象的复合数据类型。Object 数据类型包含三个子数据类型 - 对象、数组和日期。

There are seven primitive or basic in JavaScript data types – number, string, boolean, undefined, null, symbol, and bigint. There is also a composite data type called object. The object data type contains three sub data type – Object, Array and Date.

Syntax

以下是 typeof 运算符的语法 -

Following is the syntax of the typeof operator −

typeof (operand);

我们可以在不使用括号的情况下像下面这样编写操作数 −

We can write the operand without parenthesis as follows −

typeof operand;

Parameter

  1. operand − It can be a value, variable or expression representing the object or primitive. In JavaScript, primitives are data that are not object and have no methods or properties.

Return Value

  1. It returns the string value representing the data type of the operand.

Datatypes Returned by typeof Operator

以下是 typeof 操作符的返回值列表。

Here is a list of the return values for the typeof Operator.

JavaScript 中有七种基本数据类型——数字、字符串、布尔值、BigInt、undefined、null 和 Symbol。typeof 操作符对于识别这些基本数据类型非常有用。

There are seven primitive datatypes in JavaScript – number, string, boolean, bigint, undefined, null, and symbol. The typeof operator is useful to identify these primitive or basic datatypes.

typeof 操作符对所有基本值返回相同的类型，除了 null。它对 null 值返回“object”。

The typeof operator returns same datatype of the all primitive values except the null. It returns "object" for the null values.

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

For object, date and array it returns "object" as datatype.

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

For functions and classes, it returns "function" as datatype.

让我们使用 typeof 操作符一个接一个地识别这些数据类型。

Let’s use the typeof operator to identify these datatypes one by one.

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 Operator to Check Number Type

在 JavaScript 中，数字类型表示数字值。JavaScript 对所有数字使用浮点表示形式。JavaScript typeof 操作符对所有类型的数字（例如整数、浮点数、零、无穷大、NaN 等）返回“number”。

In JavaScript, number type represents numeric values. JavaScript uses a floating-point representation for all numbers. The JavaScript typeof operator returns 'number' for all types of numbers such as integers, floating points, zero, Infinity, NaN etc.

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

Example

下面的示例演示如何使用 typeof 操作符检查数字数据类型。

The example below demonstrates how to use the typeof operator to check number data types.

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

Output

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

JavaScript typeof Operator to Check String Type

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

Strings represent sequences of characters. The typeof operator helps identify string variables. The JavaScript typeof operator returns "string" for all type of strings, such as empty string, string of characters, string words, multiline string etc.

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

Example

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

In the example below we use typeof operator to check string datatype.

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

Output

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

JavaScript typeof Operator to Check Boolean Type

布尔值表示 true 或 false。typeof 操作符对布尔变量返回布尔值。

The boolean values represent true or false. The tyepof operand returns boolean for boolean variables.

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

Example

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

In the example below, we use typeof operator to check boolean datatype.

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

Output

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

JavaScript typeof Operator to Check Symbol Type

Symbol 在 ES6 中引入，提供创建唯一标识符的方法。在符号上使用 typeof 操作符会返回“symbol”。

Symbols were introduced in ES6 and provide a way to create unique identifiers. Using typeof operator with symbols returns "symbol".

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

Example

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

In the example below, we use typeof operator to check Symbol datatype.

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

Output

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

JavaScript typeof Operator to Check Undefined and Null

“undefined”类型表示没有值。“null”类型表示没有任何对象值。在不确定变量上使用 typeof 操作符时，它会返回“undefined”。令人惊讶的是，在 null 上使用 typeof 操作符也会返回“object”，这是 JavaScript 中一个已知的怪癖。

The "undefined" type represents a lack of a value. The "null" type represents the absence of any object value. When using typeof operator with an undefined variable, it returns 'undefined'. Surprisingly, using typeof operator with null also returns "object", which is a known quirk in JavaScript.

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

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

Please note typeof operator will return "undefined" for both undeclared variable and declared but unassigned variables.

Example

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

In the example below, we use typeof operator to check undefined datatype.

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

Output

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

JavaScript typeof Operator to Check Object Type

JavaScript typeof 运算符为“object”返回所有类型对象，例如 JavaScript 对象、数组、时间、正则表达式等。

The JavaScript typeof operator returns "object" for all types of object such as JavaScript objects, arrays, dates, regex, etc.

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

Example

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

In the example below, we use typeof operator to check object datatype.

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

Output

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

JavaScript typeof Operator to Check Function Type

函数在 JavaScript 中是一等公民。JavaScript typeof 运算符为“function”返回所有类型的函数。有趣的是，它还为类返回“function”。

Functions are first class citizens in JavaScript. The JavaScript typeof operator returns "function" for all types of functions. Interestingly it returns "function" for classes also.

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

Example

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

In the example below, we use typeof operator to check function datatype.

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

Output

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

JavaScript typeof Operator to Check BigInt Type

typeof 运算符为 BigInt 数返回“bigint”。BigInt 值是太大而不适合用数字基本类型表示的数字值。

The typeof operator returns "bigint" for BigInt numbers. BigInt values are the numeric values that are too big to be represented by the number primitive.

typeof 100n; // returns "bigint"

JavaScript typeof Operator in Real-Time Development

例如，开发人员从 API 获取数据。如果只有一个字符串，API 返回字符串响应，而对于多个字符串，API 返回字符串数组。在此场景中，开发人员需要检查响应的类型是字符串还是数组，如果它是数组，他们需要遍历数组中的每个字符串。

For example, the developer gets the data from API. If there is only a single string, API returns the string response, and for multiple strings, API returns the array of strings. In this scenario, developers require to check whether the type of the response is string or array, and if it is an array, they need to traverse each string of the array.

Example

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

In the example below, we check the type of the ‘response’ variable and print its value accordingly.

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

Output

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

JavaScript Arrays and typeof Operator

数组尽管是 JavaScript 中的一种对象类型，但具有与 typeof 运算符不同的行为。

Arrays, despite being a type of object in JavaScript, have a distinct behavior with the typeof operator.

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

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

Arrays return "object" when using typeof operator, so for precise array detection, it’s often better to use Array.isArray().

Example

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

Output

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