当前位置：首页 > news >正文

【JavaScript】详讲运算符--算术运算符

news 来源：原创 2025/4/24 12:19:01

1、运算符简介

运算符也叫操作符，通过运算符可以对一个或多个值进行运算，比如：typeof就是运算符，可以来获得一个值的类型，它会将该值的类型以字符串的形式返回,即：typeof 变量名的结果为字符串类型。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var a=123;var ch=typeof  a;document.writeln(typeof ch);document.writeln("<br>")document.writeln(ch);</script>
</head>
<body>
</body>
</html>

结果：

2、算术运算符（是二元运算符，即运算时需要两个操作数）

（1）+(可以对两个值进行加法运算，并将结果返回)

当对非Number类型的值进行+运算时，会将这些值转换为Number类型，然后再运算。（除了字符串，其他情况都符合该规则）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var  a=true +false;    //true对应的Number类型的值为1，而false对应的值为0document.writeln(a)</script>
</head>
<body>
</body>
</html>

结果：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var  a=null +1;    //null对应的Number类型的值为0document.writeln(a)</script>
</head>
<body>
</body>
</html>

结果：

特殊情况1：任何值和NaN做运算都得NaN

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var  a=NaN +1;document.writeln(a)</script>
</head>
<body>
</body>
</html>

结果：

特殊情况2：如果对两个字符串进行加法运算，则会将这两个字符串拼接为一个字符串，并返回。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var  a="123"+"456";document.writeln(a)</script>
</head>
<body>
</body>
</html>

结果：

特殊情况3：任何的值和字符串做加法运算，都会先将该值转换为字符串，然后再和字符串做拼接。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var ch=1+'123';  //现将1转换为字符串'1'document.writeln(ch);</script>
</head>
<body>
</body>
</html>

结果：

特殊情况4：任何的值和字符串做加法运算，都会先将该值转换为字符串，然后再和字符串做拼接。，我们可以利用这一特性，来将任意的数据类型转换为字符串，方法为：该值+“”(空字符串）,这是一种隐式的类型转换，由浏览器自动完成，实际上它也是调用String()函数。例如：var=123;c=c+""与c=String(c)二者本质上是一样的。、

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var ch=123+"";document.writeln(typeof ch);document.writeln("<br>")document.writeln(ch);</script>
</head>
<body>
</body>
</html>

结果：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var ch=null+"";document.writeln(typeof ch);document.writeln("<br>")document.writeln(ch);</script>
</head>
<body>
</body>
</html>

结果：

练习1：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var  res=1+2+'3';//从左往右算，先计算1+2==3，然后计算：3+'3'，先将数字3转换为字符串’3'然后‘3’+‘3’做拼接document.writeln(res);</script>
</head>
<body>
</body>
</html>

结果：

练习2：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var  res='1'+2+3;//从左往右算，先计算1+2==3，然后计算:‘1’+2，先将数字2转换为字符串’2'然后做拼接，结果为：‘12’//然后‘12’+3，现将3转换为’3‘，然后’12‘+’3‘做拼接。document.writeln(res);</script>
</head>
<body>
</body>
</html>

结果：

（2）-（可以对两个值进行减法运算，并将结果返回）

注意：除了字符串与其他类型的值做加法外，字符串都会先转换为Number类型

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var ch=12-'10';document.writeln(ch);</script>
</head>
<body>
</body>
</html>

结果：

（3）*（可以对两个值进行乘法运算，并将结果返回）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var ch=12*2;document.writeln(ch);</script>
</head>
<body>
</body>
</html>

结果：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var ch=12*'4';document.writeln(ch);</script>
</head>
<body>
</body>
</html>

结果：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var ch=12*null;var ch1=12*undefineddocument.writeln(ch);document.writeln(ch1);</script>
</head>
<body>
</body>
</html>

结果：

（4）/(注意：这里与C++中的不一样，在JS中会带小数)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var ch=12/2;var ch1=3/2;document.writeln(ch);document.writeln(ch1);</script>
</head>
<body>
</body>
</html>

结果：

（5）总结：任何值做 - * / 运算时，都会自动转换为Number,可以利用这一特点做隐式类型转换，可以通过为一个值-0， *1 /1来将其转换为Number，原理和Number()函数一致，用起来更加简单。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var ch='12'-0;document.writeln( typeof ch);document.writeln(ch);</script>
</head>
<body>
</body>
</html>

结果：

（6）%(取模运算，即：取余数)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var ch=12%5;document.writeln(ch);</script>
</head>
<body>
</body>
</html>

结果：