前端学习(27)~js学习: typeof和数据类型转换

Posted 2020-11-27 Vincent-yuan

变量的数据类型转换：将一种数据类型转换为另外一种数据类型。

通常有三种形式的类型转换：

• 转换为字符串类型

• 转换为数字型

• 转换为布尔型

typeof 运算符

typeof()表示“获取变量的数据类型”，返回的是小写，语法为：（两种写法都可以）

// 写法1
typeof 变量;

// 写法2
typeof(变量);

typeof 这个运算符的返回结果就是变量的类型。那返回结果的类型是什么呢？是字符串。

返回结果：

typeof 的代码写法	返回结果
typeof 数字	number
typeof 字符串	string
typeof 布尔型	boolean
typeof 对象	object
typeof 方法	function
typeof null	object
typeof undefined	undefined

备注 1：为啥 typeof null的返回值也是 object 呢？因为 null 代表的是空对象。

备注 2：typeof NaN的返回值是 number，上一篇文章中讲过，NaN 是一个特殊的数字。

返回结果举例：

console.log(type []); // 空数组的打印结果：object

console.log(type {}); // 空对象的打印结果：object

代码解释：这里的空数组[]、空对象{} ，为啥他们在使用 typeof 时，返回值也是 object呢？因为这里的 返回结果object指的是引用数据类型。空数组、空对象都是引用数据类型 Object。

变量的类型转换的分类

类型转换分为两种：显示类型转换、隐式类型转换。

显示类型转换

• toString()

• String()

• Number()

• parseInt(string)

• parseFloat(string)

• Boolean()

隐式类型转换

• isNaN ()

• 自增/自减运算符：++、—-

• 正号/负号：+a、-a

• 加号：+

• 运算符：-、*、/

隐式类型转换（特殊）

• 逻辑运算符：&&、||、！ 。非布尔值进行与或运算时，会先将其转换为布尔值，然后再运算，但运算结果是原值。具体可以看下一篇文章《运算符》。

• 关系运算符：<、> <= >=等。关系运算符，得到的运算结果都是布尔值：要么是true，要么是false。具体可以看下一篇文章《运算符》。

针对上面这两种类型转换，这篇文章来详细介绍。

其他的简单类型 --> String

方法一（隐式类型转换）：字符串拼接

格式：变量+"" 或者 变量+"abc"

举例：

var a = 123; // Number 类型
console.log(a + ‘‘); // 转换成 String 类型
console.log(a + ‘haha‘); // 转换成 String 类型

上面的例子中，打印的结果，都是字符串类型的数据。实际上内部是调用的 String() 函数。也就是说，c = c + "" 等价于 c = String(c)。

方法二：调用 toString()方法

语法：

变量.toString()

【重要】该方法不会影响到原变量，它会将转换的结果返回。当然我们还可以直接写成a = a.toString()，这样的话，就是直接修改原变量。

注意：null 和 undefined 这两个值没有 toString()方法，所以它们不能用方法二。如果调用，会报错。

另外，Number 类型的变量，在调用 toString()时，可以在方法中传递一个整数作为参数。此时它将会把数字转换为指定的进制，如果不指定则默认转换为 10 进制。例如：

var a = 255;

//对于Number调用toString()时可以在方法中传递一个整数作为参数
//此时它将会把数字转换为指定的进制,如果不指定则默认转换为10进制
a = a.toString(2); // 转换为二进制

console.log(a); // 11111111
console.log(typeof a); // string

方法三（强制转换）：使用 String()函数

语法：

String(变量)

使用 String()函数做强制类型转换时：

• 对于 Number 和 Boolean 而言，本质上就是调用 toString()方法。

• 但是对于 null 和 undefined，则不会调用 toString()方法。它会将 null 直接转换为 "null"。将 undefined 直接转换为 "undefined"。

prompt()：用户的输入

prompt()就是专门用来弹出能够让用户输入的对话框。重要的是：用户不管输入什么，都当字符串处理。

其他的数据类型 --> Number 【重要】

使用 Number() 函数

情况一：字符串 --> 数字

• 1.如果字符串中是纯数字，则直接将其转换为数字。

• 2.只要字符串中包含了非数字的内容（小数点按数字来算），则转换为 NaN。

• 3.如果字符串是一个空串或者是一个全是空格的字符串，则转换为 0。

情况二：布尔 --> 数字

• true 转成 1

• false 转成 0

情况三：null --> 数字

• 结果为：0

情况四：undefined --> 数字

• 结果为：NaN

补充：怎么理解这里的 NaN 呢？可以这样理解，使用 Number() 函数之后，如果无法转换为数字，就会转换为 NaN。

使用 parseInt()函数：字符串 -> 整数