数据类型之间的转换

1.强制转换

<script>
/*number,string,boolean
  1.string,boolean--->number
  Number() ---强制转换
  parseInt()
  parseFloat()*/
  var a="12";
  var num=Number(a);
  var str="12px";
  console.log(typeof num)   //number(typeof：查看数据类型)
  console.log(num)    //12
  console.log(a)      //12
  console.log(Number(str))   //NaN  (not a number)不是一个数字
  //NaN和任何类型做运算返回的结果都是NaN
</script>

1.1.string-number转换

<script>
    /*string-number
    parseInt() 1.开头的字符必须以数字开头  2.遇到非数字的字符就停止解析
    parseFloat()  1.遇到非数字的字符继续解析
    Number-->
    局限性：只能识别纯数字的字符串
  */
   var str="12.323px";
   console.log(Number(str))   //NaN
   console.log(parseInt(str)) //12
   console.log(parseFloat(str))  //12.323
</script>

另外，parseInt还可以将其他进制的数转化为十进制

            /* JavaScript里面：
        八进制的数都是以0开头，类似：0750,060
        十六进制的数都是0x开头，类似：0xAF,0x5631 
        在ECMA3中，“070”会被当成八进制字面量，会被转化为十进制的56
        “0xAF”会被当成十六进制字面量，会被转换为175*/
        var a = 012;
                var b = 0xAF
        console.log(a);//输出会是10
                console.log(b);//输出会是175
                /*parseInt()函数提供了第二个参数：转换时使用的基数（即多少进制）*/
                var num1 = parseInt("012",8); //10  
                /*注意这里的012一定要用引号包住，否则会先被转换为10，然后成了parseInt(10,8)*/
                var num2 = parseInt("0xAF",16); //175

1.2boolean-number转换

<script>
 /*boolean-number
  Number()  1.只能识别纯数字的字符串  2.只能识别纯boolean类型
  var t=true;
  var f=false;
  var str="true"
  console.log(Number(t))  //1
  console.log(Number(f))  //0
  console.log(Number(str)) //NaN
</script>

1.3any-string

<script>
    /* String() toString()*/
  var a=1o;
  var t=true;
  console.log(typeof String(a));   //string
  console.log(typeof t.toString())  //string
</script>

1.4any-boolean

<script>
   /*Boolean()
   Tip:"" NaN undefined null 0 -->以上五种情况输出：false  其余都是true
   */
   var a=10;
   var b=0;
   var c="hello world"
   console.log(Boolean(a))  //true
   console.log(Boolean(b))  //false
   console.log(Boolean(c))  //true
   var str="";
   console.log(Boolean(null))  //false
</script>

2.自动转换

2.1加运算

<script>
    /*不需要程序员干预，js自动完成的类型转换
  场景：主要在算术计算中+,-,*,/,%
  */
  /*1.在加运算中的自动转换
  算术计算中先将两边的变量转换为Number再计算  Number()
  特殊：在加运算中，碰到字符串，+就会起到拼接符的作用
  */
   var a=1;
   var b=true;
   var c="hello world";
   var str=a+b;
   var sum=a+c;
   var d="2"
   /*var str=a+Number(b);*/
   console.log(str);   //2
   /*var sum=String(a+c)*/
   console.log(sum)   //1hello world
   console.log(a+d);  //12  
</script>

2.2减运算

<script>
/* 在算术运算中，先将变量转换为Number再计算
   特殊:在+运算中，如果有一边为字符串，+起到拼接符的作用，结果为字符串
 */
   var a=true;
   var b="3";
   var c=4;
   /*Number(a)-Number(b)*/
   console.log(a-b);  //-2
   console.log(c-b);  //1
   console.log(c-a);  //3
</script>

2.3比较运算中的自动转换

<script>
    /*>,<,>=,<=  比较运算返回的结果是boolean
  先将两边的值转换为Number在比较
  */
  var a=10;
  var b="20";
  var c="true";
  console.log(a>b);  //false
  /*Number(a)>Number(b)*/
  console.log(a>c);  //false
  /*Number(a)>Number(c)  10>NaN  NaN不能参与计算的，它和任何值做计算，返回都是NaN*/
</script>

2.4算术运算符

<script>
    /* +,-,*,/,%,++,-- */
    var a=10;
    var c=3;
    var b=2;
    b++;
    c=b++ +4;  
    console.log(a%c)  //1
    console.log(a%b)  //0
    console.log(c)   //7
</script>

2.5++/—运算

 <script>
   /* ++,-- 
   在算术运算中++在前  先自增，后运算
   ++在后  先运算，后自增
   */
   var a=10;
   a++;   //11
   /* a=a+1 */
   var b=a++ +11;  //22
   /* var b=++a +11;  //23 */
   console.log(b) 
  /*  var a=10;
  a--;
  var b=a-- -2;
  console.log(b) */
</script>

2.6.比较运算

<script>
    /*<,>,<=,>=,==,!=
  返回boolean
  */
  var a=10;
  var b=20;
  console.log(a==b)  //false
  console.log(a!=b)  //true
  console.log(a!="true")  //NaN和任何数据做！=比较时，始终返回true
  //isNaN  判断一个值是不是NaN
  console.log(isNaN(NaN))
</script>

2.7.逻辑运算

<script>
    /*&&   ||   !*/
  /*
  &&  逻辑与  两边都为true  结果才为true
  ||  逻辑或  只要有一边为true结果就为true
  !   取反
  */
  var a=20;
  var b=30;
  var c=40;
  var d=50;
  console.log(a<b && c<d)   //true
  console.log(a<b && c>d)   //false
  console.log(a<b || c>d)   //true
  console.log(!a)   //false
</script>

2.8.赋值运算

<script>
    /* +=,-=,*=,/=,%= */
  var a=10;
  a+=10;
  //a=a+10;  //a=20
  console.log(a)
</script>

2.9三目运算

<script>
    var a=10;
  var b=20;
  var c=(a>b)?"a大于b":"a小于b";//如果a>b为true  则返回结果a大于b  否则返回a小于b
  console.log(c)  //a小于b
</script>

三目运算例子

引入vue
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<body>
  <div id="app">
      <img @click="handleClick" :src="isPlay?'images/credit.jpg':'images/jiaoban.jpg'" alt="">
      <p>{{isPlay}}</p>
  </div>
  <script>
      new Vue({
      el:"#app",
      data(){
          return{
             isPlay:false
         }
      },
      methods:{
          handleClick(){
             this.isPlay=!this.isPlay
          }
      }
    })
  </script>
  </body>