JavaScript数据类型的学习

最新推荐文章于 2024-07-29 13:58:45 发布
最新推荐文章于 2024-07-29 13:58:45 发布
阅读量1k 收藏 1
点赞数 2
分类专栏： JavaScript 文章标签： javascript css html html5
有何
本文链接：https://blog.csdn.net/Hu3537596649/article/details/108556577
版权

数据类型

1、数据类型概述：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
     //JavaScript中的变量类型没有类型的限制，相互之间可以转换；
     //只有在程序运行后，通过等号后边的值才可以看出数据类型；
        var num=100;
        num='老大';
        console.log(num);
    </script>
</head>
<body>

</body>
</html>

2、数字类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //数字类型  即小数和整数
        var num01=20;
        var num02=23.78;
        console.log(num01);
        console.log(num02);
        //1、  0 开头的是八进制
        var num03=012;
        console.log('012转为十进制：'+num03);//输出出来是十进制
        //2、 以0x开头的是十六进制
        var num04=0xa;
        console.log('0xa转为十进制：'+num04);//输出出来是十六进制

        // 3、数字类型的最大值
        console.log(Number.MAX_VALUE);
        //4、数字类型的最小值
        console.log(Number.MIN_VALUE);
        // 5、无穷大
        console.log(Number.MAX_VALUE*2);//结果：Infinity
        // 6、无穷小
        console.log(-Number.MIN_VALUE);
        // 7、非数字
        console.log('我自己' - 200);//结果：NaN
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

3、isNaN方法

概述：isNaN 用于判断数字，如果该值是数字 则返回false 否则返回true

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //isNaN 用于判断数字，如果该值是数字  则返回false  否则返回true
        var num=12;
        console.log(isNaN(num));//
        var num01='老大';
        console.log(isNaN(num01));
    </script>
</head>
<body>

</body>
</html>

4、String类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //转义字符 \'  单引号  \n  newLine 新行即换行的意思
        var str='我自己\n\'老大\'';
        console.log(str);
    </script>
</head>
<body>

</body>
</html>
1、弹出网页警示框
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        alert('"君不见，黄河之水天上来，奔流到海不复回。\n' +
            '君不见，高堂明镜悲白发，朝如青丝暮成雪。\n' +
            '人生得意须尽欢，莫使金樽空对月。\n' +
            '天生我材必有用，千金散尽还复来。\n' +
            '烹羊宰牛且为乐，会须一饮三百杯。\n' +
            '岑夫子，丹丘生，将进酒，杯莫停。"');
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

2、字符串长度
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var str='My name is 老大';
        console.log('字符串长度：'+str.length);
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

3、字符串拼接

概述：多个字符串之间可以使用+进行拼，拼接方式为字符串+任何类型=拼接之后的新字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        console.log('1'+'2');//字符之间的拼接
        console.log(1+2);//数字类型之间的拼接
        console.log('我时间'+20);
        var age=20;
        console.log('老大'+age);
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

4、案例01
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
       var age=prompt('请输入你的年龄：');
       var str='我今年'+age+'岁！';
       alert(str);
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

5、布尔型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var flag=true;
        var flag01=false;
        console.log(flag+1);//布尔值true表示真  参与运算时默认是1
        console.log(flag01+1);//布尔值false表示假  参与运算时默认是0
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

6、Undefined和Null

概述：一个声明没有被赋值的变量会有一个默认值undefined（如果进行相连或者相加时，注意结果！）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var age;
        console.log(age);//undefined 表示未定义的
        var variable=undefined;
        console.log(variable+'老大');//undefined老大
        console.log(variable+1);//NaN 表示不是一个数字
        var Null=null;
        console.log('老大'+Null);//老大null
        console.log(1+Null);//1
    </script>
</head>
<body>

</body>
</html>

7、typeof

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //typeof 判断类型
        var str='老大';
        console.log(typeof str);
        console.log(typeof true);
        console.log(typeof 12);
        var age=prompt('请输入你的年龄');
        console.log(typeof age);
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

根据控制台颜色判断类型
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //1.typeof 判断类型
        console.log(typeof 12);

        //2.根据控制台输出的颜色，判断类型
        console.log(12);
        console.log(null);
        console.log(undefined);
        console.log(true);
        console.log('12');

    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

8、数据类型转换

方式说明案例
toString()转换字符串console.log(‘类型：’+typeof num.toString());
String()强制转换转成字符串console.log(‘类型：’+typeof String(num));
加号拼接字符串和字符串拼接都是字符串var str=‘我’+num; console.log(‘类型：’+typeof str);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var num=1;
        console.log('类型：'+typeof num.toString());
        console.log('类型：'+typeof String(num));
        var str='我'+num;
        console.log('类型：'+typeof str);
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

9、转换为数字型

方式说明案例
parselnt(string)函数将string类型转为整数类型console.log(parseInt(‘23’));
parseFloat(string)函数将string类型转成浮点数值类型console.log(parseFloat(‘3.14’));//3.14
Number()强制转换函数将string类型转换为数值类型var str=‘123’; console.log(Number(str));
js 隐式转换（- * /）利用算术运算隐式转为数值型console.log(str - 120); console.log(str * 3);console.log(str / 123);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        console.log(parseInt('23'));
        console.log(parseInt('rem23'));//NaN
        console.log(parseInt('3.4'));//3 取整
        console.log(parseInt('120px'));//120
        console.log(parseFloat('3.14'));//3.14
        console.log(parseFloat('rem3.14'));//NaN
        console.log(parseFloat('120px'));//120
    </script>
</head>
<body>
</body>
</html>
案例01
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //计算年龄
        var year=prompt('请输入你的年份：');
        var age=2020-year;
        alert('你的年龄是：'+age+'岁');
    </script>
</head>
<body>

</body>
</html>
案例02
两数相加
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var num01=prompt('请输入第一个值：');
        var num02=prompt('请输入第二个值：');
        var sum=Number(num01)+Number(num02);
        alert('相加结果：'+sum);
    </script>
</head>
<body>

</body>
</html>

10、转换为布尔型

方式说明案例
Boolean()函数其他类型转换成布尔值Boolean(‘true’);

1.代表空，否定的值会被转换为false,如“0，NaN,null,undefined”;

2.其余值都会被转换为true；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        console.log(Boolean(''));
        console.log(Boolean(0));
        console.log(Boolean(NaN));
        console.log(Boolean(undefined));
        console.log(Boolean(null));
        console.log('--------------------------');
        console.log(Boolean('小白'));
        console.log(Boolean(12));
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

Hu3537596649
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript数据类型学习笔记
10-22
在JavaScript中，数据类型分为两种：基本数据类型（简单数据类型）和复杂数据类型。 基本数据类型包括Undefined、Null、Boolean、Number和String。这些类型的值在内存中占据固定大小的空间，它们是非引用类型，意味...
JS数据类型
C_755028787的博客
12-08 125
js数据类型 js中有六种数据类型，包括五种基本数据类型（Number,String,Boolean,Undefined,Null）,和一种复杂数据类型（Object）。 1.Number类型 Number类型包含整数和浮点数（浮点数数值必须包含一个小数点，且小数点后面至少有一位数字）两种值。 NaN:非数字类型。特点：① 涉及到的 任何关于NaN的操作，都会返回NaN ② NaN不等于自身。...
你猜猜typeof (typeof 1) 会返回什么值（类型）？！
weixin_34179762的博客
04-03 3914
typeof typeof操作符返回一个字符串，表示未经计算的操作数的类型。 语法： var num = a; console.log(typeof (num)); 或console.log(typeof num) 复制代码typeof 可以返回的类型为：number、string、boolean、undefined、null、object、function还有新的symbol（详见MDN） /...
JavaScript数据类型学习笔记分享
10-21
主要为大家分享了JavaScript数据类型学习笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript权威指南 学习笔记之javascript数据类型
10-28
根据给定的【标题】"javascript权威指南 学习笔记之javascript数据类型"和【描述】，我们可以深入探讨JavaScript中的数据类型及其特点。 首先，JavaScript支持三种基本数据类型：数字（Number）、字符串（String）...
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 640
JavaScript青少年简明教程：函数及其相关知识（下）
【React 】开发环境搭建详细指南
lph159的博客
07-24 1328
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 864
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 255
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 211
【代码】vue el-select的下拉树形结构。
新手vue学习问题汇总（自用）（长期更新）
lapiii的博客
07-28 354
是 ES6 模块语法，用于导出模块的默认成员。在 Vue.js 中，通常用来导出一个组件对象，使其可以在其他文件中被导入并使用。
angular入门基础教程(四）动态属性与事件
最新发布
峰会路转的博客
07-29 103
状态的变化导致属性值的变化，这个时候我们就需要用到动态属性，ng中的动态属性用[]包裹即可。
easyui 点击单元格的时候，获取该行另外一个字段的值
极客栈
07-29 315
通过绑定 DataGrid 的 ​​ 事件，可以轻松地在单击单元格时获取该行的其他字段值。这个方法适用于各种场景，比如在用户点击某个单元格时显示额外的信息、执行特定的操作等。希望这个示例能帮助你更好地理解和应用 EasyUI DataGrid 的事件处理。
easyadmin layui js监听返回结果，进行token验证防止连点
weixin_43652106的博客
07-29 199
easyadmin layui js监听返回结果，进行token验证防止连点
Vue3可媲美Element Plus Tree组件实战之移除节点
felix_alone2012的博客
07-25 646
《Element Plus Tree - 自定义节点内容》示例中介绍了移除节点的用法，个人觉得作为提供给用户API，应该遵循迪米特法则，把功能实现的细节封装在组件内部，而提供给用户最简单的操作方式，同时在此基础上支持用户的扩展。因此，在API使用的人性化方便，个人觉得element plus做的并不优秀。为此，我们自定义tree组件时对用户API可以设计的更人性化些。
Angular由一个bug说起之八：实践中遇到的一个数据颗粒度的问题
KenkoTech的博客
07-24 875
之所以使用这种比较直接的方式是因为项目中的数据类型已经确定，而且对数字的处理逻辑没有统一在一个文件中。这是大型项目经常遇到的问题，起到相同作用的代码因为一些小的差别而分别写在管理各自功能的文件里。文件存入数据库，这样我们就可以统一维护一个表，不管是前端来处理数据还是后端来处理都能遵守相同的规则。针对这篇文章提到的数字缩写的问题，可以有两种处理方案。来展示数据的功能，这些数据根据不同的类型和单位会为其加上前缀、后缀或者省略小数。
爬虫基本原理入门
RHeng的博客
07-25 1142
爬虫（Web Crawler），又称为网络爬虫或网页蜘蛛，是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本。它们可以模拟浏览器行为，遍历网页并抓取网页中的信息，如文本、图片、链接等。接下来，我们会尝试使用Python等编程语言，结合相关库和工具，动手编写自己的爬虫程序，探索更多关于爬虫技术的奥秘。
让开发者生活更轻松的 JavaScript 字符串方法
粉丝们务必加入微信粉丝群
07-27 228
前端岗位内推来了JavaScript 最初被引入作为一种简单的客户端脚本语言，但现在，它已经成为一种真正的 WORA（一次编写到处运行）语言，使开发者能够构建桌面、移动、电视、CLI 和嵌入式应用程序。JavaScript 的初学者友好语法、生产性语言特性和良好管理的 ECMAScript 规范，激励了所有人使用 JavaScript 进行通用编程。ECMAScript 标准通过提供许多语言特性来...
Vue3学习总结
inside802的博客
07-28 308
9、计算属性：使用computed属性，可以给template传递一个经过计算后的值，当这个值放在缓存中，当这个值不发生改变时，则JS不会再次执行computed，这样就能提高运行速度。4、属性绑定：使用v-bind:命令来实现属性绑定，如果是绑定单个属性，命令为v-bind:attr=“attr”，也可以写为v-bind:attr，也可以简写为：。11、绑定CSS样式，是通过绑定style属性来实现的，语法为v-bind:style=“myStyle”.其中，myStyle是在vue中自定义的样式。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值