当前位置: 首页 > 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…...

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

JS设计模式(4):观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

【Redis】笔记|第8节|大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...