JavaScript的数据类型(基础数据类型和数据类型转换)

news2024/10/6 8:37:53

天行健,君子以自强不息;地势坤,君子以厚德载物。


每个人都有惰性,但不断学习是好好生活的根本,共勉!


文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。

文章目录

  • JS的数据类型
    • 1. 基础数据类型
      • 1.1 数据类型介绍
      • 1.2 示例代码
    • 2. 数据类型转换
      • 2.1 转为number类型
      • 2.2 值转为字符串string类型
      • 2.3 值转为布尔类型
    • 3. 本文示例代码资源下载


JS系列篇:
JS(JavaScript)入门学习指南
JS(JavaScript)学习专栏


JS的数据类型

1. 基础数据类型

1.1 数据类型介绍

js中基础的数据类型有以下几种

中文名称类型名称备注
字符串类型string
数字类型numberNaN表示非数字,Not a Number,但NaN本身是number类型,表示数值异常
布尔类型boolean
空类型null
未定义类型undefined

1.2 示例代码

代码中定义了不同类型的数据,并打印了数据对应的类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>核心语法-数据类型</title>


    <script>
        /*
            数据类型
        */
       //字符串
        var name = "libai";
        //数值
        var age = 20;
        //浮点数
        var height = 174.1;
        //bool值
        var isHaves = false;
        //空值null
        var wifeList = null;
        //日期类型值
        var date = new Date;
        //数组类型值
        var arr = new Array();
        //未定义的值undefined
        var achievement;
        //NaN的值,这里使用字符与数字作减法,会得到一个异常值,NaN
        var ass = "libai"-2;

        /*
            控制台打印
        */
        
        //字符串string类型
        console.log(typeof name);
        //数值number类型
        console.log(typeof age);
        //数值number类型
        console.log(typeof height);
        //布尔boolean类型
        console.log(typeof isHaves);
        //空值null会打印为object类型
        console.log(typeof wifeList);
        //日期值会打印为object类型
        console.log(typeof date);
        //数组值会打印为object类型
        console.log(typeof arr);
        //未定义类型undefined
        console.log(typeof achievement);
        //异常数值结果打印为NaN
        console.log(typeof "libai"-2);
        //异常数值NaN的类型为Number
        console.log(typeof ass);
        console.log(typeof NaN);



    </script>

</head>
<body>
    
</body>
</html>

浏览器打印结果
在这里插入图片描述

2. 数据类型转换

不同的数据类型可以相互转换,以下介绍几种常见的类型转换

2.1 转为number类型

将值转为number数字类型有三种方法Number()、parseInt()、parseFloat()

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>核心语法-类型转换</title>

    <script>

        /*
            类型转换-转换为number
        */
       var n = '12';
       console.log(typeof n);
       console.log(n, typeof n);

       console.log('--------------------------------------');

       //使用Number()转换----------------------------------------

       var n1 = Number('12');
       //返回数值12,类型number
       console.log(n1, typeof n1);

       var n2 = Number('12.2');
       //返回数值12.2,类型number
       console.log(n2, typeof n2);

       var n3 = Number('12bbs');
       //返回NaN,类型number
       console.log(n3, typeof n3);

       var n4 = Number('bbs12');
       //返回返回NaN,类型number
       console.log(n4, typeof n4);

       var n5 = Number(false);
       //返回返回0,类型number,注意:在boolean类型的值转换位number时ture会转为1,false会转为0
       console.log(n5, typeof n5);

       console.log('--------------------------------------');

       //使用parseInt()转换--------------------------------------

       var pI1 = parseInt('12');
       //返回数值12,类型number
       console.log(pI1, typeof pI1);

       var pI2 = parseInt('12.2');
       //返回数值12,只保留了整数部分,类型number
       console.log(pI2, typeof pI2);

       var pI3 = parseInt('12bbs');
       //返回数值12,类型number,parseInt方法将字符串从左到右解析,将12解析为数值
       console.log(pI3, typeof pI3);

       var pI4 = parseInt('bbs12');
       //返回返回NaN,类型number,parseInt方法将字符串从左到右解析,开始就不是数值故解析不出数值,转为异常数值NaN
       console.log(pI4, typeof pI4);

       console.log('--------------------------------------');

       //使用parseFloat转换--------------------------------------

       var pF1 = parseFloat('12');
       //返回数值12,类型number
       console.log(pF1, typeof pF1);

       var pF2 = parseFloat('12.2');
       //返回数值12.2,类型number
       console.log(pF2, typeof pF2);

       var pF3 = parseFloat('12.2bbs');
       //返回数值12.2,类型number,parseFloat方法将字符串从左到右解析,将12.2解析为数值
       console.log(pF3, typeof pF3);

       var pF4 = parseFloat('bbs12');
       //返回返回NaN,类型number,parseFloat方法将字符串从左到右解析,开始就不是数值故解析不出数值,转为异常数值NaN
       console.log(pF4, typeof pF4);



    </script>


</head>
<body>
    
</body>
</html>

打印结果
在这里插入图片描述

2.2 值转为字符串string类型

拼接空字符串即可将现有类型的值转为字符串类型
示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>核心语法-类型转换</title>

    <script>

        /*
            类型转换-转换为string
        */
       //number数值转为字符串
       var n = 12;
       console.log(n, typeof n);

       n = n + "";
       console.log(n, typeof n);

       console.log('--------------------------------------');

       //boolean布尔值转为字符串
       var b = false;
       console.log(b, typeof b);

       b = b + "";
       console.log(b, typeof b);


    </script>


</head>
<body>
    
</body>
</html>

打印结果
在这里插入图片描述

2.3 值转为布尔类型

使用Boolean()方法将值转为布尔类型
注:0、空字符串、null、undefined、NaN都会被转成false,其他值会被转换为ture
示例代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>核心语法-类型转换</title>

    <script>

        /*
            类型转换-转换为布尔值(boolean)
        */
       //number数值转为布尔值
       var n = Boolean(11);
       //转换结果为true,类型boolean
       console.log(n, typeof n);

       console.log('--------------------------------------');

       //number数值转为布尔值
       var n0 = Boolean(0);
       //转换结果为true,类型boolean
       console.log(n0, typeof n0);

       console.log('--------------------------------------');

       //字符串值转为布尔值
       var str = Boolean("libai");
       //转换结果为true,类型boolean
       console.log(str, typeof str);

       console.log('--------------------------------------');

       //空值null转为布尔值
       var nu = Boolean(null);
       //转换结果为false,类型boolean
       console.log(nu, typeof nu);

       console.log('--------------------------------------');

       //未定义的值转为布尔值
       var unded = Boolean(undefined);
       //转换结果为false,类型boolean
       console.log(unded, typeof unded);

       console.log('--------------------------------------');

       //异常数值NaN转为布尔值
       var na = Boolean(NaN);
       //转换结果为false,类型boolean
       console.log(na, typeof na);

       console.log('--------------------------------------');


       //综上,0、空字符串、null、undefined、NaN都会被转成false,其他值会被转换为ture
       //那么在if语句中的条件,不仅可以使用条件语句或者true值,也可以直接使用数字或者字符串作为true
       if("libai"){
        //条件为true则打印
        console.log(10086);
       }
       if(null){
        //条件为false,不会打印
        console.log(10010);
       }



    </script>


</head>
<body>
    
</body>
</html>

打印结果
在这里插入图片描述

3. 本文示例代码资源下载

本文中的示例代码文件已上传到CSDN资源库
下载地址:JavaScript js数据类型及类型转换 示例代码


感谢阅读,祝君暴富!

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

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

相关文章

华为OD技术面试-统计全1子矩形-2024手撕代码真题

题目描述: 给你一个 m x n 的二进制矩阵 mat ,请你返回有多少个 子矩形 的元素全部都是 1 。 示例 1: 输入:mat = [[1,0,1],[1,1,0],[1,1,0]] 输出:13 解释: 有 6 个 1x1 的矩形。 有 2 个 1x2 的矩形。 有 3 个 2x1 的矩形。 有 1 个 2x2 的矩形。 有 1 个 3x1 的矩形。…

MySQL的发展历程:欧洲诞生,中国兴盛,美国低谷

目录 1 早期历史 2 成长与发展 3 重大变化和收购 4 现代发展 5 结语 一直比较写一些数据库相关的技术和操作、优化等文章。但写数据库在中国一般也逃脱不了MySQL这个数据库。下面简单谈一些个人看法。 MySQL整体上是起于欧洲&#xff1a; 一直有开源社区运营&#xff0c…

掌握Google搜索结果获取

在数据驱动的决策世界中&#xff0c;获取准确而全面的信息至关重要。Google 搜索结果抓取是一种强大的技术&#xff0c;可以让企业、调查人员和研究人员从搜索引擎结果中提取可靠的数据。本综合指南将深入研究 Google 搜索结果的最佳实践、工具和道德考量&#xff0c;以确定能够…

React 懒加载源码实现

懒加载 React 中懒加载是一种按需加载组件的机制&#xff0c;有些组件不需要在页面初始化就进行加载&#xff0c;这些组件可以按需加载&#xff0c;当需要时再进行加载。懒加载是怎么实现的呢&#xff1f;如果要实现一个懒加载功能应该怎么去做呢&#xff1f;可以通过异步动态…

勒索病毒搜索引擎

360勒索病毒搜索引擎 https://lesuobingdu.360.cn/ 腾讯勒索病毒搜索引擎 https://guanjia.qq.com/pr/ls/ VenusEye勒索病毒搜索引擎 https://lesuo.venuseye.com.cn/ 奇安信勒索病毒搜索引擎 https://lesuobingdu.qianxin.com/index/getFile 深信服勒索病毒搜索引擎…

【LLM之RAG】RAFT论文阅读笔记

研究背景 论文针对的主要问题是如何将预训练的大型语言模型&#xff08;LLMs&#xff09;适应特定领域的检索增强生成&#xff08;RAG&#xff09;。这些模型通常在广泛的文本数据上进行预训练&#xff0c;已经表现出在广义知识推理任务上的优越性能。然而&#xff0c;在特定领…

wms仓库管理系统对海外仓管理有帮助吗,有必要自己开发吗?

作为链接国内电商和国外消费者的中间环节&#xff0c;海外仓的重要性自然是不言而喻的。而要想服务好这些出海的商家&#xff0c;提供更加快捷、高效率的仓储物流服务&#xff0c;就需要海外仓企业自己不断提升效率&#xff0c;精细化管理模式。 wms仓库管理系统作为现代仓储物…

Docker 国内镜像源更换

实现 替换docker 镜像源 前提要求 安装 docker docker-compose 参考创建一键更换docker国内镜像源 Docker 镜像代理DaoCloud 镜像站百度云 https://mirror.baidubce.com南京大学镜像站

ArcGIS 10.8软件安装包免费下载及安装教程

安装包获取&#xff1a; 【软件名称】&#xff1a;ArcGIS 10.8 【安装包链接 】&#xff1a; 链接&#xff1a;https://pan.quark.cn/s/2240330bf935 提取码&#xff1a;Yixn 【备用链接】&#xff1a; 链接:https://pan.baidu.com/s/13V5o_igcK0suW4SFsWkxeQ?pwdj6kx 提取码…

Docker 基础使用(5)Compose

文章目录 Docker Compose 基础认识Docker Compose 基础语法Docker Compose 基础指令Docker Compose 使用实例 Docker 基础使用(0&#xff09;基础认识 Docker 基础使用(1&#xff09;使用流程概览 Docker 基础使用(2&#xff09;镜像与容器 Docker 基础使用(3&#xff09;存储卷…

MySQL-数据处理函数(-1)

033-数据处理函数之获取日期时间 now()&#xff1a;获取的是执行select语句的时刻。sysdate()&#xff1a;获取的是执行sysdate()函数的时刻。 select now(), sleep(2), sysdate();获取当前日期 select curdate(); select current_date(); select current_date;获取当前时间…

30岁迷茫?AI赛道,人生新起点

前言 30岁&#xff0c;对于许多人来说&#xff0c;是一个人生的分水岭。在这个年纪&#xff0c;有些人可能已经在某个领域取得了不小的成就&#xff0c;而有些人则可能开始对未来的职业方向感到迷茫。如果你正处于这个阶段&#xff0c;那么你可能会问自己&#xff1a;30岁转行…

numpy创建二维数组

1.numpy.array(object, dtypeNone, copyTrue, orderK, subokFalse, ndmin0) # 创建一个数组&#xff0c;将输入对象转换为数组。 # 如果输入对象是列表&#xff0c;元组或数组&#xff0c;则创建一个数组&#xff0c;并将输入对象中的元素复制到数组中。 arr np.array([[1, 2…

低代码平台与无代码平台,有哪些相同点和不同点

低代码和无代码 低代码&#xff08;Low-Code&#xff09;是一种软件开发方法&#xff0c;它使得开发人员能够通过图形界面、拖放组件和模型驱动的逻辑&#xff0c;快速地构建和部署应用程序&#xff0c;而无需编写大量的代码。而低代码平台就是使用低代码的方式进行开发&#…

STL——Stacks容器

一、stack 1.操作 语法: <><>!所有的这些操作可以被用于堆栈. 相等指堆栈有相同的元素并有着相同的顺序。 2.empty 语法: bool empty();如当前堆栈为空&#xff0c;empty() 函数 返回 true 否则返回false. 3.pop 语法: void pop();pop() 函数移除堆栈中最顶层元…

Nginx 版本升级方案

因 nginx发现漏洞、需 Nginx 的版本进行更新&#xff0c;需要用到Nginx服务器提供的平滑升级功能。 一、Nginx安装 Linux服务器 离线安装 nginx_linux 离线安装nginx 依赖包 百度云-CSDN博客 二、查看已安装的 Nginx 版本信息&#xff0c;configure 配置信息 ## nginx 目录 /…

数据爱好者的综合指南——Google篇

在数据驱动的决策世界中&#xff0c;获取准确而全面的信息至关重要。Google 搜索结果抓取是一种强大的技术&#xff0c;可以让企业、调查人员和研究人员从搜索引擎结果中提取可靠的数据。本综合指南将深入研究 Google 搜索结果的最佳实践、工具和道德考量&#xff0c;以确定能够…

C# Interlocked 原子操作

目录 注解 方法 适用于 案例 1&#xff1a;Add 对两个整数进行求和并用和替换第一个整数&#xff0c;上述操作作为一个原子操作完成 2&#xff1a;Exchange Exchange(UInt32, UInt32) 以原子操作的形式&#xff0c;将 32 位无符号整数设置为指定的值并返回原始值。 参考…

【python - 函数】

一、测试 如果我们写出一下一些泛化的函数&#xff0c;①计算边长为r的正方形面积②半径为r的圆的面积③边长为r的六边形面积。 我们运行代码计算一下边长为10的六边形面积&#xff0c;可以看到它约等于260&#xff0c;但是我们计算一下边长为-10的六边形面积它也同样成功了&…

帝国CMS火车头采集发布模块详细使用方法

火车头采集文章数据发布到帝国CMS系统操作步骤如下&#xff1a; 1. 下载火车头采集帝国cms发布模块&#xff1a;帝国cms发布模块接口下载地址&#xff08;免登录&#xff09;-CSDN &#xff1b; 2. 帝国cms发布模块导入火车头采集软件&#xff1b; 3. 填写帝国cms数据库中相…