– 将String类型转换为数值类型

– 将Boolean类型转换为数值类型

– 将undefined类型转换为数值类型

– 将Null类型转换为数值类型

在js中,如果想将以上四种基本数据类型转换为数值类型, 常用方法有三种

  • Number()
  • + or – 号数学运算符
  • parseInt() / parseFloat()

第一种方式 , Number(常量 or 变量) 进行转换  

注意点:不会改变原来的数值 , 会重新创建一个新的值并且返回

注意点: 如果字符串中是空 ,或者没有数值, 那么转换为Number则为 0

注意点: 如果字符串中的值不仅仅是数值 ,那么转化的类型是 NaN(非数)

转换 String 类型

   //传入变量
    let str = "123";
    console.log(typeof str);     //string
    let num = Number(str);
    console.log(typeof num);     //number
    console.log("-------");
    //传入常量
    let num1 = Number("123");
    console.log(typeof num1);    //number
    //注意点: 不会改变原来的数值 , 会重新创建一个新的值并且返回
    console.log("-------");
    // 注意点: 如果字符串中是空 ,或者没有数值, 那么转换为Number则为 0
    let str2 = "";
    let str3 = "   ";
    console.log(Number(str2));      //0
    console.log(Number(str3));      //0
    // 注意点: 如果字符串中的值不仅仅是数值 ,那么转化的类型是 NaN(非数)
    let str4 = "12px";
    console.log(Number(str4));      // NaN

转换Boolean类型

// 注意点: boolean 转 Number 类型
// true === 1
// false === 0

    let flag = true;
    console.log(typeof flag);       //boolean
    console.log(flag);              //true
    let num = Number(flag);
    console.log(num);               //1
    console.log(typeof num);        //number

    // 注意点: boolean 转 Number 类型
    //  true === 1
    //  false === 0

转换null

//注意点: 如果是 null 转数值类型 ,那么null === 0 ;

let value = null;
    console.log(typeof value);   // object
    console.log(value);          //null
    let num = Number(value);
    console.log(num);            // 0
    console.log(typeof num);     //number
    
    //注意点: 如果是 null 转数值类型 ,那么null === 0 ;

转换undefined类型

//因为undefined代表的时候未定义 , 所以转化为number 就是非数

 let value = undefined;
    console.log(value);      // undefined
    let num = Number(value);
    console.log(num);        // NaN (非数)
    
    //因为undefined代表的时候未定义 , 所以转化为number 就是非数

第二种方式

注意点:
+ 号是转换类型的时候 , 把数值改变为 正值
– 号是转换类型的时候 , 把数值改变为 负值
一般是 + 号比较常用,因为我们想到得到的值往往都是正数
+ or – 底层就是调用了 Number() ,所以用法和注意点和Number() 一样

//通过数学运算符  + 号和 - 号 进行转换
    let str = "123";
    let num1 = +str;
    let num2 = -str;
    console.log(num1);       //123
    console.log(num2);       //-123

    /*注意点:
      + 号是转换类型的时候 , 把数值改变为  正值
      - 号是转换类型的时候 , 把数值改变为  负值
      一般是 + 号比较常用,因为我们想到得到的值往往都是正数
      + or - 底层就是调用了 Number() ,所以用法和注意点和Number() 一样
    */

总结:

  • – 将String类型转换为数值类型
    • 如果字符串的都是数值,那么正常转换
    • 如果字符串中是 ” ” / ”     “,那么则转化哪位 0
    • 如果字符串中的不仅仅是数字, 那么则转换为 NaN
  •  – 将Boolean类型转换为数值类型
    • true  转换为 1
    • false 转换为0
  •  – 将undefined类型转换为数值类型
    • undefined == 未定义 ,所以转换过来就是  NaN
  •  – 将Null类型转换为数值类型
    • null == 空   所以转换过来就是  0

记忆法

空字符串 / false /null 转换之后是 0 
字符串中不仅仅是数字/ undefined  转化之后都是 NaN
其他的都是正常转换


前面两种方式都是可以将其他的四种基本类型转换为Number类型,但是因为底层都是基于Number(),所以,都有一个共同的弊端

—- 字符串中不仅仅是数字的时候, 会转化为 NaN —-

背景: 开发中,很多时候,就让我们将一个数字和字母混合的值取出来,并且只保留数字部分(12px), 而前面的两种办法都会转化为 NaN, 所以就有了第三种方法;

第三种方法:  parseInt()   /  parseFloat()

注意点:
1 . 提取顺序 从左至右
2 . parseInt 只提取整数部分, 遇到非整数,就直接返回提取结果
3 . parseFloat 除了可以提取整数部分, 还可以提取小数部分, 遇到字母则返回提取结果
4 . 提取的时候 ,如果没有提取到数值 ,那么则会返回NaN
5 . parseInt / parseFloat 会把传入的值都当做字符串来处理 ,所以 ,不能用于转换 undefined ,boolean ,null

let str1 = "12px";
    let num1 = parseInt(str1);
    let num2 = parseFloat(str1);
    console.log(num1);          //12
    console.log(num2);          //12
    console.log("-------");
    let str2 = "3.14";
    let num3 = parseInt(str2);
    let num4 = parseFloat(str2);
    console.log(num3);          //3
    console.log(num4);          //3.14
    console.log("-------");
    let test = "a123b";
    let num5 = parseInt(test);
    let num6 = parseFloat(test);
    console.log(num5);          //NaN
    console.log(num6);          //NaN
    console.log("-------");
    let flag = true;
    let num7 = parseInt(flag);
    let num8 = parseFloat(flag);
    console.log(num7);          //NaN
    console.log(num8);          //NaN
    /*
    注意点:
    1 . 提取顺序   从左至右
    2 . parseInt  只提取整数部分, 遇到非整数,就直接返回提取结果
    3 . parseFloat  除了可以提取整数部分, 还可以提取小数部分, 遇到字母则返回提取结果
    4 . 提取的时候 ,如果没有提取到数值 ,那么则会返回NaN
    5 . parseInt / parseFloat 会把传入的值都当做字符串来处理 ,所以 ,不能用于转换 undefined ,boolean ,null
    */