龙空技术网

JavaScript类型转换机制,你了解吗

尚硅谷教育 83

前言:

目前咱们对“js时间格式转换时间戳”都比较重视,兄弟们都需要了解一些“js时间格式转换时间戳”的相关知识。那么小编在网络上收集了一些关于“js时间格式转换时间戳””的相关内容,希望看官们能喜欢,咱们快快来了解一下吧!

我们都知道,JavaScript是弱类型语言,在声明一个变量时,我们无法明确声明其类型,变量的类型根据其实际值来决定,而且在运行期间,我们可以随时改变这个变量的值和类型,另外,变量在运行期间参与运算时,在不同的运算环境中,也会进行相应的自动类型转换。

类型转换的分类

js的类型转换只有三种类型的转换: to string, to boolean, to number, 即原始数据类型{string, number, boolean, undefined, null} + 引用数据类型{object} —to→ {string, boolean, number}的类型转换。

而在这三种类型转换当中, 分为两大块:显式类型转换和隐式类型转换。

注:显式类型转换是隐式类型转换的基础,隐式类型转换就是在操作符的作用下进行显式类型转换。

一、显式类型转换

1.1.将其他类型转化成数值

1.1.1 Number函数

转换情况:

(1)字符串-->数字

如果字符串是一个合法的数字,则直接转换为对应的数字。

如果字符串是一个非法的数字,则转换为NaN。

如果是一个空串或纯空格的字符串,则转换为0。

(2)布尔-->数字

true转换为1。

false转换为0。

(3)空值-->数字

null转换为0。

(4)未定义-->数字

undefined转换为NaN。

实践一下:

// 数值: 转换后还是原来的值

Number(123); //123

// undefined:转成 NaN

Number(undefined) // NaN

// null:转成0

Number(null) // 0

// 布尔值:true 转成 1,false 转成 0

Number(true) // 1

Number(false) // 0

// 字符串:如果可以被解析为数值,则转换为相应的数值

Number('123') // 324

// 字符串:如果不可以被解析为数值,返回 NaN

Number('123abc') // NaN

// 空字符串转为0

Number('') // 0

// 对象:通常转换成NaN(除了只包含单个数值的数组)

Number({a: 1}) // NaN

Number([1, 2, 3]) // NaN

Number([5]) // 5

1.1.2 parseInt函数

将一个字符串中的有效的整数位提取出来,并转换为Number。

var str = '123.45px';

parseInt(str); //123;

//如果需要,也可以在parseInt()中加第二个参数,表示进制

1.1.3 parseFloat函数

将一个字符串中的有效的小数位提取出来,并转换为Number。

var str = '123.45px';

parseFloat(str); //123.45;

parseInt()函数和parseFloat()函数就是专门用来将一个字符串转换为数字的。注意:如果对 非 String 的类型使用 parseInt()或 parseFloat() 则会先把它转换为String,然后再操作。

1.2.将其他类型转化为字符串

1.2.1 string函数

对于Number Boolean,String都会调用他们的toString()方法来将其转换为字符串,对于null值,直接转换为字符串"null"。对于undefined直接转换为字符串"undefined"。

实践一下:

//字符串:转换后还是原来的值

String("a") // "a"

//undefined:转为字符串"undefined"

String(undefined) // "undefined"

//null:转为字符串"null"

String(null) // "null"

//布尔值:true转为字符串"true",false转为字符串"false"

String(true) // "true"

// 数值:转为相应的字符串

String(1) // "1"

//对象

String({a: 1}) // "[object Object]"

String([1, 2, 3]) // "1,2,3"

1.2.2 toString函数

该方法不会影响到原变量,会将转换的结果返回。

注意:Null 和 Undefined 没有 toString() 方法,如果调用他们的方法会报错。

//null和undefinde,调用toString,会报类型错误

null.toString(); //TypeError

undefined.toString(); //TypeError

1.3.将其他类型转化为布尔

1.3.1 Boolean函数

转换情况

(1)字符串 --> 布尔:除了空串其余全是true。

(2)数值 --> 布尔:除了0和NaN其余的全是true。

(3)null、undefined--> 布尔:都是false。

(4)对象 -->布尔:都是true。

//字符串:只有空串是false

Boolean('') // false

Boolean(' ') //true

//数值:0,0.0和NaN是false

Boolean(0) // false

Boolean(0.0) // false

Boolean(NaN) // false

//空值:返回false

Boolean(undefined) // false

Boolean(null) // false

//对象:都是true

Boolean({}) // true

Boolean([]) // true

Boolean(new Boolean(false)) // true

二、隐式类型转换机制

在隐式转换中,可能最大的疑惑是:什么时候发生隐式转换,转换成什么类型?我们来看一看。

2.1.自动转换为数值类型

除了+有可能把运算子转为字符串,其他运算符都会把运算子自动转成数值。

//如果操作值之一不是数值,则被隐式调用Number()函数进行转换。

'5' - '2' // 3

'5' * '2' // 10

true - 1 // 0

false - 1 // -1

'1' - 1 // 0

'5' * [] // 0

false / '5' // 0

'abc' - 1 // NaN

null + 1 // 1

undefined + 1 // NaN

2.2.自动转换为字符串类型

+运算中,一旦存在字符串,则会进行字符串拼接操作。

'5' + 1 // '51'

'5' + true // "5true"

'5' + false // "5false"

'5' + {} // "5[object Object]"

'5' + function (){} // "5function (){}"

'5' + undefined // "5undefined"

'5' + null // "5null"

2.3.自动转换为布尔类型

2.3.1比较运算(==、!=、 >、<),if、while都会自动转换为布尔类型。

转换规则参照:Boolean函数。

if(undefined){ // undefined会转化为boolean中的false

console.log('真')

}else{

console.log('假') //'假'

}

接下来我们重点说一下比较运算。

2.3.2 比较运算符操作规则:

(1)如果两个操作值都是数值,则进行数值比较。

(2)如果两个操作值都是字符串,则比较字符串对应的字符编码值。

(3)如果只有一个操作值是数值,则将另一个操作值转换为数值,进行数值比较。

(4)NaN是非常特殊的值,它不和任何类型的值相等,包括它自己,同时它与任何类型的值比较大小时都返回false。

(5)null与undefined是相等的。

注:null或undefined在与其他数据类型进行比较返回false。

10 >= 8 //true

'10'>= '8' //false

'10'>= 8 //true

NaN == NaN //false

null == undefined //true

undefined == 0 //false

总结

JavaScript这门语言饱受诟病的点之一就是类型转换, 有时候js的类型转换机制确实会让新手摸不着头脑。希望看完这篇文章能让刚入门的或js没有形成体系的同学有一个了解。

大家可以记住:显式类型转换是隐式类型转换的基础,隐式类型转换就是在操作符的作用下进行显式类型转换。

标签: #js时间格式转换时间戳 #尚硅谷javascript文档 #js进制转换代码 #js与html转换 #js怎么转换数据类型的方法