0
0

【JavaScript】(二) JS数据类型

JS

目录

数据类型

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.660Boolean布尔值类型，如：true、false，等价于1和0falseString字符串类型，如”张三“，注意js里面，字符串都是带引号的“”Undefinedvar a; 声明了变量a 但是没有给值，此时 a=undefinedundefinedNullvar 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代码，通过控制台输出或者弹窗来查看哦~

例子：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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+308alert(Number.MIN_VALUE);// 5e-324

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

可通过控制台输出查看

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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);// Infinityalert(-Infinity);// -Infinityalert(NaN);// NaN

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

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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 或者 falseisNaN() 例子：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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 的意思\斜杠 \’’ 单引号"”双引号\ttab 缩进\b空格 ，b 是 blank 的意思

2.3.3 字符串长度

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

例子：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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 字符串拼接

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

例子：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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 字符串拼接加强
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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>

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

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

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

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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。

例子：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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 ( 如果进行相连或者相加时，注意结果）

例子：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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 值，里面存的值为空

例子：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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

不同类型的返回值
类型例结果Stringtypeof"小白"“string”Numbertypeof 18“number”Booleantypeof true“boolean”Undefinedtypeof undefined“undefined”Nulltypeof 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+“我是字符串”);
例子：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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
例子:

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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(typeofNumber('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 输入出生年份计算年龄

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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 简单加法器

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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

例子：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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>

结果展示：
转换成布尔型

标签： javascript 前端
本文转载自: https://blog.csdn.net/weixin_48650082/article/details/124533889
版权归原作者 香蕉卟NaNa 所有， 如有侵权，请联系我们删除。
登录后发布评论

“【JavaScript】(二) JS数据类型”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

盘点10款顶级加密软件，让你的数据更安全

2024ICPC网络赛第一场

cmake应用：集成gtest进行单元测试_cmake 使用 gtest

ubuntu20.04 安装vscode 并且配置环境

Windows下如何查看一个dll依赖的其他dll库

【C++】—— list 模拟实现

离线 VisualStudio2022 安装包在无互联网的环境下安装

文章导航