02前端入门课--数据类型转换 && 隐式转换 || 显式转换

数据类型转换 && 隐式转换 || 显式转换

在上一个章节中，我们介绍了 JavaScript 的基本的数据类型，由于是弱类型语言，所以不需要 在很多时候去定义这个数据的类型，而且也不能够在定义了这个数据类型之后再去改变这个数据类型。

当遇到一个需要对数据类型进行改变的场景的时候，JS 就显示出来它的优势了，可以对数据类型进行轻松的转换，那么下面 我们就开始介绍 如何轻松的对数据类型进行转换，以及在转换的过程中，我们需要非常注意点问题。

 一、从 数字类型 转换成 字符串类型

A、 显式转换

//javascript

const numberA = 123
console.log(typeof numberA)     // number

String(numberA)                    // "123"
numberA.toString()                // "123"

```

 B、 隐式转换

//javascript
const numberB = 456
console.log(typeof numberA)     // number

const stringB = numberB + ''    // "456"
```

TIPS:  特殊数值的隐士转换

//javascript

const aNumber = NaN
const bNumber = Infinity
const cNumber = -Infinity
console.log(typeof aNumber)        // number
console.log(typeof bNumber)        // number
console.log(typeof cNumber)        // number

const aString = aNumber + ''    // "NaN"
const bString = bNumber + ''    // "Infinity"
const cString = cNumber + ''    // "-Infinity"

console.log(typeof aString)        // string
console.log(typeof bString)        // string
console.log(typeof aString)        // string
```

二、从 字符串类型  转换成 数字类型

A、 显式转换

//javascript

const aString = "789"
const bString = "789xxx"
const cString = "xxx789"

// Number()
let aNumber1 = Number(aString)    // 789
let aNumber2 = Number(bString)    // NaN
let aNumber3 = Number(cString)    // NaN

// parseInt()
let bNumber1 = parseInt(aString)    // 789
let bNumber2 = parseInt(bString)    // 789
let bNumber3 = parseInt(cString)    // NaN

/*  是不是很困惑，为什么 bNumber2 和 bNumber3 的返回值是不一样的？*/
/*  那么我们顺手查了一下 手册 parseInt() 方法                   */

/*  tips： 如果传入的 string 开头为 1～9 的数字 或者 '0x'、('0X') */
/*  那么 parseInt 会返回对应的 整数部分的 数值，从而忽略掉数值后面跟随的 字符串 */
/*  至于 '0x' 则是因为 16 进制的原因。 同理 10进制 */

// parseFloat()
let cNumber1 = parseFloat(aString)    // 789
let cNumber2 = parseFloat(bString)    // 789
let cNumber3 = parseFloat(cString)    // NaN

// 看来 parseFloat 和  parseInt 情况是一样的。

B、 隐式转换

//javascript

const aString = "789"
const bString = "789xxx"
const cString = "xxx789"

let dNumber1 = + aString    // 789
let dNumber2 = + bString    // NaN
let dNumber3 = + cString    // NaN

// tips: 慎用 '789' + 0    || 0 + '789'

let x = '789' + 0    // '7890'
let y = '789' - 0    // 789

// 不要问为什么～ 就是这么 6
```

 隐式转换 中 不常见类型的转换结果

//javascript

let aBool = + false            // 0
let bBool = + true            // 1

let aNaN = + NaN            // NaN
let aNull = + null             // 0
let aUndefind = + undefined     // NaN

let obj = {}

let aObj = + {}                // NaN

// 引用对象类型在被 隐式转换 过后往往都是 NaN
 

ps:在下一个章节 我们会介绍下数组的属性及操作方法

以上今天的所讲内容，具体案例实力已上传至资源，大家进入主页自行下载即可。