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

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

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

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

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

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, 地址 >>> 《前端之路》之二:数据类型转换 && 隐式转换 || 显式转换

posted @ 2018-07-04 22:43  SmallW  阅读(589)  评论(0编辑  收藏  举报