- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

JavaScript 基本数据类型

牛哄哄的柯南发表于 2021/05/26 16:06:19 2021/05/26

1.9k+ 0 0

【摘要】 JavaScript 基本数据类型 String类型字符串属性和方法字符串属性字符串方法 Number类型算术运算符赋值运算符比较运算符逻辑运算符 Boolean类型Undefined类型Null类型类型判断 String类型字符串是存储字符（比如 “Keafmd”）的变量。字符串可以是引号中的任意文本。可以使用单引号或双引号。 ...

JavaScript 基本数据类型

String类型
- 字符串属性和方法
- - 字符串属性
  - 字符串方法
Number类型
Boolean类型
Undefined类型
Null类型
类型判断

String类型

字符串是存储字符（比如 “Keafmd”）的变量。
字符串可以是引号中的任意文本。可以使用单引号或双引号。

<script type="text/javascript"> var name = '牛哄哄的柯南';
</script>

  
 
  1
  2
  3

字符串属性和方法

原始值字符串，如 “John”, 没有属性和方法(因为他们不是对象)。
原始值可以使用 JavaScript 的属性和方法，因为 JavaScript 在执行方法和属性时可以把原始值当作对象。

字符串属性

属性	说明
constructor	返回创建字符串属性的函数
length	返回字符串的长度
prototype	允许您向对象添加属性和方法

字符串方法

方法	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串,产生新字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值

样例代码：

<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title></title> <script> var msg = 'hello javascript'; //length 属性，表示的是字符串的长度 //charAt 返回索引位置的字符 //需求：查询字符串的最后一个 字符是什么 console.log('字符串最后一个 字符：'+msg.charAt(msg.length-1)) //concat  var str1  = "hello "; var str2 = "world!" console.log("str1.concat(str2):"+str1.concat(str2)) console.log("str1: "+str1); console.log("str2: "+str2); //indexOf lastIndexOf var str3 = "hello world!" console.log("str3.indexOf('l'): "+str3.indexOf('l')) console.log("str3.lastIndexOf('l'): "+str3.lastIndexOf('l')) //slice 切片 /** * 17 * K e a f m d 1 一个参数，表示，从索引位置开始（包含），到字符串末尾结束 2 两个参数，start 从索引位置开始（包含），end :结束位置 (不包含) */ var str4 ="Hello My Name is Keafmd,Age is 18" console.log('str4.slice(6): '+str4.slice(6)) console.log('str4.slice(17): '+str4.slice(17,23)) console.log('str4.slice(-2,str4.length): '+str4.slice(-2,str4.length)) // substr\substring console.log("str4.substr(17,6): "+str4.substr(17,6)) console.log("str4.substring(17,6): "+str4.substring(17,23)) //toLowerCase  \  toUpperCase console.log("str4.toUpperCase(): "+(str4.toUpperCase())) console.log("str4.toLowerCase(): "+(str4.toLowerCase())) console.log("str4: "+str4);//原始字符串不会改变 //trim  var str5 ="  Hello  " console.log("str5.length: "+str5.length); console.log("str5.trim().length: "+str5.trim().length); </script> </head> <body> </body>
</html>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
  55
  56
  57
  58
  59
  60

效果截图：

Number类型

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带。

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript"> var age = 18; var number = 34.7 //输出 console.log('age:'+age) console.log('number:'+number)
		</script>
		<title></title>
	</head>
	<body>
	</body>
</html>
  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17

效果截图：

算术运算符

运算符	描述	例子	x 运算结果	y 运算结果
+	加法	x=y+2	7	5
-	减法	x=y-2	3	5
*	乘法	x=y*2	10	5
/	除法	x=y/2	2.5	5
%	取模（余数）	x=y%2	1	5
++	自增	x=++y	6	6
++	自增	x=y++	5	6
–	自减	x=- -y	4	4
–	自减	x=y- -	5	4

1.自增(++)和自减(- -)：放到变量的前面有限参与运算，然后再跟表达式计算。
2.如果+参与运算的类型是字符串,则会将结果以字符串的形式返回。
3.数值类型和bool类型运算时，bool类型会转换成数字， true：1 false：0。

样例代码：

<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title></title> <script> //算数运算 var numa = 5; var numb = 6; var numc = 10; console.log("numa+numb: "+(numa+numb)); console.log("numa-numb: "+(numa-numb)); console.log("numa*numb: "+(numa*numb)); console.log("numa/numb: "+(numa/numb)); console.log("numc%numb: "+(numc%numb)); // -- ++  var numd = 2; // console.log(numd++); // console.log(numd); console.log(++numd); console.log(numd); //字符串 参与算数运算 console.log('1'+'1') //boolean 参与算数运算 console.log("true+1 : "+(true+1)); console.log("false+1 : "+(false+1)); </script> </head> <body> </body>
</html>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37

效果截图：

赋值运算符

赋值运算符用于给 JavaScript 变量赋值。
给定 x=10 和 y=5，下面的表格解释了赋值运算符：↓

运算符	例子	等同于	运算结果
=	x=y		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

样例代码：

<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title></title> <script> //赋值运算 var numa = 100; var numb = numa; console.log("numa: "+numa); //100 console.log("numb: "+numb); // 100 numa += 10; //numa  = numa +10 console.log("numa: "+numa); //110 numa -= 10; //numa  = numa - 10 console.log("numa: "+numa); //100 numa *= 2; //numa  = numa * 2 console.log("numa: "+numa); //200 numa /= 5; //numa  = numa /5  console.log("numa: "+numa); // 40 numa %= 38; //numa  = numa % 38 console.log("numa: "+numa); // 2 </script> </head> <body> </body>
</html>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36

效果截图：

比较运算符

比较运算符在逻辑语句中使用，以测定变量或值是否相等。
给定x=5，下面的表格解释了比较运算符：↓

运算符	描述	比较	返回值
==	等于	x==8	false
==	等于	x==5	true
===	绝对等于（值和类型均相等）	x===“5”	false
===	绝对等于（值和类型均相等）	x===5	true
!=	不等于	x!=8	true
!==	不绝对等于（值和类型有一个不相等，或两个都不相等）	x!==“5”	true
!==	不绝对等于（值和类型有一个不相等，或两个都不相等）	x!==5	false
>	大于	x>8	false
<	小于	x<8	true
>=	大于或等于	x>=8	false
<=	小于或等于	x<=8	true

样例代码：

<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title></title> <script> var numa = 100; var numb = 150; var numc = 100; console.log("100 == 150: "+(numa == numb)); console.log("100 != 150: "+(numa != numb)); console.log("100 >  150: "+(numa > numb)); console.log("100 <  150: "+(numa < numb)); console.log("100 >=  150: "+(numa >= numb)); console.log("100 <  150: "+(numa <= numb)); //== === var v1 = 100; var v2 = '100'; var v3 = 100; //两个等于会有类型转换（自动） console.log("v1 == v2: " +(v1 == v2)); console.log("v1 === v2: " +(v1 === v2)); console.log("v1 === v3: " +(v1 === v3)); </script> </head> <body> </body>
</html>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40

效果截图：

逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。
给定 x=6 以及 y=3，下表解释了逻辑运算符：↓

运算符	描述	例子
&&	and	(x < 10 && y > 1) 为 true
\|\|	or	(x==5 \|\| y==5) 为 false
!	not	!(x==y) 为 true

样例代码：

<!DOCTYPE html>
<htm<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title></title> <script> // var b1 = true; // var b2 = false; // var b3 = true; // var b4 = false; //两个都是true，则表达式的结果为true，否则为false console.log( "true && true : "+(true && true)); //true console.log( "true && false : "+(true && false)) ;//false console.log( "false && false : "+(false && false)); //false //只要有一个为true，则表达式的结果为true console.log( "true || true : "+(true ||  true)) ;// true console.log( "true || false : "+(true ||  false)) ;// true console.log( "false || false : "+(false ||  false)) ;// true console.log( "!true : "+(!true)) console.log( "!false : "+(!false)) // var result =  逻辑表达式 true/false  ? '表达式位真的结果'   : '表达式为false'  var  age = 70; //三目运算 var info =  age>=18  ?  '成年'  : '未成年'; console.log(info) </script> </head> <body> </body>
</html>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40

效果截图：

Boolean类型

该类型只有两个值，true和false
表示真或者假.常用于判断。
true ：取值 true 、非0的数字、非空字符串(字符长度为0)
false：取值 false、0、空字符串、null、undefined

Undefined类型

只有一个值，即undefined值。使用var声明了变量，但未给变量初始化值，那么这个变量的值就是undefined。

Null类型

Null类型被看做空对象指针，Null类型也是空的对象引用。

类型判断

typeof 运算符，返回的是变量的类型名字（字符串）

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script> var t1 = 'Keafmd'; var t2 = 3.14; var t3 = false; var t4 = null; var t5 = undefined; var t6 = []; var t7 = {}; var t8 = function(){}; console.log("typeof(字符串): "+typeof(t1)) console.log("typeof(数字): "+typeof(t2)) console.log("typeof(null): "+typeof(null)) console.log("typeof(undefined): "+typeof(undefined)) console.log("typeof([]): "+typeof(t6)) console.log("typeof({}): "+typeof(t7)) console.log("typeof(function): "+typeof(t8)) if(typeof(t1) === 'string'){ console.log('是字符串') }
		</script>
		<title></title>
	</head>
	<body>
	</body>
</html>
  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33

效果截图：

写作不易，读完如果对你有帮助，感谢点赞支持！
如果你是电脑端，看见右下角的“一键三连”了吗，没错点它[哈哈]

加油！

共同努力！

Keafmd

文章来源: keafmd.blog.csdn.net，作者：牛哄哄的柯南，版权归原作者所有，如需转载，请联系作者。

原文链接：keafmd.blog.csdn.net/article/details/109551148

点赞
收藏
关注作者

作者其他文章

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

开发者空间

了解空间

工作台

开发工具

实战案例

空间活动

空间论坛

开发平台

软件开发生产线 CodeArts

AI平台ModelArts

数据治理中心 DataArts Studio

数字内容生产线 MetaStudio

精选服务

云数据库 GaussDB

云数据库 RDS for MySQL

MapReduce服务 MRS

数据仓库服务 DWS

分布式缓存服务Redis版

分布式消息服务 DMS

华为云实时音视频 SparkRTC

媒体处理 MPC

主机迁移服务 SMS

对象存储迁移服务 OMS

云消息服务 KooMessage

云手机服务 KooPhone

企业搜索服务 KooSearch

云地图服务 KooMap

更多开放能力

开发工具

API生态

CodeArts API

API Explorer

Terraform Explorer

KooCLI

API 中心

SDK 中心

开发服务

Codelabs

DevStar

低代码平台Astro

CodeArts IDE

Huawei Cloud Toolkit

Classroom

开发资源

开源镜像站

开源资源

开发语言

开发实践

入门精选

分发资源

企业应用中心

企业通用专区

教育专区

华为应用专区

政务云专区

硬件云服务商城

医疗健康专区

跳蚤市场

华为云开发者日

直播专区

开发者精品活动

DTSE Tech Talk

加入HCDE

加入HCDG

加入HCSD

加入HCWD

鲁班会

沃土云创计划·企业

沃土云创计划·高校

沃土云创计划·个人

沃土云创计划·开源共创

博客

论坛

专题

开发者榜单

学习路径

在线课程

动手实验

考试认证

培训服务