JavaScript数据类型的转换

合集 - web前端(29)

1.1-web前端 基础标签 、图片、超链接2023-09-192.2-web前端 音频、视频、表格、表单2023-09-193.3-web前端 css 网页样式语言，基础语言、盒子模型、浮动2023-09-194.5-web前端 定位position2023-09-195.6-web前端的特效 平面转换transfrom2023-09-196.7-web前端 空间转换，3D效果2023-09-197.8-web前端 动画 案例2023-09-198.9-web前端 flex弹性布局2023-09-199.10-JavaScript 点击事件 随机点名器2023-09-2010.11-JavaScript 逻辑条件 ，if判断 ，while循环，算数运算相关的案例演示2023-09-2311.12-web前端轮播图案例 （小米商城）2023-09-2712.css字体样式2023-10-0813.css样式对单行和多行文本的隐藏2023-10-1014.css伪类和伪元素2023-10-1215.web前端html+css页面内容的六种隐藏方式2023-10-1616.JavaScript的基础语法和数据类型2023-10-2617.JavaScript 数组Array存储方式及对象Object2023-10-27

18.JavaScript数据类型的转换2023-10-30

19.JavaScript运算符及优先级2023-10-3120.JavaScript条件判断if 语句2023-11-0121.JavaScript for循环控制语句2023-11-0222.JavaScript 其他循环语句和跳转语句2023-11-0323.JavaScript 函数、函数构造、函数调用、参数、函数返回值、变量的作用域、预解析2023-11-0424.JavaScript函数变量的生命周期，自执行函数、闭包、反转数组案例及冒泡排序案例2023-11-0425.JavaScript Array对象（属性、方法） 留言板案例2023-11-0426.JavaScript string对象（属性，方法）获取图片后缀案例 输入和输出结果转换形式案例2023-11-0727.JavaScript Date对象 、日期求差案例 、 购物秒杀倒计时、日历2023-11-1328.JavaScript事件 2023-11-1829.JavaScript BOM对象2023-11-18

收起

一、字符串类型的转换

1、自动转换

<script>
       var str = 'hello';
       var num = 100;
       console.log(str+num);
       console.log(typeof (str+num));
</script>

2、强制转换

String（），object.toString()

<script>
        //string()
       var num = 100;
       console.log(typeof num);
       console.log(typeof String(num));
</script>

object 意思为对象，一切皆为对象，所以查询date是否被强制转为字符串类型的时候，object.toString()中的object换为date

 <script>
        //object.toString()
       date = new Date()
       console.log(date);
       console.log(typeof date);
       console.log(typeof date.toString());
</script>

二、转为Number类型

1、自动转换

<script>
        console.log('hello' - 1);//NaN
        console.log('10' - 5); // 5
        console.log('100abc' - 15);//NaN
        console.log(null + 100);
        console.log(null - 100);
        console.log(true + 10);
        console.log(false + 10);
        console.log(undefined + 10);
</script>

2、强制转换

  Number() 按照自动转换规则转换

<script>
       console.log(Number('100'));
       console.log(typeof Number('100'));
        console.log(Number('100abc'));
        console.log(typeof Number('100abc'));
</script>

  parseInt(string) 、parseFloat(string)

<script>
        console.log(parseInt('12.58'));
        console.log(parseFloat('w12.58sadjk'));
        console.log(parseInt('100abc'));
        console.log(parseInt('a100abc'));
        console.log(parseInt('100ab10c'));
</script>

 

其中，如果小数转为整数类型，则取整，转为小数类型取小数、如果字符串转为整型取第一个整数到最后一个整数后面的整数不再获取，如果第一个是字符串的话，则转为NaN数字类型。

  isNaN() 函数用于检查其参数是否是非数字值

 <script>
        console.log(parseInt(isNaN('a100abc')));
        console.log(parseInt(isNaN('100ab10c')));
</script>

无论什么都转为NaN

三、转为Boolean类型

1、自动转换

在Boolean中 是false的情况：""、''、0、0.0、null、undefined、false。其他均为true

2、强制转换

Boolean()、 !!

<script>
         var str = 'hello';
         var num = 100;
         console.log(Boolean(num));
        console.log(!!str);
</script>

 

 

特殊案例:

            console.log(Boolean([])); // true

            console.log([] == false);   // true; ==两边的数据类型不一致，需要转为数字进行比较；[]=>字符串''=>数字0

            console.log(![] == false); // true  ==的优先级比较低，肯定是先算左边 ![] 然后与后面进行比较，[]转为布尔值为true 取反 false false==false

            console.log('0' == false); // true

            {} == {} // false,对象对比的是堆内存的地址

            [] == [] // false

            NaN == NaN // false

 

在==比较的过程中，数据转换的规则 类型一样的几个特殊点：

{} == {} false,对象对比的是堆内存的地址 [] == [] false NaN == NaN false

类型不一样的转换规则：

1. null == undefined true，但是换成 === 结果是false（因为类型不一致），剩下null/undefined和其他任何数据类型值都不相等

2. 字符串 == 对象，要把对象转为字符串

3. 剩下如果 == 两边数据类型不一致，都是需要转换为数字再进行比较

如果类型都是字符串，就会按照ASCII编码的进行对比