JS基础：数据类型及其案例

曹莓奶昔

于 2022-04-19 15:46:41 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签：前端 javascript vscode

本文链接：https://blog.csdn.net/weixin_49555741/article/details/124270153

版权

JavaScript 专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍了JavaScript中数据类型的基础概念，包括简单数据类型如数字、字符串和布尔，以及如何检测和转换数据类型。通过实例演示了年龄计算和数值转换技巧，适合初学者理解动态语言特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 数据类型

为了充分利用空间，数据类型把数据分为内存大小不同的数据。

1.2 变量的数据类型

JavaScript是一种弱类型或者动态语言。只有在运行过程中根据=右边的值来判断数据类型。

JavaScript有动态类型，相同的变量可用不同的类型（如var=10；var=‘lisa’）

1.3 数据类型分类

数据类型分为为两大类：

简单数据类型(number、string、Boolean、undefined、null)
复杂数据类型（object）

1.3.1 简单数据类型

1. 数字型

二进制：ob

八进制：（0-7表示），前面加 0 表示八进制

十六进制：（0-9，a-f），前面加 0x 表示十六进制

数值最大值（Number.MAX_VALUE）

数值最小值 (Number.MIN_VALUE)

数字型三个特殊值：Infinity，无穷大；-Infinity，无穷小；NaN，Not number，非数值

isNaN( )方法用来判断非数字，并返回值（false、true）

2. 字符串型（string）

用引号（单引号‘ ’和双引号‘’ ”）来表示，JS推荐用单引号，或者用双引号内嵌单引号（外双内单，外单内双）

字符串转义符：

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

转义字符都是用反斜杠/开头的，它们必须包含在引号里面

字符串长度由length属性获取

字符串的拼接 +

口诀：数值相加，字符相连

变量不能添加引号，加引号会变字符串

3. 布尔型 Boolean

有 true（真 1）和 false（假 0）两个值

1.4 检测数据类型

用 typeof 变量可用检测数据类型

prompt取值是字符型的，不能进行运算，需要进行数据转换

1.5 数据类型转换

使用表单，prompt获取的数据默认是字符串类型的，不能进行运算，需要转换数据类型

1.5.1 转字符串类型

方式	说明	例子
toString()	转字符串	var num =1；alert（num.toString)；
String()	强制转换	var num =1；alert（String（num）)；
加号拼接	和字符串拼接的都是字符串	var num =1；alert（num+“字符串”)；

第三种方式最常用，也称隐式转换

1.5.2 转数字型（重点）

方式	说明	例子
parselnt(String)	将string转整数数值型（取整）	parselnt(‘232’)；
parseFloat（string）	转为浮点字符型	parseFloat（‘2.33’）
Number（）强制转换	转为字符型	Number（‘12’）
*js隐式转换（- /）**	用算数运算符转为数值型	‘12’ - 0

1.5.3 转布尔型

方式	说明	例子
Boolean（）函数	其他类型转布尔型	Boolean（‘小小’）

代表空、否的值会被转为false，如‘’、0、NaN、null、undefined

其余的都会转为true

2. 案例

2.1 显示年龄案例

<!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("请输入您的年龄：");
        alert('您的年龄是' + age);
    </script>
</head>

<body>

</body>

</html>

2.2 输入年份显示年龄

<!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 year = prompt("请输入出生年份：");
        var age = 2022 - year + 1;
        alert('您今年' + age + '岁啦！');
    </script>
</head>

<body>

</body>

</html>

2.3 简单加法器

<!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 num1 = prompt('请输入第一个数值：')
        var num2 = prompt('请输入第二个数值：')
        var result = parseFloat(num1) + parseFloat(num2);
        alert(num1 + '+' + num2 + '=' + result);
    </script>
</head>

<body>

</body>

</html>