JavaScript 基本数据类型

程序员文章站 2022-06-28 18:50:26

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

JavaScript 基本数据类型

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

String类型

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

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

字符串属性和方法

原始值字符串，如 “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>

效果截图：
JavaScript 基本数据类型

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>

效果截图：
JavaScript 基本数据类型

算术运算符

运算符	描述	例子	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>

效果截图：
JavaScript 基本数据类型

赋值运算符

赋值运算符用于给 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>

效果截图：
JavaScript 基本数据类型

比较运算符

比较运算符在逻辑语句中使用，以测定变量或值是否相等。
给定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>

效果截图：
JavaScript 基本数据类型

逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。
给定 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>

效果截图：
JavaScript 基本数据类型

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>

效果截图：
JavaScript 基本数据类型

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

加油！

共同努力！

Keafmd

本文地址：https://blog.csdn.net/weixin_43883917/article/details/109551148

相关标签：前端字符串基本数据类型 javascript

上一篇：关于外边距塌陷问题的解决方案你知道哪些？

下一篇：原生JS实现弹幕的简单操作速成

JavaScript 基本数据类型