当前位置: 首页 > 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.…...

Pixel Aurora Engine部署教程:Nginx反向代理+HTTPS配置像素AI服务公网访问

Pixel Aurora Engine部署教程&#xff1a;Nginx反向代理HTTPS配置像素AI服务公网访问 1. 项目介绍与准备 Pixel Aurora Engine是一款基于AI扩散模型的高端像素艺术生成工具&#xff0c;采用复古8-bit游戏风格界面设计。通过本教程&#xff0c;您将学会如何通过Nginx反向代理和…...

Mojo加速Python科学计算:如何在72小时内将AI推理速度提升8.6倍(附完整可运行代码)

第一章&#xff1a;Mojo与Python混合编程概述Mojo 是一种为 AI 系统量身打造的现代系统编程语言&#xff0c;兼具 Python 的易用性与 C/C 的执行效率。它原生兼容 Python 生态&#xff0c;允许开发者在同一个项目中无缝调用 Python 模块、复用现有 NumPy/Torch 代码&#xff0c…...

GLM-4.1V-9B-Base部署教程:NVIDIA驱动版本兼容性验证与降级方案

GLM-4.1V-9B-Base部署教程&#xff1a;NVIDIA驱动版本兼容性验证与降级方案 1. 模型概述 GLM-4.1V-9B-Base是智谱开源的一款视觉多模态理解模型&#xff0c;专注于图像内容识别与分析任务。该模型具备以下核心能力&#xff1a; 图片内容描述与场景理解图像主体识别与定位颜色…...

驯服中点电位:I型NPC三电平逆变器离网系统建模与动态平衡策略

1. I型NPC三电平逆变器的中点电位难题 搞电力电子的兄弟们都知道&#xff0c;中点钳位型&#xff08;NPC&#xff09;三电平逆变器有个让人又爱又恨的特点——中点电位漂移。这就像你骑自行车时突然发现车把不听使唤&#xff0c;明明直线行驶却总往一边偏。在离网系统中&#x…...

忍者像素绘卷GPU算力适配:A10/A100/V100多卡推理吞吐量对比

忍者像素绘卷GPU算力适配&#xff1a;A10/A100/V100多卡推理吞吐量对比 1. 技术背景与测试目标 忍者像素绘卷作为一款基于Z-Image-Turbo深度优化的图像生成工作站&#xff0c;其核心价值在于将传统漫画创作与16-Bit复古游戏美学相结合。在实际应用中&#xff0c;GPU算力直接决…...

二手车价格预测:特征工程比调参重要10倍!我的天池赛从800分降到490分的实战复盘

二手车价格预测实战&#xff1a;如何通过特征工程将MAE从800降到490 二手车市场向来以信息不对称为特点&#xff0c;价格波动大、影响因素复杂。对于数据科学家来说&#xff0c;准确预测二手车价格不仅是一个有趣的机器学习挑战&#xff0c;更是一个极具商业价值的实际问题。在…...

ClawdBot惊艳效果案例:PaddleOCR识别模糊手写体+LibreTranslate精准输出

ClawdBot惊艳效果案例&#xff1a;PaddleOCR识别模糊手写体LibreTranslate精准输出 1. 项目概述 ClawdBot是一个可以在个人设备上运行的AI助手应用&#xff0c;它使用vllm提供后端模型能力&#xff0c;为用户提供强大的多模态处理功能。这个应用特别适合需要处理文字识别和翻…...

React-primitives项目架构剖析:模块化设计与依赖注入原理

React-primitives项目架构剖析&#xff1a;模块化设计与依赖注入原理 【免费下载链接】react-primitives Primitive React Interfaces Across Targets 项目地址: https://gitcode.com/gh_mirrors/re/react-primitives React-primitives是一个跨平台UI开发框架&#xff0…...

二叉树面试送分题|力扣101对称+226翻转(递归极简写法,手写无压力)

兄弟们&#xff01;二叉树面试中&#xff0c;有两道“送分题”必须拿捏——力扣101.对称二叉树和力扣226.翻转二叉树。这两道题难度不高&#xff0c;核心都能用递归轻松解决&#xff0c;代码简洁、逻辑直观&#xff0c;新手练一遍就能记住&#xff0c;面试手写直接加分&#xf…...

误删Anaconda?3步极速抢救指南

Anaconda被误删后抢救手册技术文章大纲数据恢复的基本原理解释数据恢复的底层机制&#xff0c;包括文件系统如何处理删除操作&#xff0c;以及为何被删除的数据仍有可能恢复。涵盖不同操作系统&#xff08;Windows、macOS、Linux&#xff09;下的差异。立即停止使用受影响磁盘强…...