JavaScript中文参考手册 / JavaScript 运算符

JavaScript 运算符


运算符 = 用于赋值。

运算符 + 用于加值。


运算符 = 用于给 JavaScript 变量赋值。

算术运算符 + 用于把值加起来。

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>点击按钮计算 x 的值.</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
	y=5;
	z=2;
	x=y+z;
	document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


JavaScript 算术运算符

加法:


实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>假设 y=5,计算 x=y+2,并显示结果。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var y=5;
	var x=y+2;
	var demoP=document.getElementById("demo")
	demoP.innerHTML="x=" + x;
}
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

减法:

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>设置 y=5, 计算出 x=y-2, 并输出结果。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction()
{
	var y=5;
	var x=y-2;
	var demoP=document.getElementById("demo");
	demoP.innerHTML="x=" + x;
}
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

乘法:

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>设置 y=5, 计算出 x=y*2, 并输出结果。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction()
{
	var y=5;
	var x=y*2;
	var demoP=document.getElementById("demo")
	demoP.innerHTML="x=" + x;
}
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

除法:

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>设置 y=5, 计算 x=y/2, 并输出结果。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction()
{
	var y=5;
	var x=y/2;
	var demoP=document.getElementById("demo")
	demoP.innerHTML="x=" + x;
}
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

取模(余数)

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>设置 y=5, 计算出 x=y%2, 并显示结果。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction()
{
	var y=5;
	var x=y%2;
	var demoP=document.getElementById("demo")
	demoP.innerHTML="x=" + x;
}
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

自增:

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>设置 y=5, 计算出 x=++y, 并显示结果。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction()
{
	var y=5;
	var x=++y;
	var demoP=document.getElementById("demo")
	demoP.innerHTML="x=" + x + ", y=" + y;
}
</script>
<p><strong>注意:</strong>两个值 x 和 y 都受到影响。</p>
	
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>设置 y=5, 计算出 x=y++, 并显示结果。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction()
{
	var y=5;
	var x=y++;
	var demoP=document.getElementById("demo")
	demoP.innerHTML="x=" + x + ", y=" + y;
}
</script>
<p><strong>注意:</strong> x 和 y 两个值都受到影响。</p>
	
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

自减:

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>设置 y=5, 计算出 x=--y, 并显示结果。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction()
{
	var y=5;
	var x=--y;
	var demoP=document.getElementById("demo")
	demoP.innerHTML="x=" + x + ", y=" + y;
}
</script>
<p><strong>注意:</strong> x 和 y 两个值都会被影响。</p>
	
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>设置 y=5, 计算出 x=y--, 并显示结果。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction()
{
	var y=5;
	var x=y--;
	var demoP=document.getElementById("demo")
	demoP.innerHTML="x=" + x + ", y=" + y;
}
</script>
<p><strong>注意:</strong>x 和 y 两个值都会受到影响。</p>
	
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

JavaScript 赋值运算符

赋值运算符用于给 JavaScript 变量赋值。

给定 x=10 和 y=5,下面的表格解释了赋值运算符:

=:

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>设置 x=10 和 y=5, 计算 x=y, 并显示结果。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction()
{
	var x=10;
	var y=5;
	x=y;
	var demoP=document.getElementById("demo")
	demoP.innerHTML="x=" + x;
}
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

+=:

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>设置 x=10 和 y=5, 计算 x+=y, 并显示结果。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction()
{
	var x=10;
	var y=5;
	x+=y;
	var demoP=document.getElementById("demo")
	demoP.innerHTML="x=" + x;
}
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

-=:

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>设置 x=10 和 y=5, 计算 x-=y, 并显示结果。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction()
{
	var x=10;
	var y=5;
	x-=y;
	var demoP=document.getElementById("demo")
	demoP.innerHTML="x=" + x;
}
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

*=:

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>设置 x=10 和 y=5, 计算 x*=y, 并显示结果。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction()
{
	var x=10;
	var y=5;
	x*=y;
	var demoP=document.getElementById("demo")
	demoP.innerHTML="x=" + x;
}
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

/=:

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>设置 x=10 和 y=5, 计算 x/=y, 并显示结果。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction()
{
	var x=10;
	var y=5;
	x/=y;
	var demoP=document.getElementById("demo");
	demoP.innerHTML="x=" + x;
}
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

%=:

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>设置 x=10 和 y=5, 计算 x%=y, 并显示结果。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction()
{
	var x=10;
	var y=5;
	x%=y;
	var demoP=document.getElementById("demo")
	demoP.innerHTML="x=" + x;
}
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


用于字符串的 + 运算符

+ 运算符用于把文本值或字符串变量加起来(连接起来)。

如需把两个或多个字符串变量连接起来,请使用 + 运算符。

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>点击按钮创建及增加字符串变量。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
	txt1="What a very";
	txt2="nice day";
	txt3=txt1+txt2;
	document.getElementById("demo").innerHTML=txt3;
}
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

要想在两个字符串之间增加空格,需要把空格插入一个字符串之中:

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>点击按钮创建及增加字符串变量。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
	txt1="What a very ";
	txt2="nice day";
	txt3=txt1+txt2;
	document.getElementById("demo").innerHTML=txt3;
}
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

或者把空格插入表达式中:

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>点击按钮创建及增加字符串变量。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
	txt1="What a very";
	txt2="nice day";
	txt3=txt1+" "+txt2;
	document.getElementById("demo").innerHTML=txt3;
}
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


对字符串和数字进行加法运算

两个数字相加,返回数字相加的和,如果数字与字符串相加,返回字符串,如下实例:

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>点击按钮创建及增加字符串变量。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
	var x=5+5;
	var y="5"+5;
	var z="Hello"+5;
	var demoP=document.getElementById("demo");
	demoP.innerHTML=x + "<br>" + y + "<br>" + z;
}
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

规则:如果把数字与字符串相加,结果将成为字符串!