js数据类型显隐式转换

在JavaScript中,数据类型的转换可以分为两种主要类型:显式类型转换(Explicit Type Conversion)和隐式类型转换(Implicit Type Conversion 或 Type Coercion)。

显式类型转换(Explicit Type Conversion)

显式类型转换是程序员明确指定的类型转换,通常通过调用特定的函数或方法来实现。JavaScript提供了以下几种显式类型转换的方法:

  1. Number():将值转换为数字类型(如果转换失败则返回NaN)。
    let num = Number("123"); // 123  
    let notNum = Number("hello"); // NaN
    
  2. String() 或 toString():将值转换为字符串类型。
    let str = String(123); // "123"  
    let obj = { toString: function() { return "myObject"; } };  
    let objStr = String(obj); // "myObject"

    注意:不是所有的对象都有toString方法,如果对象没有该方法,JavaScript会调用Object.prototype.toString方法。

  3. Boolean():将值转换为布尔类型。
    let bool = Boolean(1); // true  
    let falsyBool = Boolean(0); // false
    
  4. parseInt() 和 parseFloat():将字符串转换为整数或浮点数。
    let intNum = parseInt("123"); // 123  
    let floatNum = parseFloat("123.45"); // 123.45
    

    隐式类型转换(Implicit Type Conversion 或 Type Coercion)

    隐式类型转换是JavaScript在运行时自动进行的类型转换,通常发生在运算符操作、函数参数传递或比较表达式中。

  1. 算术运算符:当算术运算符(+、-、*、/、%)用于非数字类型时,JavaScript会尝试将它们转换为数字。
    let result = 5 + "10"; // "510"(因为字符串连接优先于加法)  
    let numResult = 5 + (+"10"); // 15(通过一元+运算符将字符串"10"转换为数字)
    
  2. 比较运算符:在比较操作中,如果比较的是不同类型的值,JavaScript会尝试将它们转换为相同的类型,通常是数字或字符串。
    let compare = 5 == "5"; // true(因为字符串"5"被转换为数字5)
    
  3. 逻辑运算符:逻辑运算符(&&、||、!)期望它们的操作数是布尔值,但会接受任何类型的值,并尝试将它们转换为布尔值。
    let truthy = !!"hello"; // true(因为字符串"hello"在布尔上下文中被视为true)
    
  4. if 语句:在 if 语句中,如果测试条件不是布尔值,JavaScript会尝试将其转换为布尔值。
    if ("hello") {  console.log("This will be logged."); // 字符串"hello"在if语句中被转换为true  
    }
  5. == 和 != 运算符:这两个运算符在比较时会进行类型转换以尝试匹配它们的操作数。通常建议使用 === 和 !== 来避免不必要的类型转换和潜在的错误。

1. 隐式转换的规则

隐式类型转换(Implicit Type Conversion 或 Type Coercion)在JavaScript中是一个自动发生的过程,当运算符在运算时,如果两端的数据类型不统一,编译器会自动尝试将它们转换为相同的类型,以便执行运算。这个过程在不需要显式调用转换函数(如Number()、String()、Boolean()等)的情况下进行。

  • Object => String => Number:当对象参与非对象到对象的比较或运算时,会首先尝试将其转换为字符串(如果对象具有toString()方法,则优先使用;否则,尝试使用valueOf()方法),然后再根据需要转换为数字。
  • Boolean => Number:布尔值在参与数值运算时会被转换为数字,其中true转换为1,false转换为0。
  • undefined/null => Number:undefined和null在参与数值运算时会被转换为NaN(非数字)或0。

2. 隐式转换的场景

2.1 数值运算
  • 数字与字符串的加法:数字与字符串相加时,数字会被转换为字符串,然后进行字符串拼接。例如:"5" + 3 结果为 "53"
  • 数字与字符串的减法、乘法、除法:字符串会尝试被转换为数字,如果转换成功则进行数值运算;否则,结果为NaN。例如:"5" - 3 结果为 2,但 "hello" - 3 结果为 NaN。
2.2 逻辑运算
  • if语句中的条件判断:如果条件不是布尔值,JavaScript会尝试将其转换为布尔值。例如:if ("hello") { ... } 中,"hello"会被转换为true。
2.3 比较运算
  • == 和 != 运算符:这两个运算符在比较时会尝试将操作数转换为相同的类型。如果操作数之一是字符串,另一个是数字,字符串会尝试被转换为数字。如果转换失败,结果取决于浏览器的具体实现,但通常比较的是字符串的字符Unicode编码。
2.4 对象与字符串的相加
  • 当对象与字符串相加时,会尝试调用对象的toString()方法(如果存在)将对象转换为字符串。例如:{name: "John"} + " Doe" 可能会得到 [object Object] Doe(取决于对象的toString()方法实现)。

3. 注意事项

  • 隐式类型转换可能会导致一些不易察觉的错误,特别是在使用==!=运算符时。因此,建议尽可能使用===!==来避免隐式类型转换。
  • 当不确定一个变量是否会被隐式转换时,最好使用显式类型转换来明确你的意图。

综上所述,隐式类型转换是JavaScript在运行时为了简化开发过程而提供的一个功能。然而,由于它的自动性和不确定性,可能会导致一些难以追踪的错误。因此,在使用时需要谨慎,并尽量使用显式类型转换来明确你的意图。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/17856.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

React18+TypeScript搭建通用中后台项目实战02 整合 antd 和 axios

配置路径别名 tsconfig.json {"compilerOptions": {"target": "ES2020","useDefineForClassFields": true,"lib": ["ES2020","DOM","DOM.Iterable"],"module": "ESNext&quo…

磁盘分区和挂载

磁盘分区和挂载 一、磁盘 业务层面:满足一定的需求所是做的特定操作 硬盘是什么以及硬盘的作用 硬盘:计算器的存储设备,一个或者多个磁性的盘片做成,可以在盘片上进行数据的读写 连接方式:内部设备,外…

深度揭秘:蓝海创意云渲染农场的五大特色功能

在当今数字化时代,影视制作、效果图设计等领域对于高质量的渲染需求日益增长。在这个背景下,云渲染平台成为了行业中不可或缺的一部分,它为用户提供了高效、灵活的渲染解决方案。蓝海创意云渲染农场https://www.vsochina.com/cn/render蓝海创…

软件需求分析和软件原型开发是一会事情吗?

软件需求分析和软件原型开发是软件开发过程中的两个重要环节,它们各自承担着不同的任务,但又紧密相连,共同影响着软件项目的成功。下面将详细解释这两个环节的定义、目的以及它们之间的关系。 一、软件需求分析 定义:软件需求分析…

C++学习日记 | LAB 6 static library 静态库

资料来源:南科大 余仕琪 C/C Program Design LINK:CPP/week06 at main ShiqiYu/CPP GitHub 一、本节内容 本节主要介绍静态库和动态库。 1.1 静态库和动态库的概念 静态链接和静态库(也称为存档)是链接器将所有使用的库函数复制到可执行文件的结果。静…

Javascript中的定时器有哪些?他们的区别及用法是什么?

JavaScript 中有几种常用的定时器函数,它们的区别主要在于执行方式和行为: setTimeout(callback, delay):作用:在指定的延迟时间后执行回调函数一次。用法:通常用于延迟执行某些操作。返回值:一个定时器 ID,可用于取消定时器。setInterval(callback, delay):作用:每隔指定的延…

Linux中 “权限设置修改”

目录 一、权限 (1)权限三大类: (2)文件的权限: (3)目录的权限: (4)用户的角色: 二、文件的权限位 三、修改用户权限 &#xf…

【flutter 双端开发】

flutter 双端开发 开发小细节替换新的logo 开发小细节 替换新的logo 替换双端logo 寻找三方插件 android 打包流程 android 打包流程2

小程序唯品会Authorization sign

声明 本文章中所有内容仅供学习交流使用,不用于其他任何目的,抓包内容、敏感网址、数据接口等均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关!wx a15018601872 本文章未…

Python---Matplotlib(2万字总结)【从入门到掌握】

数据可视化 在完成了对数据的透视之后,可以将数据透视的结果通过可视化的方式呈现出来,简单的说,就是将数据变成漂亮的图表,因为人类对颜色和形状会更加敏感,然后再进一步解读数据背后隐藏的价值。在之前的文章中已经…

nacos安装与使用

1.nacos简介与安装 什么是注册中心(服务治理) 服务注册:服务提供者provider,启动的时候向注册中心上报自己的网络信息 服务发现:服务消费者consumer,启动的时候向注册中心上报自己的网络信息,拉…

JavaScript style 样式属性操作

JavaScript 中可以使用 style 对象来操作元素的样式属性。style 对象是元素的一个属性,通过它可以访问和修改元素的内联样式属性。 要访问元素的样式属性,可以使用以下语法: element.style.property 其中,element 是要操作的元…

centos7防火墙入站白名单配置

firewall-cmd --set-default-zonedropfirewall-cmd --get-active-zone记录下当前激活网卡firewall-cmd --permanent --change-interfaceens33 --zonedrop firewall-cmd --zonedrop --list-all 添加信任的源IP和开放端口 firewall-cmd --permanent --add-source192.168.254.1 -…

【OpenCV】图形绘制与填充

介绍了绘制、填充图像的API。也介绍了RNG类用来生成随机数。相关API: line() rectangle() circle() ellipse() putText() 代码: #include "iostream" #include "opencv2/opencv.hpp"using namespace std; using namespace cv…

ARM64的KASLR分析

基本概念 加载地址:内核解压到物理内存上的物理起始地址 链接地址:内核编译链接后的虚拟起始地址 我们的这篇 文章,介绍了加载地址可以是自动的,也可以是固定的;一般都是物理内存的起始地址 一个偏移 ;…

pillow学习3

Pillow库中,图像的模式代表了图像的颜色空间。以下是一些常见的图像模式及其含义: L(灰度图):L模式表示图像是灰度图像,每个像素用8位表示(范围为0-255),0表示黑色&#…

在flutter initState 方法,触发 setState导致循环执行

在Flutter中,如果你在initState中调用了一个方法,并且这个方法可能导致状态更新,这可能会引起无限循环,因为每次状态更新都会再次调用initState。 为了避免这种情况,你应该检查调用的方法是否会导致状态更新&#xff…

图算法新书发布会圆满成功,大咖现场都讲了啥?

5月24日,嬴图与机工社携手举办的“《图算法:行业应用与实践》新书发布会”圆满成功。 现场直播在线观众达4000人/次左右,点赞数量超7000,直至发布会尾声,观看人数仍在持续增长。 通过观众们的反馈,我们也对…

Matplotlib 实践指南:图形样式、风格与标记探索

目录 前言 第一点:导入模块 第二点:创建二维图 第三点:创建统计图 总结 前言 Matplotlib 是一个强大的数据可视化库,可用于创建各种类型的图形。在本文中,我们将研究如何在 Matplotlib 中设置图形的颜色、风格和标记…

【LeetCode算法】第88题:合并两个有序数组

目录 一、题目描述 二、初次解答 三、官方解法 四、总结 一、题目描述 二、初次解答 1. 思路:首次想到的解法:定义一个mn长度的辅助数组,从头遍历这两个数组,谁小就放进辅助数组中并且对应往后走,最后使用memcpy函…