在 JavaScript 中获取变量的类型

Nithin Krishnan 2023年10月12日
  1. 使用 typeof 运算符查找变量的类型
  2. 在条件检查中使用 typeof 运算符
  3. 总结
在 JavaScript 中获取变量的类型

与 C、Java 等其他编程语言相比,JavaScript 使开发人员可以自由地使用单个关键字(var 关键字)定义任何类型的变量。反过来,JavaScript 会根据分配给这些变量的值来决定变量的数据类型。确定变量的数据类型似乎很容易。但是有些情况可以让我们解决问题。特别是在服务器的 REST API 响应返回值的情况下,我们可能需要在进一步编码处理之前知道值或变量的类型。

使用 typeof 运算符查找变量的类型

typeof 是 JavaScript 中的一元运算符,它返回应用它的操作数的类型。它通常将变量类型作为字符串对象返回。javascript 中的 typeof 操作符有标准的返回类型。

  • stringtypeof 返回 string 用于变量类型字符串。
  • number:它为保存整数或浮点值的变量返回 number
  • boolean:对于保存 truefalse 值的变量,typeof 返回 boolean
  • undefined:如果我们不为变量赋值,则变量的类型将被 JavaScript 标记为 undefined。因此,对于此类未声明的变量,typeof 操作数将返回 undefined
  • object:对于保存数组的变量,或 {} 中的对象,或分配有 null 值的变量,javascript 将此类变量的类型视为对象。因此,typeof 操作数将返回 object
  • function:JavaScript 允许我们将函数分配给变量。对于这种情况,此类变量的类型将是 functiontypeof 运算符将为函数赋值返回 function

以下代码片段演示了 typeof 运算符在不同变量赋值和不同场景下的行为。

var s1 = 'hello';
var n1 = 120;
var n1 = 11.1234;
var b1 = true;
var x;
var u = undefined;
var o1 = null;
var o2 = {id: 1, value: 200};
var o3 = [1, 2, 3];
var f = function() {
  return 1 + 2
};

console.log(typeof s1);
console.log(typeof n1);
console.log(typeof n1);
console.log(typeof b1);
console.log(typeof x);
console.log(typeof u);
console.log(typeof o1);
console.log(typeof o2);
console.log(typeof o3);
console.log(typeof f);

输出:

"string"
"number"
"number"
"boolean"
"undefined"
"undefined"
"object"
"object"
"object"
"function"

在条件检查中使用 typeof 运算符

我们可以在条件检查中使用 typeof 运算符,例如在 if 块中,通过检查运算符返回的值并将其与标准类型值进行比较。我们使用 === 运算符进行比较,因为它包括对运算符两端操作数的类型检查。

var a = 'hello';
if (typeof a === 'string') {
  console.log(true)
}

输出:

true

同样,我们可以对 numberbooleanobject 甚至是 function 进行条件检查。作为最佳实践,我们应该为 JavaScript 的 typeof 运算符返回的标准数据类型创建一个常量变量。然后,将变量的 typeof 与声明的常量进行比较。这种方法可以在编写条件块时轻松编码并减少拼写错误,这些条件块通常不会一目了然。参考以下代码更好理解。

const STRING_TYPE = 'string';
const NUMBER_TYPE = 'number';
var a = 'hello';
var b = 123;
if (typeof a === STRING_TYPE) {
  console.log(true)
}
if (typeof b === NUMBER_TYPE) {
  console.log(true)
}

输出:

true
true

总结

  • 对于使用 new 关键字分配变量的情况,javascript 会将此类分配视为对象。因此,对于此类赋值,typeof 运算符将返回 object。参考以下代码。
var s = new String('hello');
var n = new Number(100);
console.log(typeof s);
console.log(typeof n);

输出:

object
object
  • 如果我们使用 new 关键字分配函数,则此类变量的数据类型将被 javascript 视为函数。带有 new function()typeof 变量将作为 function 而不是 object 返回。让我们看看下面的代码。
var fn = new Function();

输出:

"function"
  • 所有浏览器都支持 javascript 的 typeof 运算符,包括旧版本的 Internet Explorer。因此,我们可以在支持多个浏览器的项目中毫无顾虑地使用运算符。

相关文章 - JavaScript Variable