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

news2024/11/26 9:44:18

在这里插入图片描述

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

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

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

文章目录

  • 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
在这里插入图片描述
在这里插入图片描述

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

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

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

相关文章

数字社交时代的引领者:Facebook的元宇宙探索

引言&#xff1a; 在当今数字社交时代&#xff0c;人们的社交方式正在经历着翻天覆地的变化。随着虚拟现实技术的不断发展和元宇宙概念的崛起&#xff0c;社交网络正朝着一个全新的未来迈进。作为全球最大的社交网络平台之一&#xff0c;Facebook正在积极探索元宇宙时代的社交…

串联谐振电路基础知识1

电路图 公式 IU/Zin,其中ZinXLXCR XC&#xff1a;表示为容抗 XL&#xff1a;表示为感抗 R&#xff1a;表示为电阻阻值 特性 电感对越是高频的电流的阻力就会越大&#xff0c;对越是低频的电流的阻力就会越小&#xff0c;感抗的大小是与频率是息息相关的&#xff0c;并且可简单…

Spring事务管理与模板对象

1.事务管理 1.事务回顾 事务指数据库中多个操作合并在一起形成的操作序列 事务的作用 当数据库操作序列中个别操作失败时&#xff0c;提供一种方式使数据库状态恢复到正常状态&#xff08;A&#xff09;&#xff0c;保障数据库即使在异常状态下仍能保持数据一致性&#xff…

时钟显示 html JavaScript

sf.html <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>时间</title><script>function showTime(){var timenew Date();var datetime.getDate();var yeartime.getFullYear();var monthtime.getMonth()1;var …

DataGrip 连接 Centos MySql失败

首先检查Mysql是否运行&#xff1a; systemctl status mysqld &#xff0c; 如果显示没有启动则需要启动mysql 检查防火墙是否打开&#xff0c;是否打开3306的端口 sudo firewall-cmd --list-all 如果下面3306没有打开则打开3306端口 publictarget: defaulticmp-block-inver…

推荐书籍《低代码平台开发实践:基于React》—— 提升开发效率,构建优质应用

写在前面 随着数字化转型的深入&#xff0c;企业对应用开发效率和灵活性的要求不断提高。低代码平台作为新兴的软件开发方式&#xff0c;通过可视化界面和预构建组件&#xff0c;极大简化了应用开发流程&#xff0c;降低了技术门槛。基于React的低代码平台以其组件化、响应式和…

解决MySQL 5.7在Redhat 9中启动报错:libncurses.so.5和libtinfo.so.5缺失问题

在使用Linux系统搭建MySQL数据库的过程中&#xff0c;我们往往会遇到各种依赖库的问题&#xff0c;尤其是在安装较旧版本的MySQL时。最近&#xff0c;在RedHat 9&#xff08;rocky linux 9&#xff09;系统上安装MySQL 5.7版本时&#xff0c;我遇到了一个典型的依赖库缺失错误&…

动态规划(算法竞赛、蓝桥杯)--状态压缩DP蒙德里安的梦想

1、B站视频链接&#xff1a;E31 状态压缩DP 蒙德里安的梦想_哔哩哔哩_bilibili #include <bits/stdc.h> using namespace std; const int N12,M1<<N; bool st[N];//st[i]存储合并列的状态i是否合法 long long f[N][M];//f[i][j]表示摆放第i列&#xff0c;状态为…

常用“树”数据结构

哈夫曼树 在许多应用中&#xff0c;树中结点常常被赋予一个表示某种意义的数值&#xff0c;称为该结点的权。从树的根到任意结点的路径长度(经过的边数)与该结点上权值的乘积&#xff0c;称为该结点的带权路径长度。树中所有叶结点的带权路径长度之和称为该树的带权路径长度&am…

有没有无损格式转换mp3的方法?

随着数字音乐的发展&#xff0c;无损音乐格式如FLAC、APE、WAV等越来越受到音乐爱好者的青睐。无损音乐保证了音乐在传输和存储过程中不损失任何原始信息&#xff0c;从而保留了音乐的原汁原味。但有时&#xff0c;出于设备兼容性、空间节省或其他原因&#xff0c;我们可能需要…

C语言项目实战——贪吃蛇

C语言实现贪吃蛇 前言一、 游戏背景二、游戏效果演示三、课程目标四、项目定位五、技术要点六、Win32 API介绍6.1 Win32 API6.2 控制台程序6.3 控制台屏幕上的坐标COORD6.4 GetStdHandle6.5 GetConsoleCursorInfo6.5.1 CONSOLE_CURSOR_INFO 6.6 SetConsoleCursorInfo6.7 SetCon…

Ubuntu/Linux系统下Redis的基本操作命令

版本查询 redis-server --version # 或者redis-server -v 如上图所示&#xff0c;redis-server的版本为6.0.9,证明redis已经安装完成。 启动Redis服务 启动命令如下&#xff1a; redis-server启动成功如下所示&#xff1a; 启动过程中遇到如下问题时&#xff0c;杀死指定端…

Python Web开发记录 Day6:MySQL(关系型数据库)

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 六、MySQL1、MySQL-概述和引入①MySQL是什么&am…

阿里云几核服务器够用?内存多少合适?

阿里云服务器配置怎么选择&#xff1f;CPU内存、公网带宽和系统盘怎么选择&#xff1f;个人开发者或中小企业选择轻量应用服务器、ECS经济型e实例&#xff0c;企业用户选择ECS通用算力型u1云服务器、ECS计算型c7、通用型g7云服务器&#xff0c;阿里云服务器网aliyunfuwuqi.com整…

【论文精读】Mask R-CNN

摘要 基于Faster RCNN&#xff0c;做出如下改变&#xff1a; 添加了用于预测每个感兴趣区域(RoI)上的分割掩码分支&#xff0c;与用于分类和边界框回归的分支并行。mask分支是一个应用于每个RoI的FCN&#xff0c;以像素到像素的方式预测分割掩码&#xff0c;只增加了很小的计…

倒计时34天

L2-1 堆宝塔 - B107 2023级选拔春季开学测重现 (pintia.cn) #include<bits/stdc.h> using namespace std; //#define int long long const int N2e56; const int inf0x3f3f3f3f; const double piacos(-1.0); vector<int>ve1,ve2; vector<vector<int> >…

推荐一个数据库脚本在线转换网站

由于各种数据库系统的功能、性能有差异&#xff0c;往往不同的项目会选用不同的数据库系统。同时&#xff0c;由于sql语法之间存在细微的差异&#xff0c;之前项目的脚本&#xff0c;就需要修改&#xff0c;并重新进行调试。鉴于这个出发点向大家推荐一个sql脚本转换的在线网站…

STM32 | 零基础 STM32 第一天

零基础 STM32 第一天 一、认知STM32 1、STM32概念 STM32:意法半导体基于ARM公司的Cortex-M内核开发的32位的高性能、低功耗单片机。 ST:意法半导体 M:基于ARM公司的Cortex-M内核的高性能、低功耗单片机 32&#xff1a;32位单片机 2、STM32开发的产品 STM32开发的产品&a…

Scikit-Learn逻辑回归

Scikit-Learn逻辑回归 1、逻辑回归概述1.1、逻辑回归1.2、逻辑回归的优缺点1.3、逻辑回归与线性回归2、逻辑回归的原理2.1、逻辑回归的概念与原理2.2、逻辑回归的损失函数2.3、梯度下降法求解逻辑回归的最优解3、Scikit-Learn逻辑回归3.1、决策边界3.2、Scikit-Learn逻辑回归AP…

Hololens 2应用开发系列(3)——MRTK基础知识及配置文件配置(中)

Hololens 2应用开发系列&#xff08;3&#xff09;——MRTK基础知识及配置文件配置&#xff08;中&#xff09; 一、前言二、输入系统2.1 MRTK输入系统介绍2.2 输入数据提供者&#xff08;Input Data Providers&#xff09;2.3 输入动作&#xff08;Input Actions&#xff09;2…