JavaScript数据类型的学习

时间:2020-9-14 作者:admin

数据类型

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>

JavaScript数据类型的学习

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>

JavaScript数据类型的学习

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>

JavaScript数据类型的学习

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>

JavaScript数据类型的学习

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>

JavaScript数据类型的学习

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>

JavaScript数据类型的学习

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>

JavaScript数据类型的学习

根据控制台颜色判断类型

<!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>

JavaScript数据类型的学习

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>

JavaScript数据类型的学习

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>

JavaScript数据类型的学习

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。