目录

目标

数据类型简介

为什么需要数据类型

变量的数据类型

简单数据类型

数字型

数字型范围

数字型三个特殊值

isNaN

字符串型 String

字符串转义符

字符串长度及拼接

字符串长度

字符串拼接

字符串拼接加强

案例：显示年龄

布尔型 Boolean

Undefined 和 Null

获取变量数据类型

typeof

字面量

数据类型转换

含义

转换为字符串

转换为数字型（重点）

案例1：计算年龄

案例2：简单加法器

转换为布尔型

---

目标

• 能够说出 5 种简单数据类型
• 能够使用 typeof 获取变量的类型
• 能够说出 1~2 种转换为数值型的方法
• 能够说出 1~2 种转换为字符型的方法
• 能够说出什么是隐式转换

数据类型简介

为什么需要数据类型

在计算机中，不同的数据所需占用的存储空间是不同的

为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，我们定义了不同的数据类型

简单来说，数据类型就是数据的类别型号

变量的数据类型

• 变量是用来存储数据的场所，具有名称和数据类型
• JavaScript 是一种弱类型或者说动态语言
•  这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定
• 在代码运行时，变量的数据类型是由 JS 引擎根据 " = " 右边变量值的数据类型来判断的，运行完毕之后，变量的数据类型才最终确定
• JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型

简单数据类型

JavaScript 中的简单数据类型及其说明如下：

简单数据类型	说明	默认值
number	数字型，包含整型值和浮点型值；如 12，0.12	0
boolean	布尔值类型；如 true、false；等价于 1 和 0	false
string	字符串类型；如 '张三'；JS 中，字符串都带引号	" "
undefined	var a; 声明了变量 a 但并没有给 a 赋值；此时 a = undefined	undefined
null	var a = null;  声明了变量 a 为空值	null

数字型

    <script>
        // 整型值和浮点型值都属于数字型
        var num1 = 10;
        var num2 = 3.14;
    </script>

最常见的进制有二进制、八进制、十进制、十六进制

在 JS 中八进制前面加 0 ；十六进制前面加 0x

    <script>
        // 八进制数字序列范围：0~7
        // 八进制前面加 0
        var num1 = 016;
        console.log(num1);
        var num = 023;
        console.log(num);
        // 十六进制数字序列范围：0~9 A~F
        // 十六进制前面加 0x
        var num2 = 0xf;
        console.log(num2);
    </script>

 

数字型范围

    <script>
        //数字型最大值
        console.log(Number.MAX_VALUE);
        //数字型最小值
        console.log(Number.MIN_VALUE);
    </script>

 

数字型三个特殊值

• infinity；代表无穷大，大于任何值
• -infinity；代表无穷小，小于任何值
• NaN，not a number；代表一个非数值

    <script>
        // 无穷大
        console.log(Number.MAX_VALUE * 2);
        // 无穷小
        console.log(-Number.MAX_VALUE * 2);
        // 非数值
        console.log('zhangsan' - 100);
    </script>

isNaN

1. isNaN() 此方法用于验证数值是否是数字型，并返回一个布尔值
2. 如果该值是数字型，返回 false；如果该值不是数字型，返回 true

    <script>
        console.log(isNaN(10));
        console.log(isNaN('张三'));
    </script>

字符串型 String

• 字符串型可以是引号中的任意文本，其语法为双引号 " " 和单引号 ' '
• 因为 HTML 标签里面的属性使用的是双引号，所以 JS 更推荐使用单引号
• JS 可以用单引号嵌套双引号，或者用双引号嵌套单引号（外双内单，外单内双）

字符串转义符

类似 HTML 里面的特殊字符，字符串中也有特殊字符，称之为转义符

转义符以  \  开头，常用的转义符及其说明如下：

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

    <script>
        var str = '\t空山新雨后,天气晚来秋。\n\t明月松间照,清泉石上流。';
        console.log(str);
    </script>

 

字符串长度及拼接

字符串长度

• 字符串由若干字符组成，这些字符的数量就是字符串的长度
• 通过字符串的 length 属性可以获取整个字符串的长度

    <script>
        var str = '\t空山新雨后,天气晚来秋。\n\t明月松间照,清泉石上流。';
        console.log(str.length);  //长度为27
    </script>

字符串拼接

• 多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
• 拼接前会把与字符串相加的任何类型转换为字符串，然后拼接成一个新的字符串
• + 号总结口诀：数值相加，字符相连
• 无论什么类型的数据与字符串进行拼接，结果都是字符串

console.log('中国有' + 56 + '个民族');

字符串拼接加强

// 变量尽量不要写到字符串里，通过字符串与变量名进行拼接即可
// 方便修改拼接字符串的内容
var str1 = '中国有';
var num = 56;
var str2 = '个民族';
console.log(str1 + num + str2);

案例：显示年龄

    <script>
        var age = prompt('请输入您的年龄：');
        var str = '您的年龄为' + age + '岁';
        alert(str);
    </script>

布尔型 Boolean

• 布尔类型有两个值：true 和 false
• 布尔型和数字型相加时，true 的值为 1，false 的值为 0

    <script>
        var flag1 = true;
        var flag2 = false;
        console.log(flag1 + 1); // 结果为 2
        console.log(flag2 + 1); // 结果为 1
    </script>

Undefined 和 Null

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

    <script>
        var str;
        console.log(str);
        var variable = undefined;
        console.log(variable + '张三'); // 结果为 undefined张三
        console.log(variable + 1); // 结果为 NaN
    </script>

给一个声明的变量赋值为 null，里面存的值为空

    <script>
        var space = null;
        console.log(space + '张三'); // 结果为 null张三
        console.log(space + 1); // 结果为 1
    </script>

获取变量数据类型

typeof

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

可以在程序出错时进行简单测试

    <script>
        var num = 10;
        console.log(typeof num); // number
        var str = '张三';
        console.log(typeof str); // string
        var bool = true;
        console.log(typeof bool); // boolean
        var high;
        console.log(typeof high); // undefined
        var space = null;
        console.log(typeof space); // object
        // prompt 取出的值是字符型
        var age = prompt('请输入您的年龄：');
        console.log(typeof age); // string
    </script>

    <script>
        console.log(18);
        console.log('18');
        console.log(true);
        console.log(undefined);
        console.log(null);
    </script>

蓝色为数字型或者布尔型，黑色为字符串型，浅灰色为 undefined 和 null 型

字面量

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

通俗来讲，就是我们看到这个变量就可以知道它属于什么数据类型

• 数字字面量：8，9，10
• 字符串字面量：'张三'，'zhangsan'
• 布尔字面量：true，false

数据类型转换

含义

使用表单、prompt 获取过来的数据默认是字符串类型的。此时就不能直接简单地进行加法运算，而需要抓换变量的数据类型。

通俗来讲，就是把一个变量从自身的数据类型转换为另外一种数据类型

我们通常会实现 3 种方式的转换：

• 转换为字符串类型
• 转换为数字型
• 转换为布尔型

转换为字符串

方式	说明	示例
toString()	转换为字符串型	var num = 1; alert(num.toString());
String() 强制转换	转换为字符串型	var num = 1; alert(String(num))
加号拼接字符串	和字符串拼接的结果都是字符串	var num = 1; alert(num+'zhangsan');

    <script>
        // 把数字型转换为字符串型 toString()
        var num = 10;
        var str1 = num.toString();
        console.log(str1);
        console.log(typeof str1);
        // 把布尔型转换为字符串型 String()
        var bool = true;
        var str2 = String(bool);
        console.log(str2);
        console.log(typeof str2);
        // 把数字型转换为字符串型 加号拼接
        var age = 20;
        var str = '张三'
        var str3 = '张三' + age;
        console.log(str3);
        console.log(typeof str3);
    </script>

•  toString() 和 String() 的使用方式不一样
• 三种转换方式，最常用的是第三种加号拼接字符串转换方式，这种转换方式也称为隐式转换

转换为数字型（重点）

方式	说明	示例
parseInt(string) 函数	将 string 类型转换为整数数值型	parseInt('12')
parseFloat(string) 函数	将 string 类型转换成浮点数数值型	parseFloat('12.34')
Number() 强制转换函数	将 string 类型转换为数值型	Number('23')
js 隐式转换（- * /）	利用算术运算隐式转换为数值型	'23' - 0

    <script>
        var age = prompt('请输入您的年龄：');
        console.log(age);
        console.log(typeof age);
        // parseInt()可以把字符型转换为整数数值型，得到的必定是整数
        // 当原字符型数字为浮点型时，转换后的结果仅保留整数位
        // 带有单位的字符型，如200px，转换后将去掉单位，仅保留 200
        // 当括号中的字符串不是以数字开头时，得到的结果为 NaN 
        console.log(typeof parseInt(age));
        var height = prompt('请输入您的身高：');
        console.log(height);
        console.log(typeof height);
        // 当括号中的字符串为浮点数时，应使用 parseFloat()
        // 其他与 parseInt() 相同
        console.log(typeof parseFloat(height));
        var weight = prompt('请输入您的体重：');
        console.log(weight);
        console.log(typeof weight);
        // Number()
        console.log(typeof Number(weight));
        // 隐式转换，与数字型数值 - * /
        var BMI = height - 65;
        console.log(BMI);
        var info = '您的年龄为' + age + '岁\n' + '您的身高为' + height + 'cm\n' + '您的体重为' + weight + 'kg';
        alert(info);
    </script>

案例1：计算年龄

在页面中演出一个输入框，输入出生年份，计算年龄

    <script>
        var year = prompt('请输入您的出生年份：');
        var age = 2021 - year + 1;
        var str = '您的年龄为' + age + '岁';
        alert(str);
    </script>

案例2：简单加法器

计算两个数的值，用户输入第一个值后，继续弹出第二个输入框并输入第二个值，最后通过弹出窗口显示两个输入值之和

    <script>
        var num1 = prompt('请输入第一个值：');
        var num2 = prompt('请输入第二个值：');
        // 注意 + 为字符串拼接
        // 进行加法运算时，两侧的值均需转换为数字型
        var result = parseInt(num1) + parseInt(num2);
        alert('相加结果为：' + result);
    </script>

转换为布尔型

方式	说明	示例
Boolean() 函数	其他类型转换为布尔值	Boolean('true')

• 代表空、否定的值会被转换为 false，如 ''、0、NaN、null、undefined
• 其余值会被转换为 true

    <script>
        // 当''中只有空格时，输出结果也为 true
        console.log(Boolean(''));
        console.log(Boolean(0));
        console.log(Boolean(NaN));
        console.log(Boolean(null));
        console.log(Boolean(undefined));
        // 除以上五种外，其他都为true
        console.log(Boolean('张三'));
        console.log(Boolean(' '));
        console.log(Boolean(12));
    </script>

标签：console,log,JavaScript,数据类型,字符串,var,数字型
来源： https://blog.csdn.net/weixin_41909678/article/details/118584004