iis服务器助手广告广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >一起来看看JavaScript数据类型最详解
  • 281

0
分享到

一起来看看JavaScript数据类型最详解

2024-04-02 19:04:59 281人浏览 泡泡鱼
摘要

目录01-变量的数据类型02-简单数据类型之数字型Number03-isNaN04-简单数据类型之字符串型05-转义符案例-弹出网页警示框06-字符串拼接07-字符串拼接加强08-显

01-变量的数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta Http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var num; // 这里的num是不确定属于哪种数据类型的
        var num = 10; // 从这可以看出num属于数字型
        // js的变量数据类型只有程序在运行过程中，根据等号右边的值来确定的
        var str = 'pink'; //str字符串型
        // js是动态语言，变量的数据类型是可以变化的
        var x = 10; //x是数字型
        x = 'pink'; //x是字符串型
    </script>
</head>
<body>
</body>
</html>

02-简单数据类型之数字型Number

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数字型Number</title>
    <script>
        var num = 10; //num数字型
        var PI = 3.14; // PI数字型
        // 1.八进制 0~7 我们程序里面数字前面加0 表示八进制
        var num1 = 010;
        console.log(num1); //010 八进制 转换为10进制就是 8
        var num2 = 012;
        console.log(num2);
        // 2.十六进制 0~9 a~f #ffffff 数字的前面加0x表示十六进制
        var num3 = 0x9;
        console.log(num3);
        var num4 = 0xa;
        console.log(num4);
        // 3.数字型的最大值
        console.log(Number.MAX_VALUE);
        // 4.数字型的最小值
        console.log(Number.MIN_VALUE);
        // 5.无穷大　infinity
        console.log(Number.MAX_VALUE * 2);
        // 6.无穷小 -infinity
        console.log(-Number.MIN_VALUE * 2);
        // 7.非数字
        console.log('pink老师' - 100);
    </script>
</head>
<body>
</body>
</html>

效果展示

在这里插入图片描述

03-isNaN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // isNaN()这个方法用来判断非数字 并且返回一个值 如果是数字，返回的是false 如果不是数字 返回的是true
        console.log(isNaN(12)); //false
        console.log(isNaN('pink老师')); //true
    </script>
</head>
<body>
</body>
</html>

04-简单数据类型之字符串型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 'pink' 'pink老师' 'true' 12是数字型的，加了引号后就是字符串类型的 '12'
        var str = '我是一个"高富帅"的程序员';
        console.log(str);
        // 字符串转义字符 都是用\开头 并且包含在引号里面
        var str1 = "我是一个'高富帅'的\n程序员";
        console.log(str1);
    </script>
</head>
<body>
</body>
</html>

效果展示

在这里插入图片描述

05-转义符案例-弹出网页警示框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        alert('酷暑难耐，火辣的太阳底下，我挺拔的身姿，成为了最独特的风景。\n我审视四周，这里是我的舞台，我就是天地间的王者。\n这一刻，我豪气冲天，终于大喊一声:"收破烂啦~"');
    </script>
</head>
<body>
</body>
</html>

效果展示

在这里插入图片描述

06-字符串拼接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1.检测获取字符串的长度 length
        var str = 'my name is andy'; //15个字符（12个字母+三个空格）
        console.log(str.length); //显示15
        // 2.字符串的拼接 只要字符串和其他类型相拼接，最终的结果就是字符串类型
        console.log('沙漠' + '骆驼'); //显示字符串的 沙漠骆驼
        console.log('pink老师' + 18); //pink老师18
        console.log('pink' + true); //pinktrue
        console.log(12 + 12); //24 数字型的相加
        console.log('12' + '12'); //1212 字符串的相加
    </script>
</head>
<body>
</body>
</html>

07-字符串拼接加强

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字符串拼接加强</title>
    <script>
        console.log('pink老师' + 18); //pink老师18
        console.log('pink老师' + 18 + '岁');
        var age = 18;
        //变量不要写到字符串里面，是通过和字符串相连的方式实现的
        console.log('pink老师' + age + '岁');
        // 变量和字符串的口诀 :引引加加
        console.log('pink老师' + age + '岁');
    </script>
</head>
<body>
</body>
</html>

08-显示年龄案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示年龄案例</title>
    <script>
        // 要求：弹出一个输入框，需要用户输入年龄，之后弹出一个警示框显示"您今年xx岁啦"
        // 分析：这是利用JS编写的一个非常简单的交互效果程序。
        // 交互编程的三个基本要素：
        // 1.弹出一个输入框(prompt)，让用户输入年龄（用户输入） 
        // 2.把用户输入的值用变量保存起来，把刚才输入的年龄与所要输出的字符串拼接（程序内部处理） 
        // 3.使用alert语句弹出警示框 （输出结果）
        // prompt('请输入您的年龄');
        // 以下写法可以通过变量保存下来
        var age = prompt('请输入您的年龄');
        var str = '您今年' + age + '岁啦';
        alert(str);
    </script>
</head>
<body>
</body>
</html>

效果展示

在这里插入图片描述

09-简单数据类型之布尔型Boolean

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单数据类型之布尔型Boolean</title>
    <script>
        var flag = true; //flag 布尔型 相当于1
        var flag1 = false; //flag1 布尔型 相当于0
        console.log(flag + 1); // 显示2 true参与加法运算当1来看
        console.log(flag1 + 1); // 显示1 false参与加法运算当0来看
        // 如果一个变量声明未赋值 结果是undefined 未定义数据类型
        var str;
        console.log(str); //显示undefined
        var variable = undefined;
        console.log(variable + 'pink'); //显示 undefinedpink
        console.log(variable + 1); // NaN undefined和数字相加，最后的结果是NaN
        // null 空值
        var space = null;
        console.log(space + 'pink'); // 显示nullpink
        console.log(space + 1); //显示1   null和数字相加，结果是数字
    </script>
</head>
<body>
</body>
</html>

10-获取变量数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var num = 10;
        console.log(typeof num); //number 数字型
        var str = 'pink';
        console.log(typeof str); //string 字符串型
        var flag = true;
        console.log(typeof flag); //boolean 布尔型
        var vari = undefined;
        console.log(typeof vari); //undefined 未定义类型
        var timer = null;
        console.log(typeof timer); //object 
        // prompt取过来的值是字符型的
        var age = prompt('请输入您的年龄');
        console.log(age);
        console.log(typeof age);
    </script>
</head>
<body>
</body>
</html>

11-字面量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        console.log(18); //在控制台显示蓝色，是数字型的
        console.log('18'); //在控制台显示黑色，是字符串型的
        console.log(true); //在控制台显示深蓝色，是布尔型
        console.log(undefined);
        console.log(null);
    </script>
</head>
<body>
</body>
</html>

12-转换为字符串型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //1.把数字型转换为字符串型
        var num = 10;
        var str = num.toString();
        console.log(str);
        console.log(typeof str);
        //2.利用String()
        console.log(String(num));
        //3.利用 + 拼接字符串的方法实现转换效果 最常用，也称为隐式转换
        console.log(num + '');
    </script>
</head>
<body>
</body>
</html>

13-转换为数字型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var age = prompt('请输入你的年龄');
        //1.parseInt(变量) 可以把字符型的转化为数字型 得到的是整数
        console.log(parseInt(age));
        console.log(parseInt('3.14')); //最后的结果是3 取整
        console.log(parseInt('120px')); //120 可以把单位去掉
        console.log(parseInt('rem120px')); //NaN
        //2.parseFloat(变量) 可以把字符型的转化为数字型 得到的是浮点数
        console.log(parseFloat('3.14'));
        console.log(parseFloat('120px')); //120 可以把单位去掉
        console.log(parseFloat('rem120px')); //NaN
        // 3.利用Number(变量)
        var str = '123';
        console.log(Number(str));
        console.log(Number('12'));
        // 4.利用了算数运算 - * / 隐式转换
        console.log('12' - 0); //12
        console.log('123' - '2'); //121
        console.log('123' * 1); //123
    </script>
</head>
<body>
</body>
</html>

14-计算年龄案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 案例分析
        // 1.弹出一个输入框，让用户输入出生年份(用户输入)
        // 2.把用户输入的值用变量保存起来，然后用今年的年份减去变量值，结果就是现在的年龄；（程序内部处理）
        // 3.弹出警示框，把计算的结果输出（输出结果）
        var year = prompt('请输入你的出生年份');
        var age = 2022 - year; //year取过来的是字符串型 但是这里用的减法，自动隐式转换成数字型
        alert('你今年' + age + '岁了');
    </script>
</head>
<body>
</body>
</html>

15-简单加法器案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 先弹出第一个输入框，提示用户输入第一个值，保存起来
        // 再弹出第二个框，提醒用户输入第二个值，保存起来
        // 把这两个值相加，并将结果赋给新的变量（注意数据类型转换）
        // 弹出警示框，把计算的结果输出
        var num1 = prompt('请输入第一个值:');
        var num2 = prompt('请输入第二个值:');
        var result = parseFloat(num1) + parseFloat(num2);
        alert('您的结果是:' + result);
    </script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 先弹出第一个输入框，提示用户输入第一个值，保存起来
        // 再弹出第二个框，提醒用户输入第二个值，保存起来
        // 把这两个值相加，并将结果赋给新的变量（注意数据类型转换）
        // 弹出警示框，把计算的结果输出
        var num1 = prompt('请输入第一个值:');
        var num2 = prompt('请输入第二个值:');
        var result = parseFloat(num1) + parseFloat(num2);
        alert('您的结果是:' + result);
    </script>
</head>
<body>
</body>
</html>

16-转换为布尔型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        console.log(Boolean('')); //false
        console.log(Boolean(0)); //false
        console.log(Boolean(NaN)); //false
        console.log(Boolean(null)); //false
        console.log(Boolean(undefined)); //false
        console.log(Boolean('123')); //true
        console.log(Boolean('你好吗')); //true
    </script>
</head>
<body>
</body>
</html>

17-扩展阅读之编译语言和解释语言的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扩展阅读之编译语言和解释语言的区别</title>
</head>
<body>
    <h4>1.概述</h4>
    <p>计算机不能直接理解任何除机器以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。
        <br>程序语言翻译成机器语言的工具，被称为翻译器</p>
    <p>翻译器翻译的方式有两种:一个是编译，另一个是解释。两种方式的区别在于翻译的时间点不同</p>
    <p>编译器是在代码执行之前进行编译，生成中间代码文件</p>
    <p>解释器是在运行时进行及时解释，并立即执行（当编译器以解释方式运行的时候，也成为解释器）</p>
    <h4>2.执行过程</h4>
    <p>类似于请客吃饭:</p>
    <ul>
        <li>编译语言:首先把所有菜做好，才能上桌吃饭</li>
        <li>解释语言:好比吃火锅，边吃边涮，同时进行</li>
    </ul>
</body>
</html>

效果展示

在这里插入图片描述

18-拓展阅读之标识符、关键字、保留字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拓展阅读之标识符、关键字、保留字</title>
</head>
<body>
    <h4>1.标识符（zhi）</h4>
    <p>标识符（zhi）:就是开发人员为变量、属性、函数、参数取的名字</p>
    <p>标识符不能是关键字和保留字</p>
    <h4>2.关键字</h4>
    <p>是指JS本身已经使用了的字，不能再用他们充当变量名、方法名</p>
    <p>包括:break,case,continue,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with</p>
    <h4>3.保留字</h4>
    <p>实际上就是预留的"关键字"，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名</p>
    <p>包括:boolean,byte,char,class,const,debugger,double,enum,export,extends等</p>
</body>
</html>

19-课后作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1.用户输入
        var name = prompt('您的姓名是:');
        var age = prompt('您的年龄是:');
        var sex = prompt('您的性别是:');
        // 2.内部程序处理
        var str = ('您的姓名是:' + name + '\n您的年龄是:' + age + '\n您的性别是:' + sex);
        // 3.结果输出
        alert(str);
        // console.log(typeof str); 检测是哪种数据类型
    </script>
</head>
<body>
</body>
</html>

效果展示

在这里插入图片描述

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注编程网的更多内容!           

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 一起来看看JavaScript数据类型最详解

本文链接: https://www.lsjlt.com/news/163895.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • 一起来看看JavaScript数据类型最详解
    目录01-变量的数据类型02-简单数据类型之数字型Number03-isNaN04-简单数据类型之字符串型05-转义符案例-弹出网页警示框06-字符串拼接07-字符串拼接加强08-显...
    99+
    2024-04-02
  • 一起来看看C++STL容器之string类
    目录前言1.标准库中的string类2.string类的常用接口说明2.1 string对象的常见构造2.2 string类对象的容量操作  2.2.1 rese...
    99+
    2024-04-02
  • javascript的面向对象编程一起来看看
    目录函数的定义和使用this指向问题严格模式高阶函数闭包递归正则表达式ES6总结年后来工作的我，be like： 而且刷微博刷着刷着也会遇到一群说出我心中所想的话： 呜呜呜~~（...
    99+
    2024-04-02
  • 一起来学习一下python的数据类型
    目录内置数据类型获取数据类型【type()】str:转换为str(字符串)类型int:转换为int类型float:转换为float类型complex：转换为complex（复数）类型...
    99+
    2024-04-02
  • 一起来看看springboot集成redis的使用注解
    目录redis简介：引入依赖：编写application.properties文件编写配置类：springboot的redis注解介绍（1）缓存@Cacheable（2）缓存@Cac...
    99+
    2024-04-02
  • 千篇一律的JS运算符讲解,一起来看看
    目录算术运算符字符串运算符赋值运算符比较运算符逻辑运算符三元运算符位运算符运算符优先级总结算术运算符 对数值类型的变量及常量进行算数运算。也是最简单和最常用的运算符号。 四则混合运...
    99+
    2024-04-02
  • Python中的五个神仙级函数一起来看看
    目录1.引言2. Lambda 函数3. Map 函数4. Filter 函数5. Zip 函数6. Reduce 函数总结1.引言 在本文中，我们用代码详细说明了Python中超实...
    99+
    2024-04-02
  • Python怎么查看数据类型_Python查看数据类型教程
    1、首先在官网上下载pycharm community软件，安装完成后打开软件，选择需要编写代码的文件夹。 2、然后右击选择的python文件夹—>选择弹出的New选项—>...
    99+
    2024-04-02
  • 你了解PHP中的数据类型吗？一起来学习！
    PHP是一种广泛应用于Web开发的编程语言，它支持多种数据类型。在使用PHP进行开发时，了解和正确使用不同的数据类型是非常重要的。本文将详细介绍PHP中的数据类型，并提供一些演示代码。 布尔型（Boolean） 布尔型表示两个状态：tr...
    99+
    2023-07-09
    数据类型 学习笔记 http
  • 怎么查看JavaScript变量的数据类型
    这篇文章主要讲解了“怎么查看JavaScript变量的数据类型”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么查看JavaScript变量的数据类型”吧！...
    99+
    2024-04-02
  • Python中很常用的函数map（），一起来看看用法
    目录 一、函数作用 二、map（）函数的语法 三、map（）函数实例 四、运行结果出现：报错  一、函数作用 map()函数是Python中的一个内置函数，它的功能是：将指定的函数，依次作用于可迭代对象的每个元素，并返回一个迭代器对象。这...
    99+
    2023-09-06
    python 开发语言
  • 一起再看JavaScript中的对象解构
    解构是一个概念，分解其中一种数据类型并将其单独的属性分配给变量，在文章《JavaScript 解构赋值 5 个常见场景和实例》中介绍过，今天再来复习一下。基础解构const fullName = { firstName: "...
    99+
    2023-05-14
    JavaScript ECMAScript 6 Vue.js
  • navicat怎么看数据类型
    navicat 中查看数据类型的方法：连接到数据库打开表查看字段标题附近的图标，表示数据类型：整数：数字或带数字范围的括号浮点数：带小数点的数字字符串：双引号日期和时间：日历图标布尔值：...
    99+
    2024-04-24
    navicat
  • Python 查看数据的类型
    机器学习记录 在 Python 中,有几种方式可以查看一个对象的数据类型: 1. 使用 type() 直接使用 type() 函数可以查看对象的类型: >>> type(1) >>> type([])...
    99+
    2023-08-31
    python java 开发语言
  • 一起来学习一下python的数字类型
    目录int数字int类型Float类型complex类型int(),float(),complex()类型之间的转换总结int 数字 python 有3种数字类型int： 整数类型f...
    99+
    2024-04-02
  • javascript七大数据类型详解
    目录前言:详细介绍：练习:总结 前言: 各大语言都会有基本类型如python,java,c系列等,基本类型的存在是不可或缺的，它就好似我们生活中算数中的整数，汉字中的中文，它就是来...
    99+
    2024-04-02
  • python如何查看数据类型
    python中查看数据类型的方法：需要使用type()函数来查看数据类型，在type()函数中一个参数则返回对象类型, 如果有三个参数则返回新的类型对象；type()函数语法：“type(object)”、“type(name,bases,...
    99+
    2024-04-02
  • pandas怎么查看数据类型
    要查看数据类型，可以使用DataFrame的dtypes属性。示例如下： import pandas as pd # 创建一个Da...
    99+
    2024-04-02
  • navicat如何查看数据类型
    这篇文章给大家分享的是有关navicat如何查看数据类型的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。mysql常用的图形化界面工具是navicat，通过navicat查看表中字...
    99+
    2024-04-02
  • c#怎么查看数据类型
    要查看 c# 中的数据类型，您可以使用 typeof() 运算符获取 system.type 对象，然后使用该对象属性（如 name、namespace、basetype 和 getge...
    99+
    2024-04-04
    c#
软考高级职称资格查询
iis服务器助手广告
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作