JavaScript operators



Operator = is used for assignment.

Operator + is used to add value.


Operator = is used to assign values ​​to JavaScript variables.

The arithmetic operator + is used to add values.

Instance

<!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>

Run Instance»

Click the "Run Instance" button to view the online instance


JavaScript arithmetic operators

Addition:


##Example

<!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>

Run instance»Click the "Run instance" button to view the online instance

Subtraction:

Instance

<!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>

Run instance»Click "Run" Example" button to view online examples

Multiplication:

##Examples

<!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>

Run instance»
Click the "Run instance" button to view the online instance

Division:

Instance

<!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>

Run Instance»
Click the "Run Instance" button to view Online example

Modulo (remainder)

Example

<!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>

Run Instance»
Click the "Run Instance" button to view the online instance

Self-increment:

Instance

<!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>

Run Instance»
Click the "Run Instance" button to view the online instance

Instance

<!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>

Run Instance»
Click the "Run Instance" button to view the online instance

Decrease:

Example

<!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>


Run Instance»

Click the "Run Instance" button to view the online instance

Instance

<!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>

Run Example»

Click the "Run Example" button to view the online example

JavaScript assignment Operator

The assignment operator is used to assign values ​​to JavaScript variables.

Given x=10 and y=5, the following table explains the assignment operators:

=:

##Instance

<!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>

Run Instance»Click the "Run Instance" button to view the online instance

+=:

Instance

<!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>

Run instance»Click" Run instance" button to view the online instance

-=:

Instance

<!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>

Run instance»Click the "Run instance" button to view the online instance

*=:

Instance

<!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>

Run Instance»Click the "Run Instance" button to view the online instance

/=:

Instance

<!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>

Run Instance»Click the "Run Instance" button to view the online instance

%=:

Instance

<!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>

Run Instance»Click "Run Instance" " button to view online examples


##+ operator for strings# The ##+ operator is used to add (concatenate) text values ​​or string variables.

To connect two or more string variables, please use the + operator.

Instance

<!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>

Run instance »

Click the "Run instance" button to view the online instance

To add spaces between two strings, you need to insert spaces into a string:

Example

<!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>

Run Example»

Click the "Run Example" button to view the online example

Or insert spaces into the expression:

Example

<!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>

Run instance»

Click the "Run instance" button to view the online instance


pair characters Addition of strings and numbers

Add two numbers and return the sum of the numbers added. If a number is added to a string, a string is returned, as shown in the following example:

Instance

<!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>

Run Instance»

Click the "Run Instance" button to view the online instance

Rule: If you add a number to a string, the result will be a string!