【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…

C++ 中 shared_from_this()的原理与使用

什么是shared_from_this()&#xff1f; 它是一个模板类&#xff0c;定义在头文件 <memory>&#xff0c;其原型为&#xff1a; template< class T > class enable_shared_from_this;std::enable_shared_from_this能让其一个对象&#xff08;假设其名为 t &#xf…

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

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

【48天笔试强训】day18

题目1 描述 有一种兔子&#xff0c;从出生后第3个月起每个月都生一只兔子&#xff0c;小兔子长到第三个月后每个月又生一只兔子。 例子&#xff1a;假设一只兔子第3个月出生&#xff0c;那么它第5个月开始会每个月生一只兔子。 一月的时候有一只兔子&#xff0c;假如兔子都…

力扣数据库题库学习(5.6日)--1729. 求关注者的数量

1729. 求关注者的数量 问题链接 思路分析 编写解决方案&#xff0c;对于每一个用户&#xff0c;返回该用户的关注者数量。 按 user_id 的顺序返回结果表。示例 1&#xff1a;输入&#xff1a; Followers 表&#xff1a; ---------------------- | user_id | follower_id | -…

【搜索技能】外链

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

C语言面试重点问题

1. 冒泡排序法 2. strlen、strcpy、strcat、strcmp的用法和原理 3. 大小端的区分 3.1 主函数区分大小端 #include <stdio.h>int main(void) {int num 0x11223344;char *p (char *)&num;if (0x11 *p){printf("大端!\n");}else if (0x44 *p){printf(…

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

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

select,poll,epoll

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

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

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

ComfyUI中的图像稀释处理

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

Android面试必考题16-30

目录 16.Handler 机制 17.android 事件分发机制、 18.子线程发消息到主线程进行更新 UI,除了 handl

公网tcp转流

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

linux之NAMP

linux之NAMP Nmap&#xff08;Network Mapper&#xff09;是一个开源的网络扫描和安全审计工具。它被设计用来快速地扫描大型网络&#xff0c;尽管它也可以对单个主机进行有效的扫描。Nmap利用原始IP数据包以多种方式探测目标网络上的主机、服务&#xff08;应用程序名称和版本…

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

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

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

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

工厂模式+策略模式

输入实体 基类 import lombok.Data;Data public class PersonInputDto {private Integer id;private String name; }子类 Data AllArgsConstructor NoArgsConstructor public class ManPerson extends PersonInputDto {private String sex; }Data AllArgsConstructor NoArgs…

嵌入式学习day11

每日面试题 全局变量可不可以定义在可被多个.c文件包含的头文件中&#xff0c;为啥&#xff1f; 可以&#xff0c;在不同的C文件中各自用static声明的全局变量&#xff0c;变量名可能相同&#xff0c;但是各自C文件中的全局变量的作用域为该文件&#xff0c;所以互不干扰。 …

渗透 如何防御ARP欺骗,LLMNR-MDNS-NBNS等协议的作用

一. 如何防御ARP欺骗&#xff1f; 1.使用双向IP/MAC绑定&#xff1b; 2.使用静态ARP缓存表&#xff1b; 3.使用ARP服务器&#xff0c;通过服务器来查找ARP转换表来响应其他机器的广播&#xff1b; 4.使用ARP欺骗防护软件&#xff1b; 5.在网关设备上部署防ARP欺骗攻击功能…