JavaScript简单数据类型

momo不会IT

已于 2022-03-30 22:21:42 修改

阅读量156

点赞数 5

分类专栏： JS 文章标签： javascript html5

于 2021-10-15 12:07:27 首次发布

本文链接：https://blog.csdn.net/qq231062/article/details/120780019

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

数据类型的确认

简单数据类型	说明	默认值
Number	数字型，包括整形和浮点型	0
Boolean	布尔值类型，true、false等价于1和0	false
String	字符串类型，在js中字符串都带有引号	" "
Undefined	只声明不赋值，就会显示undefined	undefined
Null	空值	null

数字型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>Document</title>
    <script>
        //数字型Number
        var num = 10 ; //num数字型。


        //1.数字型进制
        //八进制  0 ~ 7   数字前面加0  表示八进制
        var num1 = 010;
        console.log(num1);//  010  八进制 转换为 10进制 就是8
        var num2= 012;
        console.log(num2);
        //十六进制 0 ~ 9 a ~ f (a=10,b=11...以此类推   #fffff   数字前面加0x表示十六进制。)
        var num3 = 0x9;
        console.log(mun3)
        var num4 = 0xa;
        console.log(num4);


        //2.数据型范围
        //数字型的最大值
        console.log(Number.MAX_VALUE);
        //数字型的最小值
        console.log(Number,MIN_VALUE);
        //数字型三个特殊值。
          //无穷大
          console.log(Number.MAX_VALUE * 2); //Infinity 无穷大
          //无穷小
          console.log(-Number.MAX_VALUE * 2); //Infinity 无穷小
          //非数字
          console.log('momo' - 100);    //输出NaN，Nan表示非数字 
    </script>
</head>
<body>
    
</body>
</html>

字符串型String

<!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 str = '我是一名本科学生'
        //var str = '我是一名本科学生'要是想在本科加上双引号直接加上会显示错误
        //例如var str = '我是一名'本科'学生'  这样系统会显示报错
        //var str = '我是一名"本科"学生' 或 var str = "我是一名'本科'学生"
        //这样都是正确的
        console.log(str);
        var str1 = '我是一名"本科"学生'
        console.log(str1);
        var str2 = "我是一名'本科'学生"
        console.log(str2);


        //若要换行，在js中并不是用上/Br来换行
        var str3 = "我是一名本科\n学生"
        console.log(str3);
    </script>
</head>
<body>
    
</body>
</html>

字符串转义符

转义符	解释说明
\n	换行符
\\	斜杠\
\'	' 单引号
\"	" 双引号
\t	tab缩进
\b	空格

字符串长度以及拼接

<!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 Momo';
        console.log(str.length); // 15
        //2.字符串的拼接+
        //只要有字符串和其他类型相拼接，最终结果是字符串类型
        console.log('本科'+'学生'); // '本科学生'
        console.log('momo'+18);// 'momo18'
        console.log(12+34); // 46
        console.log('12'+34); // '1234'
    </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>
        console.log('momo'+18);// momo18
        console.log('momo'+18+'岁');
        var  age = 18;
        console.log('momo age岁');//错误
        console.log('momo'+age+'岁');//正确
        //  变量不要写到字符串里面，是通过加号 字符串相连的方式实现的
    </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 flag1 = true;  // flag1 布尔型
        var flag2 = false;  // flag2 布尔型
        console.log(flag1+1); // true 参加加法运算当1来看
        console.log(flag2+1); // false 参加加法运算当0来看
        // 如果一个变量声明未赋值 就是undefined 未定义数据类型
        var str;
        console.log(str);
        var variable = undefined;
        console.log(variable + 'momo');// undefibedmomo
        console.log(variable + 1);  // NaN undeibed  和数字相加最后的结果是NaN
        //  Null  空值
        var space = null;
        console.log(space + 'momo'); // nullmomo
        console.log(space + 1);  // 1
        
    </script>
</head>
<body>
    
</body>
</html>

获取检测变量的数据类型

我们可以通过typeof 判断字符类型

<!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 = 5;
        console.log(typeof num); //number
        var str = 'momo'
        console.log(typeof str); //string
        var timer = null;
        console.log(typeof timer); //object
        var flag = true;
        console.log(typeof flag); //boolean
        var vari = undefined;
        console.log(typeof vari); //undefined
        //可以通过typeof 判断字符类型

        //prompt 取过来的值是 字符型的
        var age = prompt('请输入您的年龄');
        console.log(age);
        console.log(typeof age);
    </script>
</head>
<body>
    
</body>

同时我们也可以通过控制台的输出来辨别其数据类型

<!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>
</head>
<body>
    <script>
        console.log(5);
        console.log('5');
        console.log(false);
        console.log(undefined);
        console.log(null);
        //可以通过控制台中显示的颜色来判断其数据类型，
        //黑色的5表示字符串型，绿色的5表示数值型（浏览器不同颜色不一样，不一定是绿色，有的是蓝色）
        //深一点的颜色是布尔型，浅灰色即为undefined和null
    </script>
</body>
</html>

字面值

字面量是在源代码中一个固定的表示方法

数字字面量：25,5,15

字符串字面量："momo","joey"

布尔字面量:true,false

转换为数字型

<!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('请输入您的年龄');
        //parseInt(变量) 可以把字符型的转换为数字型 得到的是整数
        //console.log(parseInt('3.14'));结果是3
        console.log(parseInt(age));
        console.log(parseInt('10kg')); //10会去掉kg单位
        console.log(parseInt('momo10kg'));   //NaN

        //parseFloat(变量)可以把字符型转换为数字型 得到是小数 浮点数
        console.log(parseFloat('3.14'));   //结果是3.14
        console.log(parseFloat('10kg'));  //10会去掉kg单位
        console.log(parseFloat('momo10kg'));   //NaN


        //利用了算数运算 - * / 隐形转换
        console.log('12'- 0);  //12
        console.log('123' - '120');  //3
        console.log('123' * 1);

        //利用 Number(变量)
        var str = '123';
        console.log(Number(str));
        console.log(Number('12'));

        //前两个是重点
    </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 num = 5;
      var str = num.toString();
      console.log(str);
      console.log(typeof str);
      //利用String(变量)
      console.log(String(num));
      //利用 + 拼接字符串的方法实现转换效果
      console.log(num + '');
    </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>
</head>
<body>
    <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
        // 只有上面这五个的值为false
        console.log(Boolean(098));
        console.log(Boolean(890));
        console.log(Boolean('890'));
    </script>
</body>
</html>

momo不会IT

关注

5
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript简单数据类型

数据类型的确认简单数据类型说明默认值 Number 数字型，包括整形和浮点型 0 Boolean 布尔值类型，true、false等价于1和0 false String 字符串类型，在js中字符串都带有引号 " " Undefined 只声明不赋值，就会显示undefined undefined Null 空值 null 数字型Number<!DOCTYPE html><html l
复制链接

扫一扫