当前位置: 首页 > news >正文

JavaScript中的类型转换

将值从一种类型转换为另一种类型,a -> ‘a’ ,称为类型转换。转换分为两种,一种显式的,一种隐式的,隐式的往往也是强制类型转换。强制类型转换总是返回标量基本类型,不会返回对象和函数。

如何区分?

类型转换(显式),通常发生在静态类型语言的编译阶段,而强制类型转换则发生在动态类型语言的运行时。

例如:

var a = 123
var b = a + '' // '123' 隐式强制类型转换
var c = String(a) // '123' 显示强制类型转换

1. 抽象一点的值操作

1.1 ToString

基本字符串化规则:

null -> 'null'
undefined -> 'undefined'
true -> 'true'
1 -> '1'

稍微特殊一点的情况

var a = 1.02 * 1000 * 1000 * 1000 * 1000 * 1000 * 1000 * 1000
console.log(a.toString()) // '1.02e+21'

数组的 toString 方法经过了重新定义,返回 每个元素使用 , 拼接的字符串

var arr = [1,2,3]
arr.toString() // '1,2,3'

toString 可以显式调用,也会在需要的时候自动调用

1.2 JSON 字符串化

工具函数 JSON.stringfy() 在将 JSON 对象序列化为字符串也用到了 toString 方法

对于大多数简单值,JSON.stringfy() 和 toString 基本相同

JSON.stringify(123) // "123"
JSON.stringify("123") // ""123"" 在JSON中,所有的字符串都必须用引号括起来。即使在一些浏览器没有显示想要的结果
JSON.stringify(null) // "null"
JSON.stringify(undefined) // "undefined"

JSON.stringify() 在对象中遇见 undefined、function 和 Symbol 是会自动忽略,在数组中碰到就会返回 null

JSON.stringify(undefined) // undefined
JSON.stringify(function(){}) // undefinedJSON.stringify([1,nudefined,function(){},4]) // "[1,null,null,4]"
JSON.stringify({a:2,b:function(){}}) // "{"a":2}"

如果对象里定义了 toJSON方法,JSON.stringify() 会首先调用该方法,然后用返回值执行 JSON.stringify() ,这( toJSON方法)一般用于返回一个安全可被序列化的值。注意:toJSON 不是返回一个 JSON 字符串。

JSON.stringify() 的额外参数

  1. 如果额外参数(replacer) 是一个数组,表示要处理的对象的属性名称集合,而其他属性不会被处理,也不会被返回。
  2. 但如果是个函数,那么函数携带的参数分别表示键、值。如果要忽略就返回 undefined。
var obj = {a: 1,b: 'bbb',c: [1,2,3]
}
console.log(JSON.stringify(obj, [a, b])) // "{"a":1,"b":"bbb"}"const res = JSON.stringify(obj, function(k,v){if( k !== 'c') {return v}
})console.log(res) // "{"a":1,"b":"bbb"}"

JSON.string 还有一个可选参数 space,用来指定输出的缩进格式。space 为正整数时是指定每一级缩进的字符数,它还可以是字符串,此时最前面的十个字符被用于每一级的缩进

var a = { b: 42,c: "42",d: [1,2,3] };JSON.stringify( a, null, 3 );// {
//   "b": 42,
//   "c": "42",
//   "d": [
//      1,
//      2,
//      3
//   ]
// }JSON.stringify( a, null, "-----" );
// "{
// -----"b": 42,
// -----"c": "42",
// -----"d": [
// ----------1,
// ----------2,
// ----------3
// -----]
// }"
  1. 字符串、数字、布尔值和null的 JSON.stringify() 与 ToString 基本相同

  2. 如果传递给 JSON.stringify(…) 的对象中定义了 toJSON() 方法,那么该方法会在字符串化前调用,以此将对象转换为可字符串化的 JSON 值。

1.3 ToNumber

对于一些非数字值当作数字来进行运算,会发生以下转换:

  • true —> 1
  • false —> 0
  • undefined —> NaN
  • null —> 0

可以看出,toNumber 基本符合数字常量计算的规则,处理失败返回 NaN。

注意:ToNumber 对 0 开头的数字会按照十进制处理,而不是八进制。

ToPrimitive是一个抽象操作,在将值转换为相应的基本类型值时使用。它首先检查该值是否有valueOf()方法。如果有并且返回一个基本类型值,就使用该值进行强制类型转换。如果没有valueOf()方法,就会检查是否有toString()方法。如果存在toString()方法并且返回一个基本类型值,就使用该值进行强制类型转换。

但是从 ES5 开始,使用 Object.create(null) 创建的对象没有原型上的方法。所以无法强制类型转换。

var a = {valueOf: function(){return "42";}
};
var b = {toString: function(){return "42";}
};
var c = [4,2];
c.toString = function(){return this.join( "" ); // "42"
};
Number( a ); // 42
Number( b ); // 42
Number( c ); // 42
Number( "" ); // 0
Number( [] ); // 0
Number( [ "abc" ] ); // NaN

1.4 ToBoolean

在 JavaScript 中,1 不等于 true,而 0 也不等于 false ,这是无法一概而论的。

1.4.1 假值

JavaScript 中有以下假值:

  • undefined
  • null
  • false
  • +0、-0 和 NaN

如果我们不考虑 JavaScript 的规范,除了上述假值之外,其他的值都应该视为真值。

1.4.2 假值对象

var a = new Boolean( false );
var b = new Number( 0 );
var c = new String( "" );

假值对象并非包含了假值的对象…

var res = Boolean(a && b && c)
console.log(res) // true

假值对象是浏览器在特定情况下创建的外来值,尽管它们看起来像普通对象,但在布尔强制类型转换时结果为false。其中一个常见的例子是document.all,它以前是一个真值对象,但现在是一个假值对象。为了符合标准,IE不再支持使用if(document.all){…}。虽然我们无法完全摆脱document.all,但可以考虑修改JavaScript的类型机制来处理它。****

1.4.3 真值

真值就是除了假值之外的值。

2. 显式强制类型转换

显式类型转换,顾名思义,是在 JavaScript 中强制把一种数据类型变为另一种数据类型。JavaScript是动态类型的编程语言,但有时我们为了某些逻辑需要将一个数据类型强制转换为另一个数据类型,此时就会用到显式类型转换。

主要有以下几种方式:

  1. Number():将其他任何数据类型转换为数字。
  2. String():将其他任何数据类型转换为字符串。
  3. Boolean():将其他任何数据类型转换为布尔值。

这是一些简单的示例:

// 将数字转为字符串
let num = 123;
let str1 = String(num); // 显式转换
console.log(typeof str1);  // 输出 'string'// 将布尔值转为字符串
let bool = true;
let str2 = String(bool); // 显式转换
console.log(typeof str2);  // 输出 'string'// 将字符串转为数字
let strNum = "123";
let number = Number(strNum); // 显式转换
console.log(typeof number);  // 输出 'number'// 将字符串转为布尔值
let strBool = "true";
let boolean = Boolean(strBool); // 显式转换,任何非空字符串都会转为 true
console.log(boolean);  // 输出 true

这些是显式类型转换在JavaScript中的基本用法

还可以通过 +-~!! 等等符号操作来进行类型转换

  • 加号 (+) :将任何非 string 类型的值转换为 string 类型。

    var num = 15;
    console.log(typeof +num); // "number"
    console.log(typeof (+num + "")); // "string"
    

    在这个例子中, “+num” 仍然是一个数字。但是,当我们通过 “+num + “”” 将字符串与数字连接起来时,整个表达式将是字符串类型。

  • 减号 (-):将字符串类型的数字值转换为 number 类型。

    var strNum = "123";
    console.log(typeof strNum); // "string"
    console.log(typeof -strNum); // "number"
    

    然而,“-strNum”是一个负数,所以你可能需要再次使用 “-” 操作符来恢复其原始正值。

  • 非 (~):在 JavaScript 中,非运算符 “~” 可以用于数组查找或者用来替代条件语句。“~” 运算符会将数字翻转,即计算其一补数。在类型转换中,它并非常用。

    // 使用 "~" 运算符和 "indexOf()" 方法从数组中查找字符串 "word"
    // 如果 "word" 不在数组中,"indexOf()" 将返回 -1,"~" 将其改变为 0;否则,"~" 会把 "indexOf()" 返回的任何其他数值(代表 "word" 在数组中的位置)改变为一个非零数值
    var index = ~someArray.indexOf("word"); // 如果 "index" 是非零值(意味着找到了 "word"),则执行 if 后面的代码块;如果是 0(意味着没有找到 "word"),则不执行
    if (index)// 与上面的代码基本同样的逻辑,但是省略了定义变量 "index" 的步骤。它直接在 "if" 条件中进行查找和 "~" 运算,然后根据返回的是否为零值来决定是否执行后面的代码块
    // 同样,如果找到了 "word",则执行 if 后的代码块;如果没有找到,不执行
    // 这种写法更简洁,但可能在某些情况下可读性更差
    if(~someArray.indexOf("word"))
  • 双非 (!!):将任何非 boolean 类型的值转化为 boolean 类型。这个运算符被称为 “双否运算符”,会将值转换为真实的逻辑布尔值(true 或 false)。

    var name = "AI";
    console.log(typeof !!name); // "boolean"
    

    “!!name”返回的是 “true”,因为我们对一个非空的字符串使用了 “!!” 操作符。

相关文章:

JavaScript中的类型转换

将值从一种类型转换为另一种类型,a -> ‘a’ ,称为类型转换。转换分为两种,一种显式的,一种隐式的,隐式的往往也是强制类型转换。强制类型转换总是返回标量基本类型,不会返回对象和函数。 如何区分? 类型…...

01-JVM 内存结构

JVM 内存结构 Java 虚拟机的内存空间分为 5 个部分: 程序计数器Java 虚拟机栈本地方法栈堆方法区 JDK 1.8 同 JDK 1.7 比,最大的差别就是:元数据区取代了永久代。元空间的本质和永久代类似,都是对 JVM 规范中方法区的实现。不过…...

树与二叉树(考研版)

文章目录 树与二叉树树的基本概念结点、树属性的描述树的性质 二叉树的概念二叉树的性质二叉树的构建二叉树的遍历先序遍历中序遍历后序遍历层次遍历 递归算法和非递归算法的转换源代码 线索二叉树二叉树的线索化线索二叉树 找前驱/后继 树和森林树的存储 树与二叉树的应用哈夫…...

前端车牌键盘组件

父组件 // 粘贴回去后格式化一下<div class"input-plate-wrap"><div v-for"(item, index) in keyBoard.kbLenght" :key"index"><divclass"plate-item"v-if"index ! keyBoard.kbLenght - 1":class"{ ac…...

什么是脚本文件,脚本的执行,脚本格式等

1.脚本文件是什么&#xff1f; 脚本文件是包含一系列计算机命令的文本文件&#xff0c;通常用于自动化任务、自定义功能或执行特定操作。这些命令通常按照一定的编程语法和语义规则编写&#xff0c;以便计算机能够逐行解释和执行它们。脚本文件通常包含了一组操作&#xff0c;…...

react 实战- 玩转 react 全家桶(进阶)学习

一个命令是怎么运行起来的? Shell运行一个命令,实际上是运行一个脚本 环境变量 装了node以后,node的路径,就被注册到了环境变量里. 一个js的东西,可以注册? bin Webpack配置 构建 import A from A , const Arequire(A) 为什么可以这么写?为哈都行?本质上,是构建工…...

【Python】取火柴小游戏(八什博弈)

# 火柴游戏&#xff1a;Python编程示例 当我们想要玩一个简单而有趣的游戏&#xff0c;同时又想锻炼自己的编程技能时&#xff0c;一个经典的选择就是火柴游戏。这个游戏的规则很简单&#xff1a;有一堆火柴&#xff0c;每次可以拿走1到6根&#xff0c;两名玩家轮流取火柴&…...

【Redis安装】Ubuntu和Centos

此处安装的是 Redis5 在 Ubuntu 系统上 切换到 root 用户下&#xff0c;su 命令切换使用 apt 可以搜索 redis 相关软件包 apt search redis使用 apt 命令安装 redis apt install redis手动修改配置文件 redis.conf cd /etc/redis/ vim redis.conf修改以下两处 重启服务器 …...

【Java】ArrayList集合使用

ArrayList集合常见方法 方法名称说明public boolean add(E e)将元素插入到指定位置的arraylist中&#xff0c;返回值&#xff1a;返回boolean类型public E remove(int index)删除 arraylist里的单个元素&#xff0c;返回值&#xff1a;返回删除之前的元素public E set(int inde…...

【proteus】8086仿真/汇编:创建项目并添加汇编代码文件

1.创建好新项目 2.点击source code 弹出VSM 3. 4.注意两个都不勾选 可以看到schematic有原理图出现 5. 再次点击source code 6.project/project settings&#xff0c;取消勾选embed 7. add 8.输入文件名保存后&#xff1a; 注意&#xff1a;proteus不用写dos的相关语句 。...

如何给Github上的开源项目提交PR?

前言 对于一个热爱开源的程序员而言&#xff0c;学会给GitHub上的开源项目提交PR这是迈出开源的第一步。今天我们就来说说如何向GitHub的开源项目提交PR&#xff0c;当然你提交的PR可以是一个项目的需求迭代、也可以是一个Bug修复、再或者是一些内容文本翻译等等&#xff0c;并…...

【Java】小计 TCP UDP的区别

面向连接 TCP面向连接&#xff0c;需要连接&#xff0c;而UDP不需要建立连接 可靠性 TCP协议通过确认应答、连接管理、流量控制、拥塞控制来确保可靠性传输&#xff1b;UDP不保证可靠性传输。 性能 TCP传输效率慢&#xff0c;需要较多的资源开销&#xff0c;UDP传输效率快&am…...

Day 1 Vue 页面框架

现在前端框架越来越像后端了&#xff0c;特别是TypeScript这样的语言出现后&#xff0c;开发前端的体验跟后端渐渐接近了。当然&#xff0c;作为一个后端&#xff0c;直接上手前端&#xff0c;还是有很多坑要填的。 本次开发&#xff0c;前端页面框架直接选择Vue。原因很简单&…...

ChatGPT课件汇总介绍

第二节:有效管理 Token,充分发挥 ChatGPT 的能力 OpenAI 官方计算token的测试地址:https://platform.openai.com/tokenizer 第三节:探索ChatGPT在不同领域的创新应用 1、小说撰写 1、我希望你能作为一个小说家。我会给你一个主题,请写出有创意的、吸引人的故事,能够长时…...

自然语言处理---RNN、LSTM、GRU模型

RNN模型 RNN模型概述 RNN(Recurrent Neural Network)&#xff0c;中文称作循环神经网络&#xff0c;它一般以序列数据为输入&#xff0c;通过网络内部的结构设计有效捕捉序列之间的关系特征&#xff0c;一般也是以序列形式进行输出。RNN的循环机制使模型隐层上一时间步产生的…...

rust学习——方法 Method

文章目录 方法 Method定义方法self、&self 和 &mut self方法名跟结构体字段名相同 带有多个参数的方法关联函数多个 impl 定义为枚举实现方法 rust 结构体与枚举的区别回答1回答2 方法 Method 从面向对象语言过来的同学对于方法肯定不陌生&#xff0c;class 里面就充斥…...

目录遍历漏洞

漏洞挖掘之目录遍历漏洞 (baidu.com) 从0到1完全掌握目录遍历漏洞 0x01 什么是目录遍历漏洞 目录遍历漏洞是由于网站存在配置缺陷&#xff0c;导致网站目录可以被任意浏览&#xff0c;这会导致网站很多隐私文件与目录泄露。 比如数据库备份文件、配置文件等&#xff0c;攻击…...

Python基础入门例程10-NP10 牛牛最好的朋友们

目录 描述 输入描述&#xff1a; 输出描述&#xff1a; 示例1 解答&#xff1a; 说明&#xff1a; 描述 牛牛有两个最好的朋友&#xff0c;他们的名字分别用input读入记录在两个字符串中&#xff0c;请使用字符串连接&#xff08;&#xff09;帮助牛牛将两个朋友的名字依…...

html web前端,登录,post请求提交 json带参

html web前端&#xff0c;登录&#xff0c;post请求提交 json带参 3ca9855b3fd279fa17d46f01dc652030.jpg <!DOCTYPE html> <html><head><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /><title></t…...

防火墙实验

防火墙 ping&#xff08;网络测试工具&#xff0c;测试主机之间的可达性&#xff09;原理&#xff1a; 发送一些小的网络数据包&#xff08;ICMP数据包&#xff09;到目标主机&#xff0c;并等待目标主机返回一个响应&#xff08;通常是回显应答 Echo Reply&#xff09;。 ss…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

Linux 文件类型,目录与路径,文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中,手势开发全攻略:

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...