当前位置: 首页 > news >正文

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

在这里插入图片描述

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

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


文章目录

  • 前言
  • 数据类型转换
    • 1,转换为字符串型
      • 1.1,利用“+”拼接转换成字符串
      • 1.2,利用String()转换成字符串
      • 1.3,利用toString()转换成字符串
      • 1.4,转换为字符串型的方法总结
    • 2,转换为数字型
      • 2.1,利用parseInt()转换成整数
      • 2.2,利用parseFloat()转换成浮点数
      • 2.3,利用Number()转换成数字型
      • 2.4,利用算术运算符隐式转换
      • 2.5,转换为数字型的方法总结
    • 3,转换为布尔型
  • 结语


前言

📜前言:小杨在上一篇带着大家一起学习了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(typeof parseInt('13.14'));
</script>

示例结果:

image-20230202234411401


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

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

示例结果:

image-20230202234516272


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

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

示例结果:

image-20230202235158536


在将不同的数据类型转换成数字型时,转换结果不同。具体如下表:

转换数据Number()和隐式转换parseInt()parseFloat
纯数字字符串转成对应的数字转成对应的数字转成对应的数字
空字符串0NaNNaN
数字开头的字符串NaN转成开头的数字转成开头的数字
非数字开头的字符串NaNNaNNaN
null0NaNNaN
undefinedNaNNaNNaN
false0NaNNaN
true1NaNNaN

知识点:

  • 在转换纯数字时,会忽略前面的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数据类型转换的相关内容有了全新地认识和理解吧,如果有什么其他的问题无法自己解决,可以在评论区留言哦!

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

在这里插入图片描述


相关文章:

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

&#x1f4c3;个人主页&#xff1a;「小杨」的csdn博客 &#x1f525;系列专栏&#xff1a;【JavaScript速成之路】 &#x1f433;希望大家多多支持&#x1f970;一起进步呀&#xff01; 文章目录前言数据类型转换1&#xff0c;转换为字符串型1.1&#xff0c;利用“”拼接转换成…...

21-绑定自定义事件

绑定自定义事件 利用自定义事件获取子组件的值 父组件给子组件绑定一个自定义事件&#xff0c;实际上是绑定到了子组件的实例对象vc上&#xff1a; <!-- 自定义myEvent事件 --> <Student v-on:myEventgetStudentName/>在父组件中编写getStudentName的实现&#…...

【Mysql】触发器

【Mysql】触发器 文章目录【Mysql】触发器1. 触发器1.1 介绍1.2 语法1.2.1 创建触发器1.2.2 查看触发器1.2.3 删除触发器1.2.4 案例1. 触发器 1.1 介绍 触发器是与表有关的数据库对象&#xff0c;指在insert、update、delete之前(BEFORE)或之后(AFTER)&#xff0c;触发并执行…...

CODESYS开发教程11-库管理器

今天继续我们的小白教程&#xff0c;老鸟就不要在这浪费时间了&#x1f60a;。 前面一期我们介绍了CODESYS的文件读写函数库SysFile。大家可能发现了&#xff0c;在CODESYS的开发中实际上是离不开各种库的使用&#xff0c;其中包括系统库、第三方库以及用户自己开发的库。实际…...

【UnityAR相关】Unity Vuforia扫图片成模型具体步骤

1 资产准备 导入要生成的fbx模型&#xff08;带有材质&#xff09;&#xff0c; 你会发现导入fbx的材质丢失了&#xff1a; 选择Standard再Extract Materials导出材质到指定文件夹下&#xff08;我放在Assets->Materials了 ok啦&#xff01; 材质出现了&#xff0c; 模型…...

2023年全国最新保安员精选真题及答案2

百分百题库提供保安员考试试题、保安职业资格考试预测题、保安员考试真题、保安职业资格证考试题库等&#xff0c;提供在线做题刷题&#xff0c;在线模拟考试&#xff0c;助你考试轻松过关。 21.一般来说&#xff0c;最经济的巡逻方式是&#xff08;&#xff09;。 A:步巡 B:…...

keil5安装了pack包但是还是不能选择device

一开始&#xff0c;我以为是keil5无法安装 STM32 芯片包&#xff0c;打开device倒是可以看到stm公司的芯片包&#xff0c;但是没有我想要的stm32f1。 我按照网上的一些说法&#xff0c;找到了这个STM32F1 的pack芯片包&#xff0c;但是我双击安装的时候&#xff0c;它的安装位…...

秒杀系统设计

1.秒杀系统的特点 瞬时高并发 2.预防措施 2.1.流量限制 对于一个相同的用户&#xff0c;限制请求的频次对于一个相同的IP&#xff0c;限制请求的频次验证码&#xff0c;减缓用户请求的次数活动开启之前&#xff0c;按钮先置灰&#xff0c;防止无效的请求流入系统&#xff0…...

全面认识数据指标体系

什么是数据指标体系&#xff1f; 看了下百度百科&#xff0c;竟然没有数据指标这个词条&#xff0c;看来这个词大家平时还用的不多啊。那只有间接偷懒一下&#xff0c;分别查下指标和数据这两个词条的含义&#xff0c;在组合起来看看。 数据&#xff1a;数据是指对客观事件进…...

热榜首推!阿里内部都在用的Java后端面试笔记,主流技术全在里面了!备战2023Java面试,拿理想offer

纵观今年的技术招聘市场&#xff0c; Java依旧是当仁不让的霸主 &#xff01;即便遭受 Go等新兴语言不断冲击&#xff0c;依旧岿然不动。究其原因&#xff1a;Java有着极其成熟的生态&#xff0c;这个不用我多说&#xff1b;Java在 运维、可观测性、可监 控性方面都有着非常优秀…...

Android架构设计——【 APT技术实现butterknife框架 】

APT简介 APT英文全称&#xff1a;Android annotation process tool是一种处理注释的工具&#xff0c;它对源代码文件进行检测找出其中的Annotation&#xff0c;使用Annotation进行额外的处理。 Annotation处理器在处理Annotation时可以根据源文件中的Annotation生成额外的源文…...

线程的基本概念

文章目录基础概念线程与进程什么是进程&#xff1f;什么是线程&#xff1f;进程和线程的区别&#xff1a;多线程什么是多线程&#xff1f;多线程的局限性串行、并行、并发同步异步、阻塞非阻塞线程的创建1、继承Thread类&#xff0c;重写run方法2、实现Runnable接口&#xff0c…...

java面试题中常见名词注解

一.常见名词注解 1.mysql索引&#xff0c;索引数据结构&#xff0c;hash&#xff0c;二叉树&#xff0c;B树&#xff0c;B树&#xff0c;红黑树&#xff0c; mysql索引&#xff1a;帮助mysql高效获取数据的数据结构&#xff0c;通俗来说&#xff0c;数据库索引就好比一本书的…...

SpringAOP从入门到源码分析大全,学好AOP这一篇就够了(二)

文章目录系列文档索引四、Spring AOP的使用入门1、激活AspectJ模块&#xff08;1&#xff09;注解激活&#xff08;2&#xff09;XML激活2、创建 AspectJ 代理&#xff08;了解&#xff09;&#xff08;1&#xff09;编程方式创建 AspectJ 代理实例&#xff08;2&#xff09;XM…...

华为OD机试 - 斗地主(C++) | 附带编码思路 【2023】

刷算法题之前必看 参加华为od机试,一定要注意不要完全背诵代码,需要理解之后模仿写出,通过率才会高。 华为 OD 清单查看地址:https://blog.csdn.net/hihell/category_12199283.html 华为OD详细说明:https://dream.blog.csdn.net/article/details/128980730 华为OD机试题…...

【存储】etcd的存储是如何实现的(3)-blotdb

前两篇分别介绍了etcd的存储模块以及mvcc模块。在存储模块中&#xff0c;提到了etcd kv存储backend是基于boltdb实现的&#xff0c;其在boltdb的基础上封装了读写事务&#xff0c;通过内存缓存批量将事务刷盘&#xff0c;提升整体的写入性能。botldb是etcd的真正的底层存储。本…...

基于MATLAB开发AUTOSAR软件应用层模块-part21.SR interface通信介绍(包括isupdated判断通信)

这篇文章我们介绍最后一种interface,即Sender-Receiver Interface,这种通信方式是autosar架构中最常用的的通信方式,即一个SWC发送数据,另一个SWC接收数据,实现数据交互。下边我们介绍下这篇文章主要介绍的内容: 目录如下: 如何配置SR interface,实现SR 通信介绍含有…...

Kotlin新手教程八(泛型)

一、泛型 1.泛型类的创建与实例化 kotlin中泛型类的创建与实例化与Java中相似&#xff1a; class A<T>(t:T){var valuet }fun main() {var a:A<Int> A<Int>(11) }Kotlin中存在类型推断&#xff0c;所以创建实例可以写成&#xff1a; var aA(11)2.泛型约束…...

性能测试知多少?怎样开展性能测试

看到好多新手&#xff0c;在性能需求模糊的情况下&#xff0c;随便找一个性能测试工具&#xff0c;然后就开始进行性能测试了&#xff0c;在这种情况下得到的性能测试结果很难体现系统真实的能力&#xff0c;或者可能与系统真实的性能相距甚远。 与功能测试相比&#xff0c;性能…...

code-breaking之javacon

JAVACON 题目 此题 来自P神 的code-breaking中的一道Java题&#xff0c;名为javacon&#xff0c;题目知识点为SpEL注入 题目下载地址&#xff1a;https://www.leavesongs.com/media/attachment/2018/11/23/challenge-0.0.1-SNAPSHOT.jar 运行环境 java -jar challenge-0.…...

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

JavaScript 中的 ES|QL:利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...