《前端之路》之二：数据类型转换 && 隐式转换 || 显式转换

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

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

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

目录

• 02：数据类型转换 && 隐式转换 || 显式转换
  • 一、从 数字类型 转换成 字符串类型
    • A、 显式转换
    • B、 隐式转换
  • 二、从 字符串类型 转换成 数字类型
    • A、 显式转换
    • B、 隐式转换
      • 隐式转换 中 不常见类型的转换结果

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

A、 显式转换

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

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

B、 隐式转换

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

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

TIPS: 特殊数值的隐士转换

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、 显式转换

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、 隐式转换

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

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

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

以上则为 这个章节的内容， 欢迎 star， 地址 >>> 《前端之路》之二：数据类型转换 && 隐式转换 || 显式转换