目录
目标
数据类型简介
为什么需要数据类型
变量的数据类型
简单数据类型
数字型
数字型范围
数字型三个特殊值
isNaN
字符串型 String
字符串转义符
字符串长度及拼接
字符串长度
字符串拼接
字符串拼接加强
案例:显示年龄
布尔型 Boolean
Undefined 和 Null
获取变量数据类型
typeof
字面量
数据类型转换
含义
转换为字符串
转换为数字型(重点)
案例1:计算年龄
案例2:简单加法器
转换为布尔型
在计算机中,不同的数据所需占用的存储空间是不同的
为了便于把数据分成所需内存大小不同的数据,充分利用存储空间,我们定义了不同的数据类型
简单来说,数据类型就是数据的类别型号
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>
<script> // 无穷大 console.log(Number.MAX_VALUE * 2); // 无穷小 console.log(-Number.MAX_VALUE * 2); // 非数值 console.log('zhangsan' - 100); </script>
<script> console.log(isNaN(10)); console.log(isNaN('张三')); </script>
类似 HTML 里面的特殊字符,字符串中也有特殊字符,称之为转义符
转义符以 \ 开头,常用的转义符及其说明如下:
转义符 | 解释说明 |
---|---|
\n | 换行符,n 是newline |
\\ | 斜杠 \ |
\' | ' 单引号 |
\" | " 双引号 |
\t | tab 缩进 |
\b | 空格,b 是 blank |
<script> var str = '\t空山新雨后,天气晚来秋。\n\t明月松间照,清泉石上流。'; console.log(str); </script>
<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>
<script> var flag1 = true; var flag2 = false; console.log(flag1 + 1); // 结果为 2 console.log(flag2 + 1); // 结果为 1 </script>
一个声明后没有被赋值的变量会有一个默认值 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 可用来获取检测变量的数据类型
可以在程序出错时进行简单测试
<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 型
字面量是在源代码中一个固定值的表示法
通俗来讲,就是我们看到这个变量就可以知道它属于什么数据类型
使用表单、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>
方式 | 说明 | 示例 |
---|---|---|
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>
在页面中演出一个输入框,输入出生年份,计算年龄
<script> var year = prompt('请输入您的出生年份:'); var age = 2021 - year + 1; var str = '您的年龄为' + age + '岁'; alert(str); </script>
计算两个数的值,用户输入第一个值后,继续弹出第二个输入框并输入第二个值,最后通过弹出窗口显示两个输入值之和
<script> var num1 = prompt('请输入第一个值:'); var num2 = prompt('请输入第二个值:'); // 注意 + 为字符串拼接 // 进行加法运算时,两侧的值均需转换为数字型 var result = parseInt(num1) + parseInt(num2); alert('相加结果为:' + result); </script>
方式 | 说明 | 示例 |
---|---|---|
Boolean() 函数 | 其他类型转换为布尔值 | Boolean('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>