JavaScript - 数据类型比较与转换

最新推荐文章于 2024-03-06 09:24:12 发布

Henry_ww

最新推荐文章于 2024-03-06 09:24:12 发布

阅读量96

点赞数

分类专栏： JavaScript 文章标签：字符串编程语言 javascript

本文链接：https://blog.csdn.net/Henry_ID/article/details/119189279

版权

JavaScript 专栏收录该内容

47 篇文章 2 订阅

订阅专栏

数据类型比较

1.1-null与undefined比较

1. undefined与null的区别，两个都表示什么都没有
- null == undefined：成立，他们的值都是空
- null === undefined：不成立，他们的值相等但是数据类型不同

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>null与undefined比较</title>
    </head>
    <body></body>
    <script>
        /*JS总共有六种数据类型，其中五种基本数据类型，一种复杂数据类型

      *（1）null与undefined有什么区别
            * null == undefined 成立
            * null === undefined 不成立

     */

        //1.null与undefined的区别：需要记忆
        console.log(null == undefined); //true  他们的值都是空
        console.log(null === undefined); //false  他们的值相等 但是数据类型不同
    </script>
</html>

1.2-NaN与isNaN

1.NaN：Not a Number 不是一个数字
- （1）NaN是number数据类型中一个特殊的数值，是数学计算错误得到的一个结果
  - 例如： '张三' - 100,在数学上这是一种错误的计算，它的结果就是NaN
- （2）NaN与任何数字都不等，包含它本身
- （3）NaN与任何数字计算得到的都是NaN
2.isNaN(数据)：检测一个数据是不是NaN 得到的结果是布尔类型
- 例如：isNaN(NaN),结果为true
- 例如：isNaN(123),结果为false，表示123不是NaN
3.了解：number类型浮点数（小数）精度丢失问题
- （1）小数在进行数学计算时，会有一定的误差，这是计算机本身的bug，不仅是js语言，其他语言也有这个问题
- （2）解决方案：不要让两个小数比较大小，这种情况一般不会影响正常开发

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body></body>
    <script>
        /*NaN:  not a number 不是一个数字
       * 1.NaN是number数据类型中一个特殊的数值，是数学计算错误得到的一个结果
       * 2.NaN与任何数字都不相等，包括它的本身
       * 3.NaN与任何数字计算得到的都是NaN
      isNaN(数据):判断一个数据是不是NaN，结果为布尔类型  true：是 false:不是
     */

        //1.NaN:not a number 不是一个数字
        //NaN是number数据类型中一个特殊的数值，是数学计算错误得到的一个结果
        let num = "张三" - 100; //当某个表达式无法计算（计算错误时），会得到NaN
        console.log(num); //NaN
        console.log(typeof NaN); //number

        //2.NaN与任何数字都不等，包含它本身
        console.log(NaN == 0); //false
        console.log(NaN == NaN); //false

        //3.NaN与任何数字计算得到的都是NaN
        console.log(NaN + 100); //NaN

        //4.isNaN(数据)：检测一个数据是不是NaN  得到的结果是布尔类型
        console.log(isNaN(NaN)); //true
        console.log(isNaN(123)); //false
        //如果检测的数据不是number类型，js编译器会尝试着将这个数据转化为number类型，然后再判断
        //这种数据类型转换称为隐式转换
        console.log(isNaN("abc")); //true

        //5.（了解即可）number浮点数（小数）精度丢失
        //小数在进行数学计算时，会有一定的误差，这是计算机本身的bug，不仅是js语言，其他语言也有这个问题
        //解决方案：不要让两个小数比较大小，这种情况一般不会影响正常开发
        console.log(0.1 + 0.2); //0.300000000000004
        console.log(0.1 + 0.2 == 0.3); //false
        console.log(0.4 + 0.5); //0.9
        console.log(1.1 - 0.2); //0.9000000000000001
    </script>
</html>

1.3-字符串比较

1.字符串比较规则是按照字母的顺序挨个进行比较，与字符串长度无关
2.字符串比较区分大小写

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>字符串比较</title>
    </head>
    <body></body>
    <script>
        /*
		1.字符串比较规则，按照字母的顺序，挨个比较
		2.字符串的比较与长度无关
		3.字符串的比较区分大小写
	*/

        // 字符串的比较是挨个比较对应顺序位置的字母，与长度无关
        console.log("abc" > "b"); // false，a比d小，所以abc比d小

        // 字符串的比较区分大小写，小写大于大写（与ASCII码表对应）
        console.log("a" > "A"); // true，a对应ASCII码表为97，A为65
    </script>
</html>

数据类型转换

1.1-显式数据类型转换

注意：数据类型的转变并不会改变原来变量的值，而是会产生一个新的值
- 例如：（1） let num = '10';
- parseInt(num) ：
为什么要有数据类型转换？
- 有时候想要进行某种计算的时候，由于数据类型不同往往会产生一些错误的结果，为了避免这种结果，我们需要将某种数据类型转化为其他数据类型
  - 例如：prompt()输入框得到的数据的类型是string，如果想要进行数学计算则需要转成number类型，否则会计算出错
什么是显示类型转换：程序员主动转换（可以理解为使用关键字来转换）
- 这种方式代码易读性更高

1-其他类型转换成number类型

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>其他类型转换成number类型</title>
    </head>
    <body></body>
    <script>
        /**转换成number
         * 第一种方式：`parseInt()`
         *          * 作用：转换整数
         *          * 从左往右解析，遇到非数字结束（停止解析），将解析好的整数返回
         *          * 如果第一个字符不是数字或者符号就返回NaN
         * 第二种方式：`parseFloat()`
         *          * 作用：转换小数
         *          * 与parseInt()最大的区别就是可以解析字符串的第一个小数点
         * 第三种方式: `Number()`
         * 作用：布尔类型转换成数字
         *         * 可以把任意值转换成数值，如果要转换的字符串只要有一个不是数字，返回NaN
         */
        console.log(Number("123")); //123
        console.log(Number("123.1.1abc")); //NaN  只要有一个字符不是数字，得到就是NaN
        console.log(parseInt("123.1.1abc")); //123  从左往右解析，遇到非数字结束
        console.log(parseFloat("123.1.1abc")); //123.1  与parseInt唯一的区别就是可以识别第一个小数点

        //一般数字字符串使用parseInt和parseFloat，其他数据类型转数字使用Number（）
        console.log(Number(true)); //1布尔类型转换number会得到数字0(false)和1（true）
        console.log(Number("")); //0  空字符串转number会得到0
        //js基础面试题可能会遇到
        console.log(Number(undefined)); //NaN
        console.log(Number(null)); //0
    </script>
</html>

2-其他类型转换成string类型

1.第一种方式：变量名.toString()
- 如果变量的值为undefined或者null，则会报错
2.第二种方式：String(变量名)
- 与第一种方式的唯一区别就是如果变量的值为undefined或者null不会报错，会得到undefined或者null

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>其他类型转换成string类型</title>
    </head>
    <body></body>
    <script>
        /**转换成字符串string
         * 第一种方式：`变量名.toString()`
         *      * 如果变量的值为undefined或者null，则会报错
         *  第二种方式：`String(变量名)`
         *      * 与第一种方式的唯一区别就是如果变量的值为undefined或者null不会报错，会得到undefined或者null
         */

        let a = null;

        //1.常用： String (  )
        //特点：可以识别undefined与null
        console.log(String(null));
        console.log(typeof String(a));

        // //2.   变量名.toString ()
        //特点：无法识别undefined与null，程序会报错
        console.log(a.toString());
    </script>
</html>

3-其他类型转换成boolean类型

只有一种方式： Boolean(变量名)
- 官网文档中有八种情况得到的false：`0、-0、null、false、NaN、undefined、或者空字符串（""）、 document.all
- 其他一切均为true
  - 关于Boolean()描述：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>其他类型转换成boolean类型</title>
    </head>
    <body></body>
    <script>
        /**转换成boolean
         * 只有一种方式:  `Boolean(变量名)`
         *      * 以下八种情况会得到false，其余的一切数据得到都是true
         *          * 数字0、-0、null、false、undefined、空字符串”“、NaN
         */

        console.log(Boolean(0)); //false
        console.log(Boolean(-0)); //false
        console.log(Boolean(null)); //false
        console.log(Boolean(false)); //false
        console.log(Boolean(undefined)); //false
        console.log(Boolean("")); //false
        console.log(Boolean(NaN)); //false
    </script>
</html>

1.2-隐式数据类型转换

显式转换：程序员主动调用语法去转换数据类型，语义更加明确

隐式转换：运算符两边数据类型不一致，编译器自动帮我们转换一致在计算，这是js的语法特点

隐式转换
- 1.转成string类型：+号两边如果有一边是字符串，则会把另一边转换成字符串，然后进行拼接
- 2.转成number类型：以下几种运算符会将任何数据转换成number类型再运算，如果无法转换则为NaN
  - 数学正号： +num
    - 当 +/-号写在一个变量名的前面，此时表示数学的正/负数
  - 自增自减（++ --）
  - 算术运算符（+ - * / %）
  - 比较运算符(> < >= <= == != === !==)
    - 说明：全等与不全等会先比较值（此时会隐式转换再比较），然后再比较数据类型
- 3.转成boolean类型：逻辑非（！）会将任何数据转为boolean类型再运算
- 4.+号有三种含义：数学正负号（转成number）、算术运算符（转成number）、字符串连接符（转成string)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>隐式数据类型转换</title>
    </head>
    <body>
        <script>
            /* 
        1. 显式转换 ： 程序员主动使用语法来转换（阅读性最高）

        2. 隐式转换 ： 如果运算符两边数据类型不一致，编译器偷偷的帮我们转成一致再计算。
            (1)其他数据类型转number :
                数学正号 : +num
                自增自减： ++ --  
                算术运算符： + - * / %
                关系运算符 : > < >= <=
            (2)其他数据类型转string : +
            (3)其他数据类型转boolean : !
        
         */

            console.log("100" - 1); // Number('100') - 1 = 100 - 1 = 99

            //1.其他数据类型转number :
            //    数学正号 : +num
            //    自增自减： ++ --
            //    算术运算符： + - * / %
            console.log(+"10"); // Number('10')

            console.log("张三" - 100); // Number('张三') - 100 = NaN - 100 = NaN
            console.log(10 - "1"); // 10 - Number('1') = 10 - 1 = 9

            //2. 其他数据类型转string : +
            console.log("1" + 1); //'1' + String(1) = '1' + '1' = '11'

            /* 
            🔔容易混淆点 ： 把算术运算符 + 转换规则  与 连接符 + 转换规则搞混淆
             */
            console.log("1" + true); //1true 连接符 ‘1’ + String(true) = '1' + 'true' = '1true'
            console.log(1 + true); //2 算术运算符  1 + Number(true) = 1 + 1 = 2

            console.log(1 + undefined); //NaN 算术 1 + Number(undefined) = 1 + NaN = NaN
            console.log(1 + null); //1 算术 1 + Number(null) = 1+ 0 = 1
            console.log("1" + null); //1null 连接 '1' + String(null) = '1' + 'null' = '1null'

            //其他数据类型转boolean : !
            //取反 ： true变false false变true
            console.log(!1); //(1)!Boolean(1) = !true = false
            console.log(!!""); //(1)!!Boolean('') (2)!!false (3)!true = false
        </script>
    </body>
</html>

Henry_ww

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript - 数据类型比较与转换

数据类型比较1.1-null与undefined比较undefined与null的区别，两个都表示什么都没有null == undefined：成立，他们的值都是空null === undefined：不成立，他们的值相等但是数据类型不同<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-e
复制链接

扫一扫