【JavaScript】数据类型转换

news2024/10/8 22:56:44

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
    // },  // 2
    toString: 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.coloradmin.cn/o/1646259.html

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

相关文章

CNN笔记详解

CNN(卷积神经网络) 计算机视觉,当你们听到这一概念的是否好奇计算机到底是怎样知道这个图片是什么的呢?为此提出了卷积神经网络,通过卷积神经网络,计算机就可以识别出图片中的特征,从而识别出图片中的物体。看到这里充…

XYCTF2024 RE ez unity 复现

dll依然有加壳 但是这次global-metadata.dat也加密了,原工具没办法用了,不过依然是可以修复的 a. 法一:frida-il2cpp-bridge 可以用frida-il2cpp-bridge GitHub - vfsfitvnm/frida-il2cpp-bridge: A Frida module to dump, trace or hijac…

深度剖析muduo网络库1.1---面试提问(阻塞、非阻塞、同步、异步)

在面试过程中,如果被问到关于IO的阻塞、非阻塞、同步、异步时,我们应该如何回答呢? 结合最近学习的课程,我作出了以下的总结,希望能与大家共同探讨! 先给出 陈硕大神原话:在处理IO的时候&…

存储故障后oracle报—ORA-01122/ORA-01207故障处理---惜分飞

客户存储异常,通过硬件恢复解决存储故障之后,oracle数据库无法正常启动(存储cache丢失),尝试recover数据库报ORA-00283 ORA-01122 ORA-01110 ORA-01207错误 以前处理过比较类似的存储故障case:又一起存储故障导致ORA-00333 ORA-00312恢复存储故障,强制拉库报ORA-600 kcbzib_kcr…

计算机毕设

随着社会和国家的重视,大学对于大学生毕业设计越来越重视。 做软件设计设计方面,前后端分离是必不可少的,代码管理工具,前后端接口测试是项目中必须要用到的工具。做大数据设计方面,主要是要用到爬虫进行数据爬取&…

(二)JSP教程——taglib指令

创建标签文件 首先创建一个Web项目,在webapp/WEB-INF目录下创建一个tags文件夹 在tags文件夹中创建一个oddNumberSum.tag文件,Tag文件时扩展名为.tag的文本文件,其结构和JSP文件非常相似,该文件的目录结构如图所示 创建Tag文件的…

Altium Designer——检查原理图库正确性并生成报告

一、方法: 1.打开原理图库: 2.点击菜单栏的报告选项: 3.选择器件规则检查: 根据需求勾选,一般都是全部勾选: 二、问题: 1.缺少封装会导致什么问题: 1.首先: 封装是…

方法的入栈和出栈

一.作用域问题 1.全局作用域 在全局都能进行访问的变量 var a 10;function fn() {var b 20;return a b;}console.log(fn()); 2.局部的作用域 只能在限定的范围内进行访问 function fn() {var b 20;}console.log(b); b is not defined 打印的结果是b这个变量没用定义 3…

9.Admin后台系统

9. Admin后台系统 Admin后台系统也称为网站后台管理系统, 主要对网站的信息进行管理, 如文字, 图片, 影音和其他日常使用的文件的发布, 更新, 删除等操作, 也包括功能信息的统计和管理, 如用户信息, 订单信息和访客信息等. 简单来说, 它是对网站数据库和文件进行快速操作和管…

Xinlinx FPGA如何降低Block RAM的功耗

FPGA中降低Block RAM的功耗有两种方式,分别是选择合适的写操作模式以及Block RAM的实现算法及综合设置。我们知道对于采用IP核生成对应的RAM时,会有最小面积算法、低功耗算法以及固定原语,但是采用最小功耗算法有时由于级联长度导致无法实现&…

Listview控件的5种视图

在C#中,ListView控件是用于显示和编辑列表数据的常用控件。它可以显示数据项的列表,并允许用户对列表中的数据进行操作。 ListView控件有五种视图模式,分别是: LargeIcon视图:在此视图中,每个数据项都显示…

详解xml-java语言

1.XML在线学习手册 XML 教程 2.XML可以做什么 1.给两个程序之间进行数据通信。现在用的最多的是JSON。 2.给服务器做配置文件。 3.存储复杂的数据关系。 4.还可以充当小型的数据库。 3.书写格式 <?xml version"1.0" encoding"UTF-8" ?> <…

ctfshow web入门 sql注入 web224--web233

web224 扫描后台&#xff0c;发现robots.txt&#xff0c;访问发现/pwdreset.php &#xff0c;再访问可以重置密码 &#xff0c;登录之后发现上传文件 检查发现没有限制诶 上传txt,png,zip发现文件错误了 后面知道群里有个文件能上传 <? _$GET[1]_?>就是0x3c3f3d60245…

#9松桑前端后花园周刊-React19beta、TS5.5beta、Node22.1.0、const滥用、jsDelivr、douyin-vue

行业动态 Mozilla 提供 Firefox 的 ARM64 Linux二进制文件 此前一直由发行版开发者或其他第三方提供&#xff0c;目前Mozilla提供了nightly版本&#xff0c;正式版仍需要全面测试后再推出。 发布 React 19 Beta 此测试版用于为 React 19 做准备的库。React团队概述React 19…

仅为娱乐,Python中如何重定义True为False?

在Python中&#xff0c;True 和 False 是内建的布尔常量&#xff0c;分别代表逻辑上的真和假。它们是不可变的&#xff0c;且在Python语言规范中具有特殊地位&#xff0c;不能被用户直接重定义。尝试给 True 或 False 赋予新的值是违反Python语言规则的&#xff0c;这样的操作会…

ESG视角下的多期DID构建(2009-2022年)4.5万+数据

随着ESG信息越来越受到重视&#xff0c;一些第三方评级机构开始推出ESG评级产品&#xff0c;目前在第三方数据库能够查到华证、富时罗素、商道融绿、社会价值投资联盟以及Wind自有的ESG评级数据等。其中&#xff0c;商道融绿是中国最早发布ESG评级数据的机构&#xff0c;也是国…

六淳科技IPO终止背后:十分着急上市,大额分红,实控人买豪宅

华西证券被暂停保荐业务资格6个月的影响力逐渐显现。 近日&#xff0c;深圳证券交易所披露的信息显示&#xff0c;东莞六淳智能科技股份有限公司&#xff08;下称“六淳科技”&#xff09;及其保荐人撤回上市申请材料。因此&#xff0c;深圳证券交易所决定终止对其首次公开发行…

esp32+mqtt协议+paltformio+vscode+微信小程序+温湿度检测

花费两天时间完成了这个项目&#xff08;不完全是&#xff0c;属于是在resnet模型训练和温湿度检测两头跑......模型跑不出来&#xff0c;又是第一次从头到尾独立玩硬件&#xff0c;属于是焦头烂额了......&#xff0c;完成这个项目后&#xff0c;我的第一反应是写个csdn&#…

【云原生】Pod 的生命周期(二)

【云原生】Pod 的生命周期&#xff08;一&#xff09;【云原生】Pod 的生命周期&#xff08;二&#xff09; Pod 的生命周期&#xff08;二&#xff09; 6.容器探针6.1 检查机制6.2 探测结果6.3 探测类型 7.Pod 的终止7.1 强制终止 Pod7.2 Pod 的垃圾收集 6.容器探针 probe 是…

从OutputStream类看Java中的IO流操作

哈喽&#xff0c;各位小伙伴们&#xff0c;你们好呀&#xff0c;我是喵手。运营社区&#xff1a;C站/掘金/腾讯云&#xff1b;欢迎大家常来逛逛 今天我要给大家分享一些自己日常学习到的一些知识点&#xff0c;并以文字的形式跟大家一起交流&#xff0c;互相学习&#xff0c;一…