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

erbingbing 2018-07-04 原文

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

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