JavaScript 中的类型转换机制(详细讲解)

文章目录

    • 一、概述
    • 二、显示转换
      • Number()
      • parseInt()
      • String()
      • Boolean()
    • 三、隐式转换
      • 自动转换为布尔值
      • 自动转换成字符串
      • 自动转换成数值

一、概述

前面我们讲到,JS中有六种简单数据类型:undefinednullbooleanstringnumbersymbol,以及引用类型:object

但是我们在声明的时候只有一种数据类型,只有到运行期间才会确定当前类型

上面代码中,x的值在编译阶段是无法获取的,只有等到程序运行时才能知道

虽然变量的数据类型是不确定的,但是各种运算符对数据类型是有要求的,如果运算子的类型与预期不符合,就会触发类型转换机制

常见的类型转换有:

  • 强制转换(显示转换)
  • 自动转换(隐式转换)

二、显示转换

显示转换,即我们很清楚可以看到这里发生了类型的转变,常见的方法有:

  • Number()
  • parseInt()
  • String()
  • Boolean()

Number()

将任意类型的值转化为数值

先给出类型转换规则:

实践一下:

Number(324) // 324

// 字符串:如果可以被解析为数值,则转换为相应的数值
Number('324') // 324

// 字符串:如果不可以被解析为数值,返回 NaN
Number('324abc') // NaN

// 空字符串转为0
Number('') // 0

// 布尔值:true 转成 1,false 转成 0
Number(true) // 1
Number(false) // 0

// undefined:转成 NaN
Number(undefined) // NaN

// null:转成0
Number(null) // 0

// 对象:通常转换成NaN(除了只包含单个数值的数组)
Number({a: 1}) // NaN
Number([1, 2, 3]) // NaN
Number([5]) // 5

从上面可以看到,Number转换的时候是很严格的,只要有一个字符无法转成数值,整个字符串就会被转为NaN

parseInt()

parseInt相比Number,就没那么严格了,parseInt函数逐个解析字符,遇到不能转换的字符就停下来

String()

可以将任意类型的值转化成字符串

给出转换规则图:

实践一下:

// 数值:转为相应的字符串
String(1) // "1"

//字符串:转换后还是原来的值
String("a") // "a"

//布尔值:true转为字符串"true",false转为字符串"false"
String(true) // "true"

//undefined:转为字符串"undefined"
String(undefined) // "undefined"

//null:转为字符串"null"
String(null) // "null"

//对象
String({a: 1}) // "[object Object]"
String([1, 2, 3]) // "1,2,3"

Boolean()

可以将任意类型的值转为布尔值,转换规则如下:

实践一下:

Boolean(undefined) // false
Boolean(null) // false
Boolean(0) // false
Boolean(NaN) // false
Boolean('') // false
Boolean({}) // true
Boolean([]) // true
Boolean(new Boolean(false)) // true

三、隐式转换

在隐式转换中,我们可能最大的疑惑是 :何时发生隐式转换?

我们这里可以归纳为两种情况发生隐式转换的场景:

  • 比较运算(==!=><)、ifwhile需要布尔值地方
  • 算术运算(+-*/%

除了上面的场景,还要求运算符两边的操作数不是同一类型

自动转换为布尔值

在需要布尔值的地方,就会将非布尔值的参数自动转为布尔值,系统内部会调用Boolean函数

可以得出个小结:

  • undefined
  • null
  • false
  • +0
  • -0
  • NaN
  • “”

除了上面几种会被转化成false,其他都换被转化成true

自动转换成字符串

遇到预期为字符串的地方,就会将非字符串的值自动转为字符串

具体规则是:先将复合类型的值转为原始类型的值,再将原始类型的值转为字符串

常发生在+运算中,一旦存在字符串,则会进行字符串拼接操作

'5' + 1 // '51'
'5' + true // "5true"
'5' + false // "5false"
'5' + {} // "5[object Object]"
'5' + [] // "5"
'5' + function (){} // "5function (){}"
'5' + undefined // "5undefined"
'5' + null // "5null"

自动转换成数值

除了+有可能把运算子转为字符串,其他运算符都会把运算子自动转成数值

'5' - '2' // 3
'5' * '2' // 10
true - 1  // 0
false - 1 // -1
'1' - 1   // 0
'5' * []    // 0
false / '5' // 0
'abc' - 1   // NaN
null + 1 // 1
undefined + 1 // NaN

null转为数值时,值为0undefined转为数值时,值为NaN

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

你知道为什么输电线路除冰采用的是直流电而不是交流电呢?

2月22日以来&#xff0c;受新一轮寒潮影响&#xff0c;四川地区气温骤降&#xff0c;多地出现了零摄氏度以下的低温和冰冻天气&#xff0c;泥巴山、蓑衣岭等微气象区域20条500千伏线路出现不同程度覆冰&#xff0c;其中500千伏石雅四回线路覆冰最为严重&#xff0c;导线和铁塔上…

程序员在面试过程中需要重点关注的问题

在金三银四这个关键的求职季节&#xff0c;程序员面试的成功与否往往决定了他们能否获得心仪的工作机会。在这篇文章中&#xff0c;我将详细介绍程序员在面试过程中需要重点关注的问题&#xff0c;并提供一些实用的建议和技巧。 一、了解自己和职位要求 在面试之前&…

在线绘图利器:支持在线使用的电脑画图软件推荐!

计算机绘图软件是现代设计师和创作者必不可少的工具之一。伴随着技术的不断发展&#xff0c;越来越多的在线计算机绘图软件应运而生&#xff0c;为用户提供了更加便捷、高效的创作方法。对初学者而言&#xff0c;选择一款易于使用、功能强大的计算机绘图软件至关重要。本文将介…

39. 【Linux教程】修改文件所属关系

上一节介绍了如何修改文件的读、写、执行权限&#xff0c;包括属主用户权限、所属用户组权限、其他用户组用户权限&#xff0c;本小节介绍如何修改文件的所属关系&#xff0c;所属关系又包括文件的属主和所属组。 1.chown 命令 若想要修改文件的属主&#xff0c;可以使用 chow…

便携式启动电源的市场前景和商业机会

便携式启动电源是一种便携式电子设备&#xff0c;主要用于为飞机、火炮、汽车、船只等大型机械提供紧急启动电源。它通常由一个可充电的电池和一个充电器组成&#xff0c;可以方便地随身携带。 便携式启动电源的工作原理是通过将电池的电能转换为机械能&#xff0c;从而驱动汽…

Leetcoder Day38| 动态规划part05 背包问题

1049.最后一块石头的重量II 有一堆石头&#xff0c;每块石头的重量都是正整数。 每一回合&#xff0c;从中选出任意两块石头&#xff0c;然后将它们一起粉碎。假设石头的重量分别为 x 和 y&#xff0c;且 x < y。那么粉碎的可能结果如下&#xff1a; 如果 x y&#xff0c;那…

云端技术驾驭DAY15——ClusterIP服务、Ingress服务、Dashboard插件、k8s角色的认证与授权

往期回顾&#xff1a; 云端技术驾驭DAY01——云计算底层技术奥秘、云服务器磁盘技术、虚拟化管理、公有云概述 云端技术驾驭DAY02——华为云管理、云主机管理、跳板机配置、制作私有镜像模板 云端技术驾驭DAY03——云主机网站部署、web集群部署、Elasticsearch安装 云端技术驾驭…

Java中继承的作用及解析

在 Java 中&#xff0c;继承是一种非常重要的面向对象编程特性。它的主要作用包括以下几个方面&#xff1a; 代码复用&#xff1a;通过继承&#xff0c;子类可以复用父类的代码&#xff0c;包括属性和方法。这样可以避免重复编写相同的代码&#xff0c;提高代码的复用性和可维护…

keycloak-鉴权springboot

一、环境描述 keycloak鉴权springboot的方式&#xff0c;此处简单介绍&#xff0c;springboot官方也提供了demo https://github.com/keycloak/keycloak-quickstarts/tree/latest/spring/rest-authz-resource-server 以及文档说明 Securing Applications and Services Guide…

2024年智能驾驶年度策略:自动驾驶开始由创造型行业转向工程型行业

感知模块技术路径已趋于收敛&#xff0c;自动驾驶从创造型行业迈向工程型行业。在特斯拉的引领下&#xff0c;国内主机厂2022年以来纷纷跟随特斯拉相继提出“重感知、轻地图”技术方案&#xff0c;全球自动驾驶行业感知模块技术路径从百花齐放开始走向收敛。我们认为主机厂智能…

波斯猫 6页面 宠物动物 长毛猫 HTML5 带背景音乐 JS图片轮播特效 滚动文字 鼠标经过图片 JS时间代码

波斯猫 6页面 宠物动物 长毛猫 HTML5 带背景音乐 JS图片轮播特效 滚动文字 鼠标经过图片 JS时间代码 注册表单 宠物网页成品 海量学生网页成品 个人博客 人物明星 城市家乡 旅游景点 美食特产 购物电商 公司企业 学校大学 科普教育 宠物动物 鲜花花卉 植物水果 茶叶咖啡 健康生…

目标识别项目:基于Yolov7-LPRNet的动态车牌目标识别算法模型(一)

前言 目标识别如今以及迭代了这么多年&#xff0c;普遍受大家认可和欢迎的目标识别框架就是YOLO了。按照官方描述&#xff0c;YOLOv8 是一个 SOTA 模型&#xff0c;它建立在以前 YOLO 版本的成功基础上&#xff0c;并引入了新的功能和改进&#xff0c;以进一步提升性能和灵活性…

【springboot】乡镇卫生院、二甲医院云HIS运维平台源码

目录 云HIS运营管理 ​编辑电子病历主模块&#xff1a;包括门诊电子病历、住院电子病历等子模块 &#xff08;1&#xff09;门诊电子病历功能简介 &#xff08;2&#xff09;住院电子病历功能简介 ▶患者列表主模块&#xff1a;包括患者信息子模块 &#xff08;1&#xf…

【应用多元统计分析】--多元数据的直观表示(R语言作图)

例1.2 为了研究全国31个省、市、自治区2018年城镇居民生活消费的分布规律&#xff0c;根据调查资料做区域消费类型划分。 指标&#xff1a; 食品x1&#xff1a;人均食品支出(元/人) 衣着x2&#xff1a;人均衣着商品支出(元/人) 居住x3&#xff1a;人均居住支出(元/人) 生活x4…

基于ARIMA+SARIMA的航空公司 RPM 时间序列预测模型

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

快速幂模板

#include<bits/stdc.h> using namespace std;typedef long long ll;ll n; ll Mi[40];ll quick_M(ll a, ll b, ll p) {// 初始化答案为1ll res 1;// 将b用二进制表示while(b){// 如果二进制位为1&#xff0c;则相乘&#xff08;如上图右半边&#xff09;if(b & 1) re…

STM32(6)中断

1.中断 1.1 中断的概念 STM32的中断&#xff1a; 1.2 中断优先级 用数字的大小表示中断优先级的高低&#xff0c;数字的范围&#xff1a;0000--1111&#xff08;二进制&#xff09;&#xff0c;即0-15&#xff0c;共16级优先级。 进一步对这4位二进制数进行划分&#xff0c;可…

芯片ERP:应用广泛的领域及其影响

在现代科技快速发展的时代&#xff0c;芯片ERP(企业资源规划)已成为许多行业不可或缺的工具。这种集成了先进技术和先进管理理念的系统&#xff0c;极大地提高了企业的运营效率和竞争力。那么&#xff0c;芯片ERP主要应用在哪些领域呢?本文将为您一一揭晓。 一、电子制造行业 …

STM32(11)按键产生中断

1.初始化IO引脚&#xff0c;设置模式&#xff0c;速度等 2.设置AFIO&#xff08;配置EXTI的引脚映射&#xff09;&#xff0c;记得开启时钟 3.配置EXTI的通道&#xff08;EXTI0和EXTI1&#xff09; 4.配置NVIC 4.1 中断优先级分组 4.2 配置中断 5.编写中断响应函数 在中断向量…

《一》在Vue中搭建Three.js环境(超详细、保姆级),创建场景、相机、渲染器

目录 Three.js简介创建vue项目引入Three.js实际操作环节文件目录创建初始化场景、相机 Three.js简介 Three.js 是一款基于 WebGL的 JavaScript 3D 库&#xff0c;它封装了 WebGL API&#xff0c;为开发者提供了简单易用的 API 来在 Web 浏览器中展示 3D 图形。Three.js 提供了…