【JavaScript】03-数据类型_javascript 数据类型和范围-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_76662826/article/details/145653128

本文介绍JS中的数据类型。

为什么需要数据类型？

不同的数据所需的存储空间是不一样的，便于将数据分为所需内存大小不同的数据，充分利用存储空间而定义了不同的数据类型。

1. 变量数据类型的基础

与常规开发语言（如C、JAVA）不同的是，JS是一种弱类型或者动态语言。

这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

弱类型

var num = 10; // num属于数字型
// js的变量数据类型是只有在程序运行过程中，根据等号右边的值来确定的
var str = 'zifuchuan'; //此时str在赋值后属于字符串型

动态变化

//js是动态语言 变量的数据类型是可以变化的
var x = 10; //x是数字型
x = 'zifuchuan'; //x又改为字符串类型

分类

基本数据类型与引用数据类型

2. 简单的数据类型

JS中的简单数据类型与说明如下：

1. 数字型 Number

普通表示

JS中的数字型不分正负和整数和浮点数，只要是数字即可。

let num = 10;   //num 类型
let PI = 3.14;  //PI 数字型

进制的表示

// 1. 八进制 0-7 以0开头
let num1 = 010;
console.log(num1);  // 010八进制转换为十进制为8
let num2 = 012;
console.log(num2);   // 10

// 2. 十六进制 0-9 a-f  以0x开头
let num3 = 0x9;
console.log(num3);
let num4 = 0xaaa;
console.log(num4);

举例求圆的面积

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        // 1.页面弹出输入框
        let r = prompt('请输入圆的面积：');
        // 2.计算圆的面积 内部处理
        let re = 3.14 * r * r;
        // 3.页面弹出
        document.write(re);

    </script>
</body>
</html>

数字型的范围

// 3. 数字型的最大值
console.log(Number.MAX_VALUE);
// 4. 数字型的最小值
console.log(Number.MIN_VALUE);

特殊值

// 5. 无穷大
console.log(1 / 0);  // 超过最大值 输出Infinity
// 6. 负无穷大
console.log(-1 / 0);  // 超过最小值 输出 -Infinity
// 7. 非数字
console.log('zifu'-1); // 计算结果非数字 输出NaN

isNaN

isNaN() 用来判断是否是数字型

// 8. isNaN判断非数字 非数字为true  数字为false
console.log(isNaN(12));   // false
console.log(isNaN('zzz'));  // true

上述所有内容的控制台输出如图

2. 字符串型 String

字符串型可以是引号中的任意文本

其语法为双引号“” 或单引号‘’ 或反引号 ``

推荐使用单引号

// 'zzz' '12' `11`   引号内是数字的也是字符串

单双引号的嵌套

// 嵌套可以外双内单 也可以外单内双
let str = '我是一个"高富帅"的程序员'
console.log(str);

console.log('str');  // 输出内容为 str

字符串转义符

必须以 “ \ ” 开头

// 转义字符 以 \ 开头，但是要写到引号里面
// \n表示换行
let str1= '我是一个"高富帅"\n的程序员';
console.log(str1);

效果图

列出常见转义符：

\n	换行符
\\	斜杠\
\'	' 单引号
\"	" 双引号
\t	tab缩进
\b	空格 blank

字符串长度与拼接

length获取整个字符串长度

// 获取长度 length
let str = 'my name is bei';
console.log(str.length);  //14

多个字符串用 + 来拼接

字符串型 + 其他任意类型

数值相加字符相连

// 拼接 字符串 + 任何类型
        console.log('你' + '好');  //你好
        console.log('bei' + 20); //bei20
        console.log(12 + 12);  //24
        console.log('12' + '12'); //1212

拼接加强版

// 拼接加强
        console.log('zzz' + '18岁');  //zzz18岁
        let age = 19;
        // 变量不要写到引号里，相连的方式实现
        console.log('zzz' + age + '岁');

上述内容的控制台输出

拼接案例

利用JS交互效果编写

弹出输入框输入年龄数字

弹出警示框“今年XX岁”

实现过程：

① 弹出一个输入框prompt 输入年龄

② 把用户输入的值用变量保存起来，再把刚刚的输入的年龄与其他字符串拼接起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        // ① 弹出一个输入框prompt 输入年龄
        // ② 把用户输入的值用变量保存起来，再把刚刚的输入的年龄与其他字符串拼接起来

        let age = prompt('请输入您的年龄');
        alert('您今年已经' + age + '岁了');

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

模板字符串 (重要)

语法：

`` 反引号

内容拼接变量时用 ${} 包住变量

<script>
        let age = 20;
        document.write(`我今年${age}岁了`)
</script>

举例

页面弹出对话框，输入名字和年龄

页面显示：大家好，我叫X，今年X岁了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        let uname = prompt('请输入名字：');
        let age = prompt('请输入年龄：');
        document.write(`大家好，我叫${uname}，今年${age}岁了。`);

    </script>
</body>
</html>

3. 布尔型 Boolean

布尔类型有两个值：true真 false假

        let flag = true;  //flag 布尔型
        let flag1 = false; //flag1 布尔型
        console.log(flag+1);  // true参与运算当1来看 结果2
        console.log(flag1+1);  //false当0来看  结果1

4. undefined 和 Null

一个声明后没有被赋值的变量的默认值undefined（如果进行相连或相加时注意结果）

null是声明了且也赋值了但值为空

官方将null解释为变量里存放一个对象，但是还没有创建好。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        // 一个变量被声明但未赋值 未undefined
        let str;
        console.log(str);  //undefined
        let variable = undefined; // 和true false颜色一样，手动效果一样
        console.log(variable + 'zzz');  //undefinedzzz
        console.log(variable + 1);  //NaN
        
        // null空值
        let space = null;
        console.log(space + 'zzz'); //nullzzz
        console.log(space + 1); // 1

    </script>

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

3.获取检测变量的数据类型

1. typeof

typeof 可用来获取检测变量的数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        let num = 10;
        console.log(typeof num);  //number
        let str = 'bei';
        console.log(typeof str);  //string
        let flag = true;
        console.log(typeof flag);  // boolean
        let vari = undefined;
        console.log(typeof vari);  // undefined
        let timer = null;
        console.log(typeof timer);  // object 对象
        
        // prompt 取过来的值是字符型
        let age = prompt('请输入您的年龄');
        console.log(age);
        console.log(typeof age);   // string

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

控制台的输出：

2. 颜色判断

除了使用typeof来检测，还可以使用浏览器控制台的颜色来判断

        console.log(18);  // 数字型蓝色
        console.log('18');  // 字符串型黑色
        console.log(true);  // 布尔型深蓝色
        console.log(undefined);  // 浅灰色
        console.log(null);  // 浅灰色

3. 字面量

数字字面量：8，9，10

字符串字面量：‘zzz’

布尔字面量：true false

数组：[ ]

4. 数据类型的转换

1. 隐式转换

系统内部自动将数据进行转换

规则：

① + 号两边只要有一个是字符串，都会把另一个转换为字符串。

② 除了 + 以外的算术运算符，比如 - * / 等都会把数据转换为数字类型

③ + 号将字符串转为数字型（常用）

<script>
        console.log(1+1);  // 2
        console.log('zzz'+1);  // zzz1
        console.log(2+'2');  // 22
        console.log(2+2);  // 4
        console.log(2-2);  // 0
        console.log(2-'2');  // 0
        console.log(+12);  // 12
        console.log(+'123')  // 123 +将字符串转为数字
</script>

2. 显示转换

数据类型(要转换的变量名)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        let str = '123';
        console.log(Number(str));  // 强制转换为数字型
        console.log(Number('pink'));  // NaN

        let num = prompt('请输入数字');
        console.log(Number(num));

        // 或者也可以这样写
        let num1 = Number(prompt('请输入：'));
        
        // 也可以直接用 + 转换
        
        // parseInt 只保留字符串中的整数部分
        console.log(parseInt('123.22ppsxs'));

        // parseFloat 
        console.log(parseFloat('11.22px'));
        
    </script>
</body>
</html>

举例：

分别输入两个数字，求和并打印到页面中

核心js代码

<script>
        let num1 = Number(prompt('第一个数：'));
        let num2 = Number(prompt('第二个数：'));
        let sum;
        sum = num1 + num2;

        // 模板字符串输出
        document.write(`两数之和为${sum}`);
</script>

5. 综合案例练习

渲染表格

用户输入商品价格和数量以及收货地址，可以自动打印订单表格的信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2 {
            text-align: center;
        }
        table{
            /* 合并相邻边框 */
            border-collapse: collapse;
            height: 80px;
            margin: 0 auto;
            text-align: center;
        }

        th{
            padding: 5px 30px;
        }

        table,th,td {
            border: 1px solid #000;

        }
    </style>
</head>
<body>
    <h2>订单确认</h2>
    
    <script>
        // 1. 用户输入
        let price = + prompt('请输入商品价格：');
        let num = + prompt('请输入商品数量：');
        let address = prompt('请输入收货地址：');

        // 2. 计算总额
        let total = price * num;

        // 3. 页面打印渲染 利用模板字符串
        document.write(`
        <table>
            <tr>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>总价</th>
                <th>收货地址</th>
            </tr>
            <tr>
                <td>小米</td>
                <td>${price}元</td>
                <td>${num}</td>
                <td>${total}</td>
                <td>${address}</td>
            </tr>
        </table>
        `)

    </script>
</body>
</html>

效果图：