JavaScript数据类型转换——转换成Number类型

一:使用Number()函数

字符串转数字

  • 如果是纯数字的字符串,则直接将其转换为数字
    var str1 = "123";
    var res1 = Number(str1);
    console.log(res1); // 123
    console.log(typeof  res1); // number
  • 如果字符串中有非数字的内容,则转换为NaN
    var str2 = "123ab";
    var res2 = Number(str2);
    console.log(res2); // NaN
  • 注意点:挖坑,数字字符串内有 + - 是正负号,会正常转换,而不是NaN(详情见运算符章节)
  var nums = "+100";
  var reses = Number(nums);
  console.log(reses);  //100
  var nums2 = "-100";
  reses2 = Number(nums2);
  console.log(reses2);  //-100
  • 如果字符串是一个空串或者是一个全是空格的字符串,则转换为0
    var str3 = "";
    var res3 = Number(str3);
    console.log(res3); // 0

    var str4 = "    ";
    var res4 = Number(str4);
    console.log(res4); // 0

布尔转数字

  • true转换为1, false转换为0
    var flag1 = true;
    var flag2 = false;
    // true --> 1
    var res3 = Number(flag1);
    console.log(res3);

    // false --> 0
    var res4 = Number(flag2);
    console.log(res4);

null转数字

  • null转换为0
   // null --> 0
    var n = null;
    var res5 = Number(n);
    console.log(res5);  //0
    var res05 = Number(null);
    console.log(res05);  //0

undefined转数字

  • undefined转换为NaN
    // NaN -- > Not a Number
    var u = undefined;
    var res6 = Number(u);
    console.log(res6);
  • 总结:
    • 空字符串/false/null --> 0
    • 不仅仅包含数字的字符串和undefined --> 转换为NaN
    • 其它的正常转换

二:利用 + - 算数运算符来转换

  • 在需要转换的类型前面加上+加号或者-减号即可
  • 注意点:
    +加号不会改变数据的正负性
    -减号会改变数据的正负性
    var str1 = "123";
    var str2 = "3.14";
    var flag1 = true;
    var flag2 = false;
    var n = null;
    var u = undefined;

    var res1 = +str1;
    console.log(res1);  //123
    console.log(typeof res1);

    var res2 = -str1;
    console.log(res2);  //-123
    console.log(typeof res2);

    var res3 = +str2;
    console.log(res3);  //3.14

    var res4 = +flag1;
    console.log(res4);  //1

    var res5 = +flag2;
    console.log(res5);  //0

    var res6 = +n;
    console.log(res6);  //0

    var res7 = +u;
    console.log(res7);  //NaN

三:通过parseInt()/parseFloat()函数转换

  • 通过Number函数或者通过+-运算符转换, 都不能转换复杂的字符串,如"12px"
    var str1 = "12px";
    var res1 = Number(str1); // NaN
    console.log(res1);
    var res2 = +str1; // NaN
    console.log(res2);
  • 所以就有第三种转换的方式, 通过parseInt()/parseFloat()函数提取数字
    • parseInt: 只能提取整数
    • 如果第一位不是有效数字, 什么都提取不到, 会返回NaN
    • 第一个参数是要转换的字符串,第二个参数是要转换的进制
     var str1 = "3.14px";
     var res1 = parseInt(str1);
     console.log(res1);  //3
     console.log(typeof res1); //number
    
    • parseFloat:可以提取小数
    • 如果第一位不是有效数字, 什么都提取不到
    • 不支持第二个参数,只能解析10进制数
    • 如果解析的内容里只有整数,解析成整数
    var res2 = parseFloat(str1);
    console.log(res2);  //3.14
    console.log(typeof res2); //number
    
  • parseInt/parseFloat , 会从左至右的提取, 一旦被中断后续的就提取不到了
    var str = "12px666px";
    var res1 = parseInt(str);
    console.log(res1);  //12
  • 对于parseFloat来说, 只能提取一个.遇到第二个.或者非数字结束
    var str = "3.14.15px";
    var res1 = parseFloat(str);
    console.log(res1);  //3.14
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。