首页 > 其他分享 >js中的强制类型转换、运算符、关系运算符、逻辑运算符、条件运算符

js中的强制类型转换、运算符、关系运算符、逻辑运算符、条件运算符

时间:2022-12-13 15:35:21浏览次数:43  
标签:类型转换 console log js 运算符 result var true

1、强制类型转换Number

1.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>强制类型Number</title>
    <style type="text/css"> </style>

    <script type="text/javascript">

         /*

          将其他的数据类型转换为number
            转换方式一:
                    使用Number函数
                        字符串转换为数字
                            1、如果纯数字的字符串,直接转换为数字
                            2、如果字符串中有非数字的内容,则转换为NaN
                            3、如果字符串是一个空串或者是一个全是空格的字符,则转换为0
                        
                        Boolean转数字:
                            1、true 转换 1
                            2、false 转换 0
                        
                        Null 转换为 数字 0

                        Undefined  转换为数字 NaN

            转换方式二:

                                        
        
        */

        var a = "123";
        a = Number(a)
        console.log("字符串转换为number:"+typeof a);


        var b = "123px"

            // parseInt()可以将一个字符串中的有效的整数内容取出来,然后转换为Number
           b = parseInt(b)
           console.log("parseInt:"+b);

        //    parseFloat()可以取出小数位
        var c = "123.21px"
            c = parseFloat(c);
            console.log("parseFloat:"+c);

        var d = true;
        d = d.toString();
        console.log(typeof d);

        // 如果对非String使用parseInt()或parseFloat(),它会先将其转换为String,然后在操作

        d = parseFloat(d);
        console.log(d);


    </script>
</head>

<body>



</body>

</html>

1.2 测试结果

在这里插入图片描述

2、进制表示

2.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>标题</title>
    <style type="text/css"> </style>

    <script type="text/javascript">
            /*

                在JS中需要表示16进制的数字,则需要以0X开头  

                 如果需要表示8进制的数字,则需要以0开头

                 表示二进制: 需要0b开头


            */

            var a ;
            //十六进制
            a = 0X123;
            a = 0X431;
            console.log("16进制:"+a);

            //八进制
            a = 021;
            a = 032;
            console.log("8进制:"+a);

            //二进制
            a = 0b10;
            console.log("2进制"+a);


    </script>
</head>

<body>



</body>

</html>

2.2 测试结果

在这里插入图片描述

3、强制类型转换为Boolea

3.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>转换boolean</title>
    <style type="text/css"> </style>

    <script type="text/javascript">

    /*

                    将其它的数据类型转换为Boolean
                                  使用Boolean()函数

                                  数字--->布尔
                                            - 除了0和NaN,其余的都是true
                                  
                                  字符串--->布尔
                                              - 除了空串,其余的都是true
                                  null和undefined 都会转换为false

                                  对象也会转换为 true

    */


                              var a = null;
                              a = Boolean(a);
                              console.log(a);

                              a = "123";
                               a = Boolean(a);
                              console.log(a);  

                              a = 123;
                               a = Boolean(a);
                              console.log(a);

                              a = "";
                               a = Boolean(a);
                              console.log(a);
    </script>
</head>

<body>



</body>

</html>

3.2 测试结果

在这里插入图片描述

4、运算符

4.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>运算符</title>
    <style type="text/css"> </style>

    <script type="text/javascript">

    /*

                     运算符也叫操作符
                            通过运算符可以对一个或者多个值进行运算,同时获得运算结果
                                  例如:typeof就是运算符,可以获得一个值的类型
                                                        它会将该值的类型以字符串的形式返回
                                                        number string  undefined Boolean object


                    算数运算符:
                             当对非number的值进行运算的时候,会首先将这些值转换为number
                             任何值和NaN做运算都得NaN

                            +:对两个值进行加法运算,并将结果返回
                                        - 如果对两个字符串进行加操作,进行拼串操作
                                        - 任何值和字符串进行加法操作,都会先转换为字符串,然后进行拼串操作

                            -:可以对两个值进行减法运算,将非number转换为number

                            *:可以对两个值进行乘法运算

                            /:可以对两个值进行除法运算

                            %:取模运算,取余数
                            


    */

       var a = 123;
       a = typeof a;
       console.log(a);

       var result ;
       result = true + false;
       console.log(result);

       result = "你好"+"大水果!!!";
       console.log(result);
       

       result = "hello--"+
                  "my--"+
                  "son";
        console.log(result);

        //任何值和字符串相加都会转换为字符串
     

        result = true + "js";
       console.log(result);

          /*
             我们可以利用这一特点,来将一个任意的数据类型转换为String
              我们只需要为任意的数据类型+一个 "" 就可以将其转换为String
              隐式的类型转换,由浏览器自动完成,实际上也是调用了String()
          */

       var a = 123 +"";
       console.log(typeof a);


       result = 1+2+"4";//34   自左向右执行执行到3+"4"的时候,3转换为字符串,然后和4进行拼串操作
       console.log(result);

       result = "2"+3+4;//234    3转换为字符串和2进行拼串,然后23字符串和数字4进行相加,数字4转换为字符串和23进行拼串
        console.log(result);


        result = 100 - "123jdjd";
        console.log(result);//NaN
    </script>
</head>

<body>



</body>

</html>

4.2 测试结果

在这里插入图片描述

5、自增自减

5.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>自增自减</title>
    <style type="text/css"> </style>

    <script type="text/javascript">

    /*
                  自增:
                      让变量在在自身的基础上加1
                      对于一个变量自增以后,原变量的值会立即自增1
                      自增分为两种:后++(a++)   前++(++a)

                      a++的值等于原变量的值
                      ++a的值等于原变量自增后的值

                 自减:同自增理解


    */

                   var a = 3;
                   console.log(a++);//3
                   console.log(++a);//5

                   var b =5;

                   console.log(b--);//5
                   console.log(--b);//3




    </script>
</head>

<body>



</body>

</html>

5.2 测试结果

在这里插入图片描述

6、与、或、非

6.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>逻辑运算符</title>
    <style type="text/css"> </style>

    <script type="text/javascript">
    
    /*

                 JS中有三种运算符:

                 !:非
                        所谓非运算符就是对一个布尔值进行取反操作,
                        true变为false ,false变为true

                        如果对非布尔值进行运算,首先转换为布尔值,然后取反

                 && : 和两边条件都成立
                     第一个值为true,会检查第二个元素
                     第一个值为false,不会检查第二个元素

                 ||: 两边条件满足其一
                      第一个值为true,不会检查第二个元素
                      第一个值为false,会检查第二个元素
                     

    */


                                var a = 123;
                                a = !a;
                                console.log(a);

                                true && console.log("检查了右边");
                                false && console.log("检查了右边");

                                    


    </script>
</head>

<body>



</body>

</html>

6.2 测试结果

在这里插入图片描述

7 赋值运算符

7.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>赋值运算符</title>
    <style type="text/css"> </style>

    <script type="text/javascript">
                  /*
                   可以将负号右侧的值赋值给左侧

                   var a = 3;
                   a += a;  等价于  a = a + 3;

                   a -= a;  等级于  a = a-3;

                   a *= a;  等价于  a = a * a;

                   a /= a;  等价于  a = a / a;

                   a %= a;  等价于  a = a % a;

                   */


    </script>
</head>

<body>



</body>

</html>

8、关系运算符

8.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>关系运算符</title>
    <style type="text/css"> </style>

    <script type="text/javascript">

    /*

                     通过关系运算符可以比较两个值之间的大小关系,  任何值和NaN做比较都是false
                          关系成立返回true,否则返回false
                        
                        >: 
                          判断左侧的内容是否大于右侧的内容,成立返回true
                        >=
                        <
                        <=
                        ==
                        === 不会对比较的内容进行转换,比较类型和内容是否相等

                        非数值的情况
                          - 对于非数值进行比较,会将其转换为数字然后在比较
                          - 如果符号两侧的值都是字符串,不会将其转换为数字进行比较,而会分别比较字符串中字符的Unicode

    */

                         console.log("dkdk" > "eerr")


    </script>
</head>

<body>



</body>

</html>

9、条件运算符

9.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>条件运算符</title>
    <style type="text/css"> </style>

    <script type="text/javascript">
    /*

                   条件运算符也叫三目运算符
                                    语法:
                                    条件表达式? 语句1:语句2;

                                    执行的流程:先判断条件,符合执行语句1,否则执行语句2


    */
                       
             var a = 5;
             var b = 8;
             a > b ? console.log("a大于b"):console.log("a小于b");
                     
    </script>
</head>

<body>



</body>

</html>

9.2 测试结果

在这里插入图片描述

10 、优先级

  • 一般使用括号修改优先级的顺序 在这里插入图片描述

标签:类型转换,console,log,js,运算符,result,var,true
From: https://blog.51cto.com/u_15740728/5932324

相关文章

  • thinkphp6 json(captcha())为空
    首先:composerrequiretopthink/think-captchav3.0.8  把这张图片下载,后缀名png改成zip,解压到:vendor/topthink ......
  • python json into xlsx
    #--coding:utf-8--**#+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++#pipinstallpandas#pipinstallopenpyxl####http://192:8090/......
  • js字符串转字节stringToByte
    functionstringToByte(str){varlen,c;len=str.length;varbytes=[];for(vari=0;i<len;i++){c=str.charCodeAt(i);......
  • Cookie&jsp入门
    会话技术1,会话:一次会话中包含多次请求和响应一次会话:浏览器第一次给服务器资源发送请求,会话建立,直到有一方断开为止。2,功能:在一次会话范围内多次请求间共享数据。3,方式:1,......
  • HTML Js
    HTML<noscript>标签HTML <noscript> 标签定义了替代内容,这些内容将显示给在浏览器中禁用了脚本或浏览器不支持脚本的用户:<script>document.getElementById("demo")......
  • GraphQL.js All In One
    GraphQL.jsAllInOnerefs©xgqfrms2012-2020www.cnblogs.com/anonymous007发布文章使用:只允许注册用户才可以访问!原创文章,版权所有©️anonymous007,禁止转......
  • 对JS继承的研究--------------引用
    问:类继承和原型继承不是同一回事儿吗,只是风格选择而已?答:不是!类继承和原型继承不论从本质上还是从语法上来说,都是两个截然不同的概念。二者之间有着区分彼此的本质性特征。要......
  • html+css+js简易笔记
    html基本结构<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="view......
  • 2022-12-13 js判断对象是否为空
    第一种:json.stringifyvara={};console.log(JSON.stringify(a)=='{}');第二种:es6的Object.keysvara={};varb=Object.keys(b);console.log(b.length)......
  • c运算符优先级
    C语言的运算符包括单目运算符、双目运算符、三目运算符,优先级如下:第1优先级:各种括号,如()、[]等、成员运算符.;第2优先级:所有单目运算符,如++、–、!、~等;第3优先级......