8-JavaScript 运算符

1、运算符

  运算符 = 用于赋值。

  运算符 + 用于加值。

  实例:

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

  执行结果:

    x=7

2、算数运算符

var x=5;

运算符描述例子x 运算结果y 运算结果实例

+

加法

x=y+2

7

5

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

-

减法

x=y-2

3

5

var y=5;
var x=y-2;
var demoP=document.getElementById("demo");
demoP.innerHTML="x=" + x;

*

乘法

x=y*2

10

5

var y=5;
var x=y*2;
var demoP=document.getElementById("demo")
demoP.innerHTML="x=" + x;

/

除法

x=y/2

2.5

5

var y=5;
var x=y/2;
var demoP=document.getElementById("demo")
demoP.innerHTML="x=" + x;

%

取模(余数)

x=y%2

1

5

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

++

自增

x=++y

6

6

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

x=y++ 5 6 var y=5;
var x=y++;
var demoP=document.getElementById("demo")
demoP.innerHTML="x=" + x + ", y=" + y;

--

自减

x=--y

4

4

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

x=y--

5

4

var y=5;
var x=y--;
var demoP=document.getElementById("demo")
demoP.innerHTML="x=" + x + ", y=" + y;

3、赋值运算符

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

运算符例子等同于运算结果在线实例

=

x=y

 

x=5

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

+=

x+=y

x=x+y

x=15

var x=10;
var y=5;
x+=y;
var demoP=document.getElementById("demo")
demoP.innerHTML="x=" + x;

-=

x-=y

x=x-y

x=5

var x=10;
var y=5;
x-=y;
var demoP=document.getElementById("demo")
demoP.innerHTML="x=" + x;

*=

x*=y

x=x*y

x=50

var x=10;
var y=5;
x*=y;
var demoP=document.getElementById("demo")
demoP.innerHTML="x=" + x;

/=

x/=y

x=x/y

x=2

var x=10;
var y=5;
x/=y;
var demoP=document.getElementById("demo");
demoP.innerHTML="x=" + x;

%=

x%=y

x=x%y

x=0

var x=10;
var y=5;
x%=y;
var demoP=document.getElementById("demo")
demoP.innerHTML="x=" + x;

4、用于字符串 + 运算符

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

  实例:

  function myFunction()
  {
    txt1="What a very";
    txt2="nice day";
    txt3=txt1+txt2;
    document.getElementById("demo").innerHTML=txt3;
  }

  执行结果:

    What a verynice day

  

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

  实例:

  function myFunction()
  {
    txt1="What a very ";
    txt2="nice day";
    txt3=txt1+txt2;
    document.getElementById("demo").innerHTML=txt3;
  }

  执行结果:

    What a very nice day

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

  实例:

  function myFunction()
  {
    txt1="What a very";
    txt2="nice day";
    txt3=txt1+" "+txt2;
    document.getElementById("demo").innerHTML=txt3;
  }

  执行结果:

    What a very nice day

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

  实例:  

  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;
  }

  执行结果:

    10
    55
    Hello5

原文地址:https://www.cnblogs.com/killer-j/p/13273946.html