javascript中的强制类型转换和自动类型转换

在这里插入图片描述

✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯,先赞后看哦~🎈🎈

所属专栏:前端泛海
景天的主页:景天科技苑

文章目录

  • 1.转换函数
  • 2.强制类型转换
    • (1)Number类型强转
    • (2)字符串强转
    • (3)布尔强制类型转换
  • 3.自动类型转换

JS 数据类型转换 方法主要有三种

转换函数、强制类型转换、自动类型转换。

1.转换函数

js提供了parseInt(String) -->整数 和parseFloat(String)–> 浮点数。只有对String类型调用这些方法;对其他类型返回的都是NaN(Not a Number)。

在判断字符串是否是数字值前,parseInt()和parseFloat()都会仔细分析该字符串。parseInt()方法首先查看位置0处的 字符,判断它是否是个有效数字;如果不是,该方法将返回NaN,不再继续执行其他操作。但如果该字符是有效数字,该方法将查看位置1处的字符,进行同样的 测试。这一过程将持续到发现非有效数字的字符为止,此时parseInt()将把该字符之前的字符串转换成数字。

例如,如果要把字符串 "1234blue "转换成整数,那么parseInt()将返回1234,因为当它检测到字符b时,就会停止检测过程。字符串中包含的数字字面量会被正确转换为数字,因此 字符串 "0xA "会被正确转换为数字10。不过,字符串 "22.5 "将被转换成22,因为对于整数来说,小数点是无效字符。一些示例如下:

parseInt("1234blue");   //returns   1234 
parseInt("0xA");   //returns   10 
parseInt("22.5");   //returns   22 
parseInt("blue");   //returns   NaN

parseInt()方法还有基模式,可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。基是由parseInt()方法的第二个参数指定的,所以要解析十六进制的值,需如下调用parseInt()方法:
parseInt(“AF”, 16); //returns 175
当然,对二进制、八进制,甚至十进制(默认模式),都可以这样调用parseInt()方法:

parseInt("10",   2);   //returns   2 
parseInt("10",   8);   //returns   8 
parseInt("10",   10);   //returns   10

如果十进制数包含前导0,那么最好采用基数10,这样才不会意外地得到八进制的值。例如:

parseInt("010");   //returns   8 
parseInt("010",   8);   //returns   8 
parseInt("010",   10);   //returns   10

在这段代码中,两行代码都把字符串 "010 "解析成了一个数字。第一行代码把这个字符串看作八进制的值,解析它的方式与第二行代码(声明基数为8)相同。最后一行代码声明基数为10,所以iNum3最后等于10。

parseFloat()方法与parseInt()方法的处理方式相似,从位置0开始查看每个字符,直到找到第一个非有效的字符为止,然后把该字 符之前的字符串转换成数字。不过,对于这个方法来说,第一个出现的小数点是有效字符。如果有两个小数点,第二个小数点将被看作无效的, parseFloat()方法会把这个小数点之前的字符串转换成数字。这意味着字符串 "22.34.5 "将被解析成22.34。
使用parseFloat()方法的另一不同之处在于,字符串必须以十进制形式表示浮点数,而不能用八进制形式或十六进制形式。该
方法会忽略前导0,所以八进制数0908将被解析为908。对于十六进制数0xA,该方法将返回NaN,因为在浮点数中,x不是有效字符。此外,parseFloat()也没有基模式。

下面是使用parseFloat()方法的示例:

parseFloat("1234blue");   //returns   1234.0 
parseFloat("0xA");   //returns   NaN 
parseFloat("22.5");   //returns   22.5 
parseFloat("22.34.5");   //returns   22.34 
parseFloat("0908");   //returns   908 
parseFloat("blue");   //returns   NaN

2.强制类型转换

(1)Number类型强转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>强制转换 - Number</title>
</head>
<body>
    <script>
        // 1. parseInt 强制转换成整型    转化成十进制
        /* 要求: 必须数字开头; 小数部分全部舍弃,非数字开头强转后为NaN*/
        var num = 1.934567; //1
        var num = "abc";    //NaN
        var num = "123";    //123
        var num = "123abc"; //123
        var num = "abc123"; //NaN
        var num = "1.34abc" //1
        var num = []        //NaN 
        var num = false        //NaN 
        var res = parseInt(num); 
        console.log(res ,typeof(res))

在这里插入图片描述
在这里插入图片描述

如果把16进制等其他进制转换成十进制
var res = parseInt(‘abc’,16)
在这里插入图片描述
在这里插入图片描述

number -> string: 数字转化成16进制的字符串
var m = 122;
var n = m.toString(16);
console.log(n);
在这里插入图片描述
在这里插入图片描述

python中进制转换逻辑
在这里插入图片描述

// 2.parseFloat 强制转换成浮点型
/* 要求: 必须数字开头; */
var num = 100; //100
var num = "abc";    //NaN
var num = "123";    //123
var num = "123abc"; //123
var num = "abc123"; //NaN
var num = "1.34abc"; //1.34
var num = {};        //NaN 
var num = true;
var res = parseFloat(num); 
console.log(res ,typeof(res))

在这里插入图片描述
在这里插入图片描述

    // 3.Number类型强转
    /* 要求:必须是存纯数字或者布尔类型*/
    var a = false
    var a = "123.456"; //123
    var res = Number(a)
    console.log(res ,typeof(res))

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

数字开头强转为NaN
在这里插入图片描述

   
    </script>
</body>
</html>

(2)字符串强转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>强制转换 - String</title>
</head>
<body>
    <script>
        /*
            字符串的强转是在原有类型的两边套上引号,表达字符串类型;
        */
        var a = 100;
        var a = 4.89;
        var a = "abc";
        var a = [];
        var a = undefined;
        var a = null;
        var a = NaN;
        var res = String(a);
        console.log(res , typeof(res))

在这里插入图片描述
在这里插入图片描述

空数组强转为空字符串
在这里插入图片描述
在这里插入图片描述

undefined 强转为 “undefined”
在这里插入图片描述
在这里插入图片描述

null强转为 “null”
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

数组强转为 数组里面的值

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

   </script>
    
</body>
</html>

一些常见数据类型转换如下
在这里插入图片描述

(3)布尔强制类型转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>强制转换 - Boolean</title>
</head>
<body>
    
    <script>
        /*
            //布尔类型为假的七中情况:
            0 0.0  ''  NaN undefined null false 
        */
        var a = false;
        var a = null;
        var a = 0;
        var a = 0.0;
        var a = '';
        var a = NaN;
        var a = undefined;
        // 注意点js中 空数组 空对象都是true
        var a = []; // true
        var a = {}; // true
        var res = Boolean(a);
        console.log(res , typeof(res));

在这里插入图片描述
在这里插入图片描述

</script>

</body>
</html>

3.自动类型转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自动类型转换 Number Boolean String 三者之间的转换</title>
</head>
<body>
    <script>
        // 1.Number+Boolean
        var res = 10 + true;
        var res = 3.4 + true;
        var res = 10 + 3.1;
        console.log(res ,typeof(res))

        // 2.Number+Boolean+String (对于字符串来说 +号意味着拼接)
        var res = true + "100";
        var res = 100 + "101" + 100;
        console.log(res,typeof(res))

        // 3.除了+号,剩下的都可以做运算(必须是数值)
        var res = 100 - "101";
        var res = 100 - "99abc";
        console.log(res,typeof(res))

在与数值进行运算时,true会自动转换为1
字符串与带引号的数值进行加法运算,相当于拼接

在这里插入图片描述
在这里插入图片描述

非数值进行除了加法以外的运算,得到的是NaN
在这里插入图片描述
在这里插入图片描述

对象之间加法运算
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

【蓝桥杯】路径之谜(DFS)

一.题目描述 小明冒充 X 星球的骑士&#xff0c;进入了一个奇怪的城堡。 城堡里边什么都没有&#xff0c;只有方形石头铺成的地面。 假设城堡地面是 nn 个方格。如下图所示。 按习俗&#xff0c;骑士要从西北角走到东南角。可以横向或纵向移动&#xff0c;但不能斜着走&#x…

Linux文件描述符剖析

文章目录 文件描述符文件描述符分配规则重定向软硬链接软链接&#xff08;Symbolic Link&#xff09;&#xff1a;硬链接&#xff08;Hard Link&#xff09;&#xff1a; 文件描述符 文件描述符&#xff08;File Descriptor&#xff09;是一个非负整数&#xff0c;用于标识打开…

OJ习题之——圆括号编码

圆括号编码 1.题目描述2.完整代码3.图例演示 1.题目描述 题目描述 令Ss1 s2 …sn是一个规则的圆括号字符串。S以2种不同形式编码&#xff1a; &#xff08;1&#xff09;用一个整数序列Pp1 p2 … pn编码&#xff0c;pi代表在S中第i个右圆括号的左圆括号数量。&#xff08;记为…

C++——string(2)

5. string类非成员函数 上面的几个接口大家了解一下&#xff0c;下面的OJ题目中会有一些体现他们的使用。string类中还有一些其他的 操作&#xff0c;这里不一一列举&#xff0c;大家在需要用到时不明白了查文档即可。 试用rfind、substr、find、find_first_(not)_of void te…

WordPress供求插件API文档:用户登录

该文档为WordPress供求插件文档&#xff0c;详情请查看 WordPress供求插件&#xff1a;一款专注于同城生活信息发布的插件-CSDN博客文章浏览阅读67次。WordPress供求插件&#xff1a;sliver-urban-life 是一款专注于提供同城生活信息发布与查看的插件&#xff0c;该插件可以实…

Java中super关键字作用及解析

在 Java 中&#xff0c;super关键字主要有以下作用&#xff1a; 在子类构造方法中调用父类的构造方法&#xff1a;使用super关键字可以在子类的构造方法中显式调用父类的构造方法&#xff0c;以便继承父类的属性和行为。语法如下&#xff1a;这样可以确保父类的构造方法被正确…

Sora:AI视频生成的新机遇与挑战

随着科技的飞速进步&#xff0c;人工智能&#xff08;AI&#xff09;和机器学习&#xff08;ML&#xff09;技术已经深入渗透到社会的各个领域。其中&#xff0c;Sora这类基于AI的视频生成工具因其高度逼真的生成能力而备受瞩目。然而&#xff0c;正如一枚硬币有两面&#xff0…

Vue+Vue CLI学习

1、Vue基础 1.1、Vue简介 &#xff08;1&#xff09;Javascript框架 &#xff08;2&#xff09;简化Dom操作 &#xff08;3&#xff09;响应式数据驱动 vue基础&#xff1b;vue-cli;vue-router;vuex;element-ui;vue3 vue文件包括html、css、js 1.2、第一个Vue程序 Vue …

python异常机制

当代码出现异常后底下代码都不会被执行了&#xff0c;也就是程序崩溃了。当然能避免异常的话尽量避免但是有的时候这个是没有办法避免的。 异常处理 &#xff08;注&#xff1a;异常处理是从上往下处理&#xff0c;所以编写代码时要注意&#xff09; 语法 try:可能出现异常…

ospf虚链路实验简述

1、ospf虚链路实验简述 ospf虚链路配置 为解决普通区域不在骨干区域旁&#xff0c;通过配置Vlink-peer实现不同区域网络设备之间建立逻辑上的连接。 实验拓扑图 r1: sys sysname r1 undo info enable int loopb 0 ip add 1.1.1.1 32 ip add 200.200.200.200 32 quit int e0/0/…

(sub)三次握手四次挥手

TCP的三次握手与四次挥手理解及面试题 序列号seq&#xff1a;占4个字节&#xff0c;用来标记数据段的顺序&#xff0c;TCP把连接中发送的所有数据字节都编上一个序号&#xff0c;第一个字节的编号由本地随机产生&#xff1b;给字节编上序号后&#xff0c;就给每一个报文段指派一…

男人的玩具系统wordpress外贸网站主题模板

垂钓用品wordpress外贸模板 鱼饵、鱼竿、支架、钓箱、渔线轮、鱼竿等垂钓用品wordpress外贸模板。 https://www.jianzhanpress.com/?p3973 身体清洁wordpress外贸网站模板 浴盐、防蚊液、足部护理、沐浴液、洗手液、泡澡用品wordpress外贸网站模板。 https://www.jianzhan…

Spring揭秘:BeanDefinitionRegistry应用场景及实现原理!

内容概要 BeanDefinitionRegistry接口提供了灵活且强大的Bean定义管理能力&#xff0c;通过该接口&#xff0c;开发者可以动态地注册、检索和移除Bean定义&#xff0c;使得Spring容器在应对复杂应用场景时更加游刃有余&#xff0c;增强了Spring容器的可扩展性和动态性&#xf…

鸿蒙ArkTS语言快速入门-TS(一)

ArkTS与TS的学习 ArkTS与TS的关系简述TypeScript&#xff08;TS&#xff09;简述基础类型1&#xff0c;let2&#xff0c;const3&#xff0c;布尔类型4&#xff0c;数字number5&#xff0c;字符串string6&#xff0c;数组Array7&#xff0c;元组 Tuple8&#xff0c;枚举 enum9&a…

【设计模式 05】原型模式

有的时候&#xff0c;我们创建对象&#xff0c;需要耗费大量时间在一些资源型操作上&#xff0c;这个时候&#xff0c;我们就可以先创建出一个模板&#xff0c;然后每次创建的时候直接从模板复制即可&#xff0c;不用反复进行耗时的资源型操作。 python代码&#xff1a; impo…

Vue-Router使用

1.安装 npm install vue-router4 2. 添加路由 新建router文件夹&#xff0c;新建文件 index.ts import { createRouter, createWebHashHistory,createWebHistory} from "vue-router";const routes [{path: /login,component: () > import("../views/Logi…

18个惊艳的可视化大屏(第19辑):工业制造、智能工厂

实时监控和数据展示 可视化大屏可以集成和展示各种传感器、设备和系统的实时数据。通过将数据可视化展示在大屏上&#xff0c;工厂管理人员可以实时监控生产线的状态、设备的运行情况、生产效率等重要指标。这有助于及时发现问题、做出决策&#xff0c;并提高生产效率和质量。…

粉色ui微信小程序源码/背景图/头像/壁纸小程序源码带流量主

云开发版粉色UI微信小程序源码&#xff0c;背景图、头像、壁纸小程序源码&#xff0c;带流量主功能。 云开发小程序源码无需服务器和域名即可搭建小程序另外还带有流量主功能噢&#xff01;微信平台注册小程序就可以了。 这套粉色UI非常的好看&#xff0c;里面保护有背景图、…

数学建模【模糊综合评价分析】

一、模糊综合评价分析简介 提到模糊综合评价分析&#xff0c;就先得知道模糊数学。1965年美国控制论学家L.A.Zadeh发表的论文“Fuzzy sets”标志着模糊数学的诞生。 模糊数学又称Fuzzy数学&#xff0c;是研究和处理模糊性现象的一种数学理论和方法。模糊性数学发展的主流是在…

C++:拷贝构造函数

1.概念 在现实生活中&#xff0c;可能存在一个与你一样的自己&#xff0c;我们称之为双胞胎。那在创建对象的时候&#xff0c;可否创建一个与已存在对象一模一样的新对象呢&#xff1f;答案是可以的&#xff0c;这就要通过拷贝构造函数来实现了。 拷贝构造函数&#xff1a;只有…