0


【JavaScript速成之路】JavaScript数据类型转换

在这里插入图片描述

📃个人主页:「小杨」的csdn博客
🔥系列专栏:【JavaScript速成之路】

🐳希望大家多多支持🥰一起进步呀!


文章目录


前言

📜前言:小杨在上一篇带着大家一起学习了JavaScript中的数据类型,想必大家对JavaScript数据类型已经有所了解了,那么今天我们将继续带着大家学习一下JavaScript中的数据类型转换的相关知识,希望大家收获多多!


数据类型转换

1,转换为字符串型

1.1,利用“+”拼接转换成字符串

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

示例结果:

image-20221006173843477


1.2,利用String()转换成字符串

<script>var num =13.14;var str =String(num);
    console.log(str);
    console.log(typeof str);</script>

示例结果:

image-20221006174511247


1.3,利用toString()转换成字符串

<script>var num =13.14;var str = num.toString();
    console.log(str);
    console.log(typeof str);</script>

示例结果:

image-20221006174341808

知识点:

  • console.log()可以输出多个值,中间用逗号隔开。
  • null和undefined无法使用toString()方式进行转换。
  • 对于数字型的变量,可以在toString()的小括号中传入参数进行进制转换。

为了更好地理解toString()传入参数进行进制转换,示例如下:

<script>var num =5;
    console.log(num.toString(2));//num.toString(2)将5转为二进制,结果101</script>在这里插入代码片

示例结果:

image-20221006223202106


1.4,转换为字符串型的方法总结

为了更好地理解转换为字符串型的各种方法,示例如下:

<script>//方式1:利用“+”拼接转换成字符串型var num =13.14;var str = num +'';
    console.log(str);
    console.log(typeof str);//方式2:利用String()将数字型转换成字符串型var num =13.14;var str =String(num);
    console.log(str);
    console.log(typeof str);//方式3:利用toString()将数字型转换成字符串型var num =13.14;var str = num.toString();
    console.log(str);
    console.log(typeof str);</script>

示例结果:

image-20230202234204085

知识点:

  • 利用+拼接的方式属于隐式转换,而利用toString()和String()方式进行转换属于显示转换。
  • 显式转换是手动进行的,也称强制类型转换,它的转换不是被动发生的,而是开发人员主动进行了转换。
  • 隐式转换是自动发生的,当操作的两个数据类型不同时,JavaScript会按照既定的规则来进行自动转换,针对不同的数据类型有不同的处理方式。

2,转换为数字型

2.1,利用parseInt()转换成整数

<script>
    console.log(parseInt('13.14'));
    console.log(typeofparseInt('13.14'));</script>

示例结果:

image-20230202234411401


2.2,利用parseFloat()转换成浮点数

<script>
    console.log(parseFloat('78'));
    console.log(typeofparseFloat('78'));</script>

示例结果:

image-20230202234516272


2.3,利用Number()转换成数字型

<script>
    console.log(Number('13.14'));
    console.log(typeofNumber('13.14'));</script>

示例结果:

image-20230202234616895


2.4,利用算术运算符隐式转换

<script>
    console.log('78'-1);
    console.log(typeof'78'-1);</script>

示例结果:

image-20230202234705311


2.5,转换为数字型的方法总结

为了更好地理解转换为数字型的各种方法,示例如下:

<script>//方式1:利用parseInt()将字符串转换成整数
    console.log(parseInt('13.14'));
    console.log(typeofparseInt('13.14'));//方式2:利用parseFloat()将字符串转换成浮点数
    console.log(parseFloat('78'));
    console.log(typeofparseFloat('78'));//方式3:利用Numbert()将字符串转换成数字型
    console.log(Number('13.14'));
    console.log(typeofNumber('13.14'));//方式4:利用算术运算符(+,-,*)隐式转换
    console.log('78'-1);
    console.log(typeof'78'-1);</script>

示例结果:

image-20230202235158536


在将不同的数据类型转换成数字型时,转换结果不同。具体如下表:
转换数据Number()和隐式转换parseInt()parseFloat纯数字字符串转成对应的数字转成对应的数字转成对应的数字空字符串0NaNNaN数字开头的字符串NaN转成开头的数字转成开头的数字非数字开头的字符串NaNNaNNaNnull0NaNNaNundefinedNaNNaNNaNfalse0NaNNaNtrue1NaNNaN
知识点:

  • 在转换纯数字时,会忽略前面的0,如字符串“013”会转换为13。如果数字的开头有+,会被当成正数,-会被当成负数。
  • 使用parseInt可以利用第二的参数设置转换的进制。

为了更好地理解parseInt相关用法,示例如下:

<script><!--parseInt相关用法-->
    console.log(parseInt('013'));
    console.log(parseInt('120px'));
    console.log(parseInt('+120px'));
    console.log(parseInt('-120px'));<!--parseInt进制转换,将前面的进制数转换为十进制-->
    console.log(parseInt('010',2));
    console.log(parseInt('16',10));
    console.log(parseInt('F',16));</script>

示例结果:

image-20230202235408833


3,转换为布尔型

将其他数据类型转换为布尔型使用Boolean()。

在转换时,代表空,否定的值会被转换成false,如空字符串,0,NaN,null,undefined,其余的都转换成true。

为了更好地理解上述语法,示例如下:

<script>
    console.log(Boolean(''));
    console.log(Boolean('小杨'));
    console.log(Boolean(0));
    console.log(Boolean(1));
    console.log(Boolean(NaN));
    console.log(Boolean(null));
    console.log(Boolean(undefined));</script>

示例结果:

image-20230202235450283


结语

这就是本期博客的全部内容啦,想必大家已经对JavaScript数据类型转换的相关内容有了全新地认识和理解吧,如果有什么其他的问题无法自己解决,可以在评论区留言哦!

最后,如果你觉得这篇文章写的还不错的话或者有所收获的话,麻烦小伙伴们动动你们的小手,给个三连呗(点赞👍,评论✍,收藏📖),多多支持一下!各位的支持是我最大的动力,后期不断更新优质的内容来帮助大家,一起进步。那我们下期见!

在这里插入图片描述



本文转载自: https://blog.csdn.net/m0_64338546/article/details/128842058
版权归原作者 小杨MiManchi 所有, 如有侵权,请联系我们删除。

“【JavaScript速成之路】JavaScript数据类型转换”的评论:

还没有评论