JavaScript中类型转换要重点牢记哦(^▽^)

隐式转换

即某些运算符被执行时，系统内部自动将数据类型进行转换

• 规则：

  • +号两边只要有一个时字符串，都会把另一个转为字符串

     console.log(2 + '2') // 22
    

  • 除了 +以外，减- 乘 除/等都会把数据转为数字类型*

    console.log(2 - '2') //0 number
    

• 缺点：转换类型不明确，靠经验才能总结

  • +号作为正号解析可以转换成数字型

  • 任何数据同字符串相加 结果都是字符串

    console.log(+12) // 12 +作为正号转为数字型
    console.log(typeof + '12') // number
    console.log(typeof '12') //字符串
    console.log(+'11' + 12) //23  number
    

    注：prompt获取过来的值为字符串型，会出现字符串相加，因此直接用+号 更方便

     let num = +prompt('输入第一个数值请') //+号转换为数字类型
    let num1 = +prompt('输入第二个数值请') 
    alert(`两数之和为${num} + ${num1}`)
    

注：

1. 有字符串的加法 "" + 1, 结果是"1"(只要有字符串的做加法操作即字符串拼接)
2. 减法- (像大多数数学运算一样)只能用于数字，它会使空字符串""转换为0,例如 '2'- 2 = 0; '' - 2 = -2
3. null经过数字转换后会变为0,例如 null + 3 = 3
4. undefined经过数字转换之后会变为NaN,例如undefined+1 = NaN

显示转换

• 编写程序时过度依靠隐式转换不严谨，规律不清晰，徐靠经验总结。

• 因此 自己写代码告诉系统该转换成什么类型

  • 转为数字类型Number或**+号** 直接用+号 更方便

    let str = '123'
    console.log(Number(str)) // 123
    // let num = prompt('输入年薪')
    // console.log(Number(num)) //数字类型
    //let num = Number(prompt('输入年薪'))
    //console.log(num)
    let num = +prompt('输入年薪') //+号转换为数字类型
    console.log(num)
    

    • 字符串内有非数字，转换失败结果为NaN
    • NaN也是number类型的数据，代表非数字

  • parseInt只保留整数 强制转换

    // 转换为整数
        console.log(parseInt('12px')) // 12
        console.log(parseInt('12.34px')) // 12
    

  • parseFloat可保留小数 强制转换

    console.log(parseFloat('12.34px')) //12.34
    console.log(parseFloat('12px')) // 12
    

拓展

写js目的为了搭配html css

<style>
   .box {
     /* w50px+h50px */
     width: 50px;
     height: 50px;

   }
 </style>

如果把50变成150，就先用parseInt或parseFloat去掉px再相加

注： '', 0, undefined, null, false, NaN转换为布尔值后都为假false，其余为真true