【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
    // },  // 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 中的数据类型转换是编程中经常遇到的操作,了解其机制和注意事项能够帮助开发者编写更加健壮和可维护的代码。

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

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

相关文章

代码随想录第51天 | 309.最佳买卖股票时机含冷冻期

309.最佳买卖股票时机含冷冻期 309. 买卖股票的最佳时机含冷冻期 - 力扣(LeetCode) 代码随想录 (programmercarl.com) 动态规划来决定最佳时机,这次有冷冻期!| LeetCode:309.买卖股票的最佳时机含冷冻期_哔哩哔哩_bi…

ncnn 算子操作描述

ncnn 算子操作描述,具体查询见 ncnn/docs/developer-guide/operators.md at master Tencent/ncnn GitHub 都是从上述地方copy过来的,做备份。 具体如下: 1.AbsVal: 计算输入张量中的每个元素的绝对值。 y abs(x)one_blob_only 只支持…

Go 语言(四)【常用包使用】

1、命令行参数包 flag flag 包就是一个用来解析命令行参数的工具。 1.1、os.Args import ("fmt""os" )func main() {if len(os.Args) > 0 {for index, arg : range os.Args {fmt.Printf("args[%d]%v\n", index, arg)}} } 运行结果&#…

【Docker】docker部署lnmp和搭建wordpress网站

环境准备 docker:192.168.67.30 虚拟机:4核4G systemctl stop firewalld systemctl disable firewalld setenforce 0 安装docker #安装依赖包 yum -y install yum-utils device-mapper-persistent-data lvm2 #设置阿里云镜像 yum-config-manager --add…

MTEB - Embedding 模型排行榜

文章目录 关于 MTEBMTEB 任务和数据集概览使用 MTEB Pythont 库Installation使用 关于 MTEB MTEB : Massive Text Embedding Benchmark github : https://github.com/embeddings-benchmark/mtebhuggingface : https://huggingface.co/spaces/mteb/leaderboardpaper : https:/…

全国31省对外开放程度、经济发展水平、ZF干预程度指标数据(2000-2022年)

01、数据介绍 自2000年至2022年,中国的对外开放程度不断深化、经济发展水平不断提高、ZF不断探索并调整自身在经济运行中的角色和定位,以更好地适应国内外环境的变化,也取得了举世瞩目的成就。这一期间,中国积极融入全球经济体系…

书籍推荐|经典书籍ic书籍REUSE METHODOLOGY MANUALFOR等和verilog网站推荐(附下载)

大家好,今天是51过后的第一个工作日,想必大家都还没有完全从节假日的吃喝玩乐模式转变为勤勤恳恳的打工人模式,当然也包括我,因此这次更新主要是分享几篇书籍和verilog相关的学习网站~ 首先是一本数字电路相关的基础书籍&#xf…

JavaScript 中的 Class 类

🔥 引言 在ECMAScript 2015(ES6)中,class 关键字被引入,为JavaScript带来了一种更接近传统面向对象语言的语法糖。类是创建对象的模板,它们封装了数据(属性)和行为(方法&…

【SpringMVC 】什么是SpringMVC(一)?如何创建一个简单的springMvc应用?

文章目录 SpringMVC第一章1、什么是SpringMVC2、创建第一个SpringMVC的应用1-3步第4步第5步第6步7-8步3、基本语法1、进入控制器类的方式方式1:方式2:方式3:方式4:方式5:2、在控制器类中取值的方式方式1:方式2:方式3:方式4:方式5:方式6:超链接方式7:日期方式8:aja…

第一天学习(GPT)

1.图片和语义是如何映射的? **Dalle2:**首先会对图片和语义进行预训练,将二者向量存储起来,然后将语义的vector向量转成图片的向量,然后基于这个图片往回反向映射(Diffusion)——>根据这段描…

云原生周刊:Terraform 1.8 发布 | 2024.5.6

开源项目推荐 xlskubectl 用于控制 Kubernetes 集群的电子表格。xlskubectl 将 Google Spreadsheet 与 Kubernetes 集成。你可以通过用于跟踪费用的同一电子表格来管理集群。 git-sync git-sync 是一个简单的命令,它将 git 存储库拉入本地目录,等待一…

深度神经网络中的不确定性研究综述

A.单一确定性方法 对于确定性神经网络,参数是确定的,每次向前传递的重复都会产生相同的结果。对于不确定性量化的单一确定性网络方法,我们总结了在确定性网络中基于单一正向传递计算预测y *的不确定性的所有方法。在文献中,可以找…

如何取消xhr / fetch / axios请求

如何取消xhr请求 setTimeout(() > { xhr.abort() }, 1000)如何取消fetch请求 fetch()请求发送以后,如果中途想要取消,需要使用AbortController对象。 let controller new AbortController(); let signal controller.signal;fetch(url, {signal:…

[激光原理与应用-92]:振镜的光路图原理

目录 一、振镜的光路 二、振镜的工作原理 2.1 概述 2.2 焊接头 2.3 准直聚焦头-直吹头 2.4 准直聚焦头分类——按应用分 2.4.1 准直聚焦头分类——功能分类 2.4.2 准直聚焦头镜片 2.4.3 振镜焊接头 2.4.4 振镜分类: 2.4.5 动态聚焦系统演示(素…

vivado Virtex 和 Kintex UltraScale+ 比特流设置

下表所示 Virtex 和 Kintex UltraScale 器件的器件配置设置可搭配 set_property <Setting> <Value> [current_design] Vivado 工具 Tcl 命令一起使用。

Python使用割圆法求π值

三国时期刘徽提出的割圆法有多牛掰&#xff0c;看这个&#xff1a;刘徽割圆术到底做了什么&#xff1f; - 知乎 用Python实现的该算法代码如下&#xff1a; #!/usr/bin/env python """使用割圆法计算π值Usage::$ python calc_circle_pi.py 20 # 参数20是迭代…

ArthasGC日志GCeasy详解

Arthas详解 Arthas是阿里巴巴在2018年9月开源的Java诊断工具,支持JDK6,采用命令行交互模式,可以方便定位和诊断线上程序运行问题.Arthas官方文档十分详细.详见:官方文档 Arthas使用场景 Arthas使用 # github下载arthas wget https://alibaba.github.io/arthas/arthas-boot.j…

uniapp 禁止截屏(应用内,保护隐私)插件 Ba-ScreenShot

禁止截屏&#xff08;应用内&#xff0c;保护隐私&#xff09; Ba-ScreenShot 简介&#xff08;下载地址&#xff09; Ba-ScreenShot 是一款uniapp禁止应用内截屏的插件&#xff0c;保护隐私&#xff0c;支持禁止截屏、放开截屏 截图展示 也可关注博客&#xff0c;实时更新最…

嵌入式学习——C语言基础——day14

1. 共用体 1.1 定义 union 共用名 { 数据类型1 成员变量1; 数据类型2 成员变量2; 数据类型3 成员变量3; .. }; 1.2 共用体和结构体的区别 1. 结构体每个成员变量空间独立 2. 共用体每个成员变量空间共享 1.3 判断内存大小端 1. 内存大端…

Ranni: Taming Text-to-Image Diffusion for Accurate Instruction Following

Ranni: Taming Text-to-Image Diffusion for Accurate Instruction Following abstract 我们引入了一个语义面板作为解码文本到图像的中间件&#xff0c;支持生成器更好地遵循指令 Related work 最近的工作还通过包含额外的条件&#xff08;如补全掩码[15&#xff0c;45]、…