【JavaScript】(二) JS数据类型

香蕉卟NaNa

已于 2023-02-24 16:07:28 修改

阅读量1.3k

点赞数 5

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

于 2022-05-01 22:20:27 首次发布

本文链接：https://blog.csdn.net/weixin_48650082/article/details/124533889

版权

JavaScript 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

数据类型

1、数据类型简介

1.1 变量的数据类型

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会
被自动确定。

var age = 10; // 这是一个数字型
var areYouOk = 'Yes'; // 这是一个字符串

在代码运行时，变量的数据类型是由 JS引擎根据 = 右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。
JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型：

var x = 6; // x 为数字
var x = "JJ"; // x 为字符串

1.2 数据类型的分类

JS 把数据类型分为两类：
• 简单数据类型（Number,String,Boolean,Undefined,Null）
• 复杂数据类型（object)

2、简单数据类型

2.1 基本数据类型

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

简单数据类型	说明	默认值
Number	数字型，包含整型值和浮点型值，如：66、0.66	0
Boolean	布尔值类型，如：true、false，等价于1和0	false
String	字符串类型，如”张三“，注意js里面，字符串都是带引号的	“”
Undefined	var a; 声明了变量a 但是没有给值，此时 a=undefined	undefined
Null	var a=null; 声明了变量a为空值	null

2.2 数字型 Number

JavaScript 数字类型既可以用来保存整数值，也可以保存小数(浮点数）。

var age = 18; // 整数
var Pi = 3.14; // 小数

2.2.1 数字型进制

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

二进制：前缀0b/0B，数字序列范围：0~1，逢二进一
八进制：前缀0，数字序列范围：0~7，逢八进一
十进制：前缀无，数字序列范围：0~10，逢十进一
十六进制：前缀0x/0X，数字序列范围：0~9，a ~ f（A ~ F），逢十六进一

如果你此时不想动手换算却又想知道某个数的某某进制转换出来的十进制数是多少的话，可以写两行JS代码，通过控制台输出或者弹窗来查看哦~

例子：

<!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 = 0b10;   // 二进制
        console.log(num1);
        var num2 = 010;    // 八进制
        console.log(num2);
        var num3 = 0xa;    // 十六进制
        console.log(num3);
        var num4 = 0x2689abc;
        console.log(num4);    // 通过控制台输出查看十六进制数2689abc的十进制数
    </script>
</head>
<body>
    
</body>
</html>

展示：
关于进制

2.2.2 数字型范围

JavaScript中数值的最大和最小值

alert(Number.MAX_VALUE); // 1.7976931348623157e+308
alert(Number.MIN_VALUE); // 5e-324

• 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
• 最小值：Number.MIN_VALUE，这个值为：5e-32

可通过控制台输出查看

<!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>
        console.log(Number.MAX_VALUE);  // 最大值
        console.log(Number.MIN_VALUE);  // 最小值
    </script>
</head>
<body>
    
</body>
</html>

最大最小

2.2.3 数字型三个特殊值

alert(Infinity); // Infinity
alert(-Infinity); // -Infinity
alert(NaN); // NaN

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

<!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>
        console.log(Number.MAX_VALUE*2);    // MAX_VALUE已经是最大值了，再乘2浏览器就会显示无穷大 Infinity
        console.log(-Number.MAX_VALUE*2);   // MAN_VALUE已经是最大值了，加上负号变成负数再乘2，浏览器就会显示无穷小 -Infinity
        console.log("JJ"-66);               // 字符串JJ无法与66进行运算，浏览器会显示NaN，结果是一个非数值的数
    </script>
</head>
<body>
    
</body>
</html>

展示：
无穷与非数值

2.2.4 isNaN()

用来判断一个变量是否为非数字的类型，返回 true 或者 false

例子：

<!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>
        console.log(isNaN(666));
        console.log(isNaN('香蕉卟NaNa'));
    </script>
</head>
<body>
    
</body>
</html>

展示：
isNaN函数

2.3 字符串型 String

字符串型可以是引号中的任意文本，其语法为双引号 “” 和单引号’’

var strMsg = "我爱北京天安门~"; // 使用双引号表示字符串
var strMsg2 = '我爱吃猪蹄~'; // 使用单引号表示字符串
// 常见错误
var strMsg3 = 我爱大肘子; // 报错，没使用引号，会被认为是js代码，但js没有这些语法

因为 HTML 标签里面的属性使用的是双引号，JS 这里更推荐使用单引号。

2.3.1 字符串引号嵌套

JS 可以用单引号嵌套双引号，或者用双引号嵌套单引号 (外双内单，外单内双)

var strMsg = '我是"高帅富"程序猿'; // 可以用''包含""
var strMsg2 = "我是'高帅富'程序猿"; // 也可以用"" 包含''
// 常见错误
var badQuotes = 'What on earth?"; // 报错，不能单双引号搭配

2.3.2 字符串转义符

类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。
转义符都是 \ 开头的，常用的转义符及其说明如下：

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

2.3.3 字符串长度

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

例子：

<!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 str = 'my name is JJ';
        console.log(str.length);
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
字符串长度

2.3.4 字符串拼接

• 多个字符串之间可以使用 + 进行拼接，其拼接方式为字符串 + 任何类型 = 拼接之后的新字符串
• 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

例子：

<!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>
        // 字符串拼接
        console.log('香蕉'+'卟'+'NaNa');
        // 数值字符串拼接
        console.log('100'+'99');
        // 数值字符串与数值
        console.log('23'+33);
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
字符串拼接

+号总结口诀：数值相加，字符相连

2.3.5 字符串拼接加强

<!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>
        // 字符串拼接加强
        console.log('我' + 18); // 只要有字符就会相连
        var age = 18;
        // console.log('我age岁啦'); // 这样不行哦
        console.log('我' + age); // 我18
        console.log('我' + age + '岁啦'); // 我18岁啦     
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
字符串拼接加强

我们经常会将字符串和变量来拼接，因为变量可以很方便地修改里面的值
变量是不能添加引号的，因为加引号的变量会变成字符串
如果变量两侧都有字符串拼接，口诀“引引加加 ”，删掉数字，写上引号和两个加号，变量写在两个加号中间

例子输入内容并弹出显示：

<!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 youName = prompt('请输入您的昵称');
        // 弹出显示
        alert('欢迎您呀~' + youName + ',等您好久了呢~');
    </script>
</head>
<body>
    
</body>
</html>

效果展示：
输入内容并弹出显示

2.4 布尔型 Boolean

布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。
布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

例子：

<!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>
        // 布尔值可进行运算
        console.log(true + 1);
        console.log(false + 1);
    </script>
</head>
<body>
    
</body>
</html>

效果展示：
布尔值

2.5 Undefined 和 Null

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

例子：

<!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 x;
        console.log(x);
        console.log('你好' + x);
        console.log(11 + x);
        console.log(true + x);
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
undefined

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

例子：

<!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>
        // null值
        var x = null;
        console.log('你好' + x);
        console.log(11 + x);
        console.log(true + x);
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
null值

3、获取变量数据类型

3.1 获取检测变量的数据类型

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

var num = 18;
console.log(typeof num) // 结果 number

不同类型的返回值

类型	例	结果
String	typeof"小白"	“string”
Number	typeof 18	“number”
Boolean	typeof true	“boolean”
Undefined	typeof undefined	“undefined”
Null	typeof null	“object”

3.2 字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。

数字字面量：8, 9, 10
字符串字面量：‘香蕉卟NaNa’, “哗啦啦”
布尔字面量：true，false

4、数据类型转换

4.1 数据类型转换

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。
我们通常会实现3种方式的转换：

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

4.2 转换为字符串

方式	说明	案例
toString()	转成字符串	var num=1;alert(num.toString());
String() 强制转换	转成字符串	var num=1;alert(String(num))
加号拼接字符串	和字符串拼接的结果都是字符串	var num=1;alert(num+“我是字符串”);

例子：

<!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>
        // 把数字型转换为字符串型
        // 法一：变量.toString()
        var num = 233;
        var str1 = num.toString();
        console.log(typeof str1);
        // 法二：String(变量)
        var str2 = String(num);
        console.log(typeof str2);
        // 法三：利用 + 拼接字符串的方法实现转换效果（隐式转换）
        var str3 = num + '';
        console.log(typeof str3);
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
数字型转换为字符串型

toString() 和 String() 使用方式不一样。
第三种加号拼接字符串转换的方式也称之为隐式转换。

4.3 转换为数字型

方式	说明	案例
parseInt(string) 函数	将string类型转换成整数数值型	parseInt(‘78’)
parseFloat(string)	将string类型转换成浮点数数值型	parseFloat(‘78.21’)
Number(string) 强制转换函数	将string类型转换成数值型	Number(‘12’)
js隐式转换( - * / )	利用算术运算隐式转换为数值型	‘12’ - 0

例子:

<!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>
        // 将其他类型转换为数值型
        // 法一：parseInt(变量)
        var age = prompt('请输入您的年龄');
        console.log(typeof age);  // 从输入框中获取的是字符串型
        var Age = parseInt(age);  // 转换为数值型
        console.log(typeof Age);
        console.log(parseInt('3.14'));   // parseInt()可将字符串转换为数值型，还会取整
        console.log(parseInt('6.99'));   // parseInt()只取整，不会四舍五入
        console.log(parseInt('88px'));   // parseInt()可把带单位的值去掉单位
        console.log(parseInt('rem100px'));  // 若开头不是数字，parseInt()会将其当作是非数字，输出NaN
        // 法二：parseFloat(变量)
        console.log(parseFloat('3.14'));   // parseFloat()可将字符串转换为数值型，可保留小数
        console.log(parseFloat('88px'));   // parseFloat()也可把带单位的值去掉单位
        console.log(parseFloat('rem100px'));  // 若开头不是数字，parseFloat()也会将其当作是非数字，输出NaN
        // 法三：Number(变量)  强制转换
        console.log(typeof Number('2333'));
        // 法四：利用算术运算 - * /  隐式转换位数字型
        var n1 = '12' - 0;    // 字符串'12'减数字0
        console.log(typeof n1);
        var n2 = '12' - '10';    // 字符串'12'减字符串'10'
        console.log(typeof n2);
        var n3 = '233' * 1;       // 字符串'233'乘数字1
        console.log(typeof n3);
        var n4 = '666' / 1;       // 字符串'666'除以数字1
        console.log(typeof n4);
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
转换位数值型

注意 parseInt 和 parseFloat 单词的大小写
隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型

4.4 输入出生年份计算年龄

<!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 yeas = prompt('请输入您的出生年份');
        var age = 2022 - yeas;
        alert('您今年'+age+'啦~');
    </script>
</head>
<body>
    
</body>
</html>

展示：
年龄计算

4.5 简单加法器

<!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 sum = parseFloat(num1) + parseFloat(num2);
        // var sum = (num1-0) + (num2-0);
        // var sum = (num1*1) + (num2*1);
        // var sum = (num1/1) + (num2/1);
        alert('两数之和是：'+sum);
    </script>
</head>
<body>
    
</body>
</html>

展示：
简单加法器

4.6 转换为布尔型

方式	说明	案例
Boolean() 函数	其他类型转换成布尔值	Boolean(‘true’);

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

例子：

<!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>
        console.log(Boolean(''));          // false
        console.log(Boolean(0));           // false
        console.log(Boolean(NaN));         // false
        console.log(Boolean(null));        // false
        console.log(Boolean(undefined));   // false
        console.log('-------------------');
        console.log(Boolean(2333));        // true
        console.log(Boolean('你好吗？'));  // true
        console.log(Boolean('我很好！'));  // true
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
转换成布尔型

香蕉卟NaNa

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
19
评论
【JavaScript】(二) JS数据类型

目录数据类型1、数据类型简介1.1 变量的数据类型1.2 数据类型的分类2、简单数据类型2.1 基本数据类型2.2 数字型 Number2.2.1 数字型进制2.2.2 数字型范围2.2.3 数字型三个特殊值2.2.4 isNaN()2.3 字符串型 String2.3.1 字符串引号嵌套2.3.2 字符串转义符2.3.3 字符串长度2.3.4 字符串拼接2.3.5 字符串拼接加强2.4 布尔型 Boolean2.5 Undefined 和 Null3、获取变量数据类型3.1 获取检测变量的数据.
复制链接

扫一扫