【JavaScript】数据类型转换

JavaScript 中的数据类型转换主要包括两种:隐式类型转换(Implicit Type Conversion)和显式类型转换(Explicit Type Conversion)。

1. 隐式类型转换(自动转换):

js 是动态语言,变量可以是任意类型。

不同类型的数据运算:

let num = 42;
let str = "The answer is " + num; // 数字转换为字符串
console.log(str); // 输出 "The answer is 42"

非布尔值类型的数据求布尔值:

if (0) {console.log("This will not be executed");
} else {console.log("0 is converted to false"); // 数字 0 被转换为布尔值 false
}

非数值类型的值使用一元运算符(+ / -):

console.log(+{foo: 'bar'})  // NaN
console.log(-[1, 2, 3]) // NaN

自动转换为布尔值

在预期为布尔值的地方(比如 if 语句的条件部分 / 三目表达式),就会将非布尔值的参数自动转换为布尔值。系统内部自动调用 Boolean() 函数。

除了以下五个值的转换结果为false,其他的值全部为true。

  • undefined
  • null
  • 0 (包含-0和+0)
  • NaN
  • ''(空字签串)
if ('aaa') {console.log('aaa 是 true')
}
let b = 'aaa' ? true : false
console.log(b)  // true
let c = !!'sss'
console.log(c)  // true

自动转换为字符串

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

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

字符串的自动转换,主要发生在字符串的加法运算时。当一个值为字符串,另一个值为非字符串,则后者转为字符串。

console.log('5' + 1)  // 51
console.log('5' + true)  // 5true
console.log('5' + {}) // 5[object Object]  // 将非字符串转为字符串,调用 String() 强转为字符串
console.log('5' + [])  // 5
console.log('5' + function () {}) // 5function () {}
console.log('5' + undefined) // 5undefined
console.log('5' + null) // 5null

自动转换为数值

遇到预期为数值的地方,就会将参数值自动转换为数值。

系统内部会自动调用 Number() 函数。除了加法运算符(+)有可能把运算子转为字符串,其他运算符都会把运算子自动转成数值。

console.log('5' - '2') // 3
console.log('5' * '2') // 10
console.log(true - 1) // 0
console.log(false - 1) // -1
console.log('1' - 1) // 0
console.log('5' * []) // 0
console.log(false / '5') // 0
console.log('aaa' - 1) // NaN
console.log(null + 1) // 1
console.log(undefined + 1) // NaN

注:null 转为数值为 0, undefined 转为数值为 NaN。
一元运算符也会把其转为数值

+'abc'  // NaN
+'123'  // 123
+true // 1
-false // 0

2. 显式类型转换(强制转换):

开发者可以使用一些内置函数或操作符显式地进行类型转换,这种转换是有意识地进行的,常见的显式类型转换方式包括:

使用构造函数创建对象:

let num = 42;
let strObj = new String(num); // 使用 String 构造函数将数字转换为字符串对象
console.log(strObj); // 输出 String 对象 "42"

使用全局函数进行类型转换:

// 1. js 变量可以是任意类型
// let a = 1
// a = '我从数字变成字符串了'
// console.log(a)
Number

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

  1. 参数是原型类型的值
Number(123)
Number('123') // 123
Number('123asd') // NaN
Number('asd123') // NaN
// parseInt 尽可能的转为数字 当然 还有 parseFloat()
// 而且 parseInt 和 Number 函数都会自动过滤一个字符串前导和后缀的空格
parseInt('123asd') // 123
parseInt('asd123') // NaN
parseInt(undefined) // NaN
parseInt(null) // NaN
Number('') // 0
Number(true) // 1
Number(undefined) // NaN
Number(null) // 0
  1. 参数是对象

image.png

valueOf() 和 toString() 这两个方法所有对象或者值都有,因为这两个方法是挂在 Object.prototype 上的。

let obj = {name: 'heo'
}
console.log(Number(obj))  // NaN
console.log('-----')
console.log(obj.valueOf())  // { name: 'heo' }
console.log(obj.toString())  // [object Object]
console.log(Number(obj.toString()))  // NaN

此外,valueOf 和 toString 都是可以自己定义的。

console.log(Number({// valueOf: function () {//     return 2// },  // 2toString: function () {return 2},  // 2
}))  
String

String 函数将任意类型转化为字符串。

当然,还有 toString() 。

(1)原始类型值

  • 数值:转为相应的字符串。
  • 字符串:转换后还是原来的值
  • 布尔值:true 转为字符串“true”,false转为字符串"false"
  • undefined:转为字符串 “undefined”。
  • null:转为字符串“null”。

(2)对象

image.png

let obj = {name: 'heo'
}
console.log(String(obj))  // [object Object]
console.log('-----')
console.log(obj.toString())  // [object Object]
console.log(obj.valueOf())  // { name: 'heo' }
console.log(String(obj.valueOf()))  // [object Object]
console.log(String({valueOf: function () {return 2},  // [object Object]// toString: function () {//     return 2// },  // 2
}))
Boolean

Boolean()函数可以将任意类型的值转为布尔值。

它的转换规则相对简单: 除了以下五个值的转换结果为false,其他的值全部为true。

  • undefined
  • null
  • 0 (包含-0和+0)
  • NaN
  • ''(空字签串)

使用一元加号操作符进行转换:

let str = "42";
let num = +str; // 使用一元加号操作符将字符串转换为数字
console.log(num); // 输出数字 42

注意事项:

  1. NaN 的特殊性:当进行不合理的数学运算时,结果会变成 NaN(Not a Number)。NaN 是一个特殊的数值,它与任何值都不相等,包括它自己。因此,进行类型转换时要注意处理 NaN 的情况。

  2. 显式转换的优先级:显式转换的优先级高于隐式转换。在需要明确控制类型的情况下,最好使用显式转换,以避免不必要的错误或混淆。

JavaScript 中的数据类型转换是编程中经常遇到的操作,了解其机制和注意事项能够帮助开发者编写更加健壮和可维护的代码。

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

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

相关文章

Docker搭建LNMP+Wordpress的实验

目录 一、项目的介绍 1、项目需求 2、服务器环境 3、任务需求 二、Linux系统基础镜像 三、部署Nginx 1、建立工作目录 2、编写Dockerfile 3、准备nginx.conf配置文件 4、设置自定义网段和创建镜像和容器 5、启动镜像容器 6、验证nginx 三、Mysql 1、建立工作目录…

Kalign 3:大型数据集的多序列比对

之前一直用的是muscle,看到一个文章使用了Kalign,尝试一下吧 安装 wget -c https://github.com/TimoLassmann/kalign/archive/refs/tags/v3.4.0.tar.gz tar -zxvf v3.4.0.tar.gz cd kalign-3.4.0 mkdir build cd build cmake .. make make test su…

【数据结构与算法】之五道链表进阶面试题详解!

目录 1、链表的回文结构 2、相交链表 3、随机链表的复制 4、环形链表 5、环形链表(||) 6、完结散花 个人主页:秋风起,再归来~ 数据结构与算法 个人格言:悟已往之不谏,知…

【搜索技能】外链

文章目录 前言一、外链是什么?二、如何进行外链调查?总结 前言 今儿因为在搜索一个很感兴趣的软件,但是软件信息所在的网址非常有限。因此产生了一个念头:我能不能找到所有的包含了或者是引用了这个网站的网站呢? 调查之下&…

解密SSL/TLS:密码套件扫描仪的深度解析(C/C++代码实现)

解密SSL/TLS流量通常是为了分析和审计加密通信,以确保数据传输的安全性和合规性。密码套件扫描仪是实现这一目的的一种工具,它可以提供关于SSL/TLS配置的详细信息,帮助安全专家评估潜在的风险。 SSL/TLS协议基础 SSL/TLS协议是网络安全中不…

select,poll,epoll

在 Linux Socket 服务器短编程时,为了处理大量客户的连接请求,需要使用非阻塞I/O和复用,select,poll 和 epoll 是 Linux API 提供的I/O复用方式。 \selectpollepoll操作方式遍历遍历回调底层实现数组链表哈希表IO效率每次调用都进…

C语言/数据结构——每日一题(环形链表的约瑟夫问题)

一.前言 今天在牛客网上面看到了一道环形链表题,想着和大家们分享一下。可能我有点笨,那道题的链接我没搞好,所以很抱歉,只能麻烦大家们看一下截屏的题目信息了。废话不多数,让我们开始今天的题目分享吧。 二.正文 …

ComfyUI中的图像稀释处理

用下面的节点对图片进行稀释处理,如下 为0表示不变,我设置大一点,设置为0.5看看,如下 图像就暗淡了一些,但是还是有一些彩色的,相当于把它放在水里浸泡了一样,掉色了,这就是稀释&…

公网tcp转流

之前做过几次公网推流的尝试, 今天试了UDP推到公网, 再用TCP从公网拉下来, 发现不行, 就直接改用TCP转TCP了. 中间中转使用的python脚本, 感谢GPT提供技术支持: import socket import threadingdef tcp_receiver(port, forward_queue):"""接收TCP数据并将其放入…

LLM应用:工作流workflow创建自定义模版使用

参考: https://www.coze.cn/ 本案例是在coze平台上操作的,也有其他工具支持工作流的创建例如dify;也例如图像生成的comfyui工作流工具 创建自定义模版 可以根据自己需求创建自己的工作流工具;本文案例是创建一个联网搜索的LLM应用: 创建工作流页面: https://www.coze.c…

X 推出 Stories 功能,由 Grok AI 生成新闻摘要

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…

Python自动化测试【selenium面试题】

一、selenium中如何判断元素是否存在? expected_conditions模块提供了16种判断方法,以下方法是判断元素存在DOM中: presence_of_element_located """ An expectation for checking that an element is present on the DOM of…

分布式与一致性协议之ZAB协议(三)

ZAB协议 主节点崩溃了,怎么办? 众所周知,系统在运行中不可避免会出现各种各样的问题,比如进程崩溃了、服务器死机了,这些问题会导致很严重的后果,让系统没办法继续运行。在ZAB协议中,写请求是…

深度学习论文: DMAD: Dual Memory Bank for Real-World Anomaly Detection

深度学习论文: DMAD: Dual Memory Bank for Real-World Anomaly Detection DMAD: Dual Memory Bank for Real-World Anomaly Detection PDF: https://arxiv.org/pdf/2403.12362 PyTorch代码: https://github.com/shanglianlm0525/CvPytorch PyTorch代码: https://github.com/sh…

数智先锋 | 多场景数据治理案例,释放数据要素生产力

数据作为第五大生产要素,成为释放新质生产力的关键基础。 当前各个行业数字化建设如火如荼,全力挖掘数据价值以驱动行业高质量应用发展。数据治理成为数据要素价值发挥的重要基础和前提。 数据治理不单是技术问题,不是依赖工具就能解决的&a…

JVM之内存分配的详细解析

内存分配 两种方式 不分配内存的对象无法进行其他操作,JVM 为对象分配内存的过程:首先计算对象占用空间大小,接着在堆中划分一块内存给新对象 如果内存规整,使用指针碰撞(Bump The Pointer)。所有用过的内…

链式队列基本操作

链式队列的基本概念 链式队列是一种常见的数据结构,它使用链表作为其底层数据存储结构。链式队列的特点是动态的内存分配,可以有效地处理队列的入队和出队操作。下面,我将介绍链式队列的实现方法,并提供相应的C语言代码示例。 链…

C语言-设置控制台信息

Win_API Win_API是Windows应用程序接口(Windows Application Programming Interface)的缩写,它是一组函数、系统服务和程序接口,允许开发者在微软Windows操作系统上创建应用程序。Win32 API 是Windows API的一个主要部分&#xff…

Linux PXE高效批量网络装机

系统初始化 systemctl disable --now firewalld.service setenforce 0 vim /etc/selinux/config 安装软件 yum install -y tftp-server xinetd dhcp vsftpd syslinux 复制 vmlinuz initrd.img pxelinux.0 到 /var/lib/tftpboot/ 目录 [rootlocalhost ~]# cd /mnt/…

设计模式之业务代表模式

在编程江湖的风雨中漂泊多年,每当我遇到那些错综复杂的业务逻辑和系统交互,总有一个模式像一位忠诚的骑士,默默守护着我的代码城堡,那就是——业务代表模式(Business Delegate Pattern)。它不是最耀眼的明星…