数据类型转换

• 数据类型转换：强制转换、隐式转换

3.1 强制转换

==3.1.1 强制转换为number==

1）Number

• 语法：Number(要转换的数据)

• 作用：将要转换的数据强制转换为数值类型，转换不了结果就是NaN

  var n = 10;
  var b = true;
  var nu = null;
  var u = undefined;
  var s = "30";
  ​
  //1.Number(要转换的数据) ： 将要转换的数据强制转换为数值类型，转换不了结果就是NaN
  //boolean(0,1),null(0),string(纯数字的、"")
  var b1 = Number(b);  //true  --- 1
  console.log(b1);
  console.log(Number(false));  //false --- 0
  console.log(Number(nu)); //null -- 0
  console.log(Number(u)); //undefined -- NaN
  console.log(Number(s)); //"30"  -- 30
  console.log(Number("12px")); //NaN
  console.log(Number("1a2")); //NaN
  console.log(Number("a12")); //NaN
  console.log(Number(""));//"" -- > 0

• ==结论：能转换为number类型的有：boolean(0,1),null(0),string(纯数字的、"")，其他都是NaN==

2）parseInt

• 语法：parseInt(要转换的数据)

• 作用：将要转换的数据强制转换为数值类型，从左往右开始转换，遇到不能转换的或者末尾结束，如果一开始就不能转换结果就为NaN，取整(舍弃小数部分)

  //2.parseInt(要转换的内容)：从左往右开始转换，遇到不能转换的或者是末尾的时候结束，取整(舍弃小数)
  var n = parseInt("12");
  console.log(n); //12
  console.log(parseInt("12.5")); //12  取整(舍弃小数)
  console.log(parseInt("12px")); //12
  console.log(parseInt("12px23")); //12
  console.log(parseInt("a12")); //NaN

3）parseFloat

• 语法：parseFloat(要转换的数据)

• 作用：将要转换的数据强制转换为数值类型，从左往右开始转换，遇到不能转换的或者末尾结束，如果一开始就不能转换结果就为NaN，保留小数

  //3.parseFloat(要转换的内容)：从左往右开始转换，遇到不能转换的或者是末尾的时候结束，保留小数
  console.log(parseFloat("12.5")); //12.5
  console.log(parseFloat("12")); //12
  console.log(parseFloat("12.5px")); //12.5

4）案例

• 计算总价

  <h4>商品名称：诺基亚</h4>
  <h4>价格：<span>9.9元</span></h4>
  <h4>数量：<span>4</span></h4>
  <h4>总价：<span>0元</span></h4>
  <button>计算</button>

  //1.获取元素
  var oBtn = document.getElementsByTagName("button")[0]; 
  var oSpans = document.getElementsByTagName("span");
  ​
  //2.点击计算
  oBtn.onclick = function(){
      //3.获取价格 var 变量 = 标签.innerHTML/innerText
      var price = oSpans[0].innerText;
  ​
      //4.获取数量 var 变量 = 标签.innerHTML/innerText
      var count = oSpans[1].innerText;
  ​
      //5.设置给总价 ： 标签.innerHTML/innerText = 值
      oSpans[2].innerText = parseFloat(price) * count + "元";  
  }

==3.1.2 强制转换为string==

1）String

• 语法：String（要转换的内容）

• 作用：强制转换为String 直接在数据外面加""

  //String(要转换的数据) ： 强制转换为String  直接在数据外面加""
  console.log(1,String(10));  //"10"
  console.log(1,String(true)); //"true"
  console.log(1,String(null)); //"null"
  console.log(1,String(undefined)); //"undefined"
  console.log(1,String(NaN)); //"NaN"

2）toString

• 语法：xx.toString(num)

• 作用：强制转换为string, 转换为num进制的字符串

  //xx.toString(num) : 强制转换为string,  转换为num进制的字符串 
  var n = 10;
  var b = true;
  var nu = null;
  var u = undefined;
  ​
  console.log(1,n.toString()); //"10"
  console.log(1,b.toString()); //"true"
  //null和undefined没有toString()
  // console.log(1,nu.toString()); //报错 
  // console.log(1,u.toString()); //报错

3.1.3 强制转换为Boolean

• Boolean() : 强制转换为Boolean类型 结果为true，false

  //number：非0为真
  console.log(Boolean(1)); //true
  console.log(Boolean(-1)); //true
  console.log(Boolean(3.14)); //true
  console.log(Boolean(0)); //false
  ​
  //string:有值即为真
  console.log(Boolean("0")); //true
  console.log(Boolean("*")); //true
  console.log(Boolean(" ")); //true
  console.log(Boolean("")); //false
  ​
  //null
  console.log(Boolean(null)); // false
  console.log(Boolean(undefined));//false
  console.log(Boolean(NaN));//false
  ​
  //假：0 null undefined NaN “” false

  ==假：0 null undefined NaN “” false==

3.2 小方法

3.2.1 toFixed

• xx.toFixed(n) : 保留n位小数

  //xx.toFixed(n) : 保留n位小数
  console.log((0.1 * 0.7).toFixed(2)); //0.07
  console.log((0.1 * 0.7).toFixed(3)); //0.070
  console.log((3.14159).toFixed(2));

3.2.2 isNaN

• isNaN： is not a number ： 检测当前值是不是数字 是：false 不是：true

  //isNaN： is not a number ： 检测当前值是不是数字   是：false   不是：true
  console.log(isNaN(3)); //false
  console.log(isNaN("黑")); //true
  ​
  //isNaN() 判断之前会先调用Number方法强制转换为数字
  console.log(isNaN(true)); //false    true-->1
  console.log(isNaN("")); // false  "" -- > 0