标签：结果 JavaScript innerHTML 运算符 let nbsp var
声明
该文部分代码和内容节选自菜鸟教程，仅用作个人学习，特此声明
12、JavaScript运算符
运算符 = 用于给 JavaScript 变量赋值。
算术运算符 + 用于把值加起来。
y=5; z=2; x=y+z;//7
12.1 JavaScript算数运算符
下表中y=5
| 运算符 | 描述 | 例子 | 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(x=y++) | 6(5) | 6(6) |
| -- | 自减 | x=--y(x=y--) | 4(5) | 4(4) |
算术运算符练习
JavaScript代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript算数运算符练习</title>
</head>
<body>
<p>假设 y=5。</p>
<button onclick="add()">add</button>
<button onclick="sub()">sub</button>
<button onclick="mul()">mul</button>
<button onclick="div()">div</button>
<button onclick="mold()">mold</button>
<button onclick="selfAdd1()">selfAdd++</button>
<button onclick="selfAdd2()">++selfAdd</button>
<button onclick="selfSub1()">selfSub--</button>
<button onclick="selfSub2()">--selfSub</button>
<p>计算 x=y+2，并显示结果。</p>
<p id="demo1"></p>
<p>计算 x=y-2，并显示结果。</p>
<p id="demo2"></p>
<p>计算 x=y*2，并显示结果。</p>
<p id="demo3"></p>
<p>计算 x=y/2，并显示结果。</p>
<p id="demo4"></p>
<p>计算 x=y%2，并显示结果。</p>
<p id="demo5"></p>
<p>计算 x=y++，并显示结果。</p>
<p id="demo6"></p>
<p>计算 x=++y，并显示结果。</p>
<p id="demo7"></p>
<p>计算 x=y--，并显示结果。</p>
<p id="demo8"></p>
<p>计算 x=--y，并显示结果。</p>
<p id="demo9"></p>
<script>
function add(){
let y=5;
let x=y+2;
document.getElementById("demo1").innerHTML = "x = " + x +" "+"y = " + y;
}
function sub(){
let y=5;
let x=y-2;
document.getElementById("demo2").innerHTML = "x = " + x +" "+"y = " + y;
}
function mul(){
let y=5;
let x=y*2;
document.getElementById("demo3").innerHTML = "x = " + x +" "+"y = " + y;
}
function div(){
let y=5;
let x=y/2;
document.getElementById("demo4").innerHTML = "x = " + x +" "+"y = " + y;
}
function mold(){
let y=5;
let x=y%2;
document.getElementById("demo5").innerHTML = "x = " + x +" "+"y = " + y;
}
function selfAdd1(){
let y=5;
let x=y++;
document.getElementById("demo6").innerHTML = "x = " + x +" "+"y = " + y;
}
function selfAdd2(){
let y=5;
let x=++y;
document.getElementById("demo7").innerHTML = "x = " + x +" "+"y = " + y;
}
function selfSub1(){
let y=5;
let x=y--;
document.getElementById("demo8").innerHTML = "x = " + x +" "+"y = " + y;
}
function selfSub2(){
let y=5;
let x=--y;
document.getElementById("demo9").innerHTML = "x = " + x +" "+"y = " + y;
}
</script>
</body>
</html>
生成页面效果
12.2 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 |
赋值运算符练习
JavaScript代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript赋值运算符练习</title>
</head>
<body>
<p>设置 x=10 和 y=5。</p>
<button onclick="fuZhi()">=</button>
<button onclick="jiaD()">+=</button>
<button onclick="jianD()">-=</button>
<button onclick="chengD()">*=</button>
<button onclick="chuD()">/=</button>
<button onclick="moD()">%=</button>
<p>1.计算 x=y, 并显示结果</p>
<p id="demo1"></p>
<p>2.计算 x+=y, 并显示结果</p>
<p id="demo2"></p>
<p>3.计算 x-=y, 并显示结果</p>
<p id="demo3"></p>
<p>4.计算 x*=y, 并显示结果</p>
<p id="demo4"></p>
<p>5.计算 x/=y, 并显示结果</p>
<p id="demo5"></p>
<p>6.计算 x%=y, 并显示结果</p>
<p id="demo6"></p>
<script>
function fuZhi()
{
let x=10;
let y=5;
x=y;
document.getElementById("demo1").innerHTML = "x = " + x +" "+"y = " + y;
}
function jiaD()
{
let x=10;
let y=5;
x+=y;
document.getElementById("demo2").innerHTML = "x = " + x +" "+"y = " + y;
}
function jianD()
{
let x=10;
let y=5;
x-=y;
document.getElementById("demo3").innerHTML = "x = " + x +" "+"y = " + y;
}
function chengD()
{
let x=10;
let y=5;
x*=y;
document.getElementById("demo4").innerHTML = "x = " + x +" "+"y = " + y;
}
function chuD()
{
let x=10;
let y=5;
x/=y;
document.getElementById("demo5").innerHTML = "x = " + x +" "+"y = " + y;
}
function moD()
{
let x=10;
let y=5;
x%=y;
document.getElementById("demo6").innerHTML = "x = " + x +" "+"y = " + y;
}
</script>
</body>
</html>
生成页面效果
12.3 JavaScript连接符
+ 运算符用于把文本值或字符串变量加起来（连接起来）。
如需把两个或多个字符串变量连接起来，使用 + 运算符。
//1.连接两个或多个字符串变量
txt1="What a";
txt2="nice day";
txt3=txt1+txt2; //what anice day
//2.1字符串之间增加空格
txt1="What a ";
txt2="nice day";
txt3=txt1+txt2; //What a nice day
//2.2表达式插入空格
txt1="What a";
txt2="nice day";
txt3=txt1+" "+txt2; //What a nice day
12.4 补充知识
1、对字符串和数字进行加法运算
规则:如果把数字与字符串相加，结果将成为字符串！
x=5+5; //10
y="5"+5; //55
z="Hello"+5; //Hello5
空文本 + 数字得到的运算结果都是把数字转成字符串，无论文本有多少个空格。但是空格会计入长度。
html会压缩空格， 所以直观上显示的是字符串，没有显示空格。
var result1 = 5+5+"abc"; //结果将是"10abc"
var result2 = ""+5+5+"abc"; //结果将是"55abc"
var result1=""+5; // 得到的结果是"5"
var result2=" "+5; // 得到的结果是" 5"
var result3=" "+5; // 得到的结果是" 5"
2、不同类型运算转换方式
1.字符串和数字相加，数字转成字符串.
var one="This is a test";
var two=123;
var three=one+two;
// 结果 three:This is a test123
2.数字和布尔值相加，布尔值false 转成 0，true 转成 1
var one=13;
var two=true;
var three=one+two;
// 结果 three:14
3.字符串与布尔值相加，布尔值转化成字符串。
4.数字与 null(空值) 相加，null 转化为数字 0
var car=null+3+4; // 结果为7
5.字符串与 null(空值) 相加，null 转化为字符串
var car=null+"a"; // 结果为 nulla
1、字符串一个很能强大的数据类型；在执行加 + 时,将被加的对象统一处理为字符串。
2、bool 类型在与数字类型进行相加时，视为 0 或者 1 处理。
3、null 类型与数字类型进行累加时，视为 0 处理。
4、bool 类型与 null 类型进行累加时，视为其与整数类型累加处理。
5、undefined 除了与字符串进行累加时有效（undefined 视为字符串"undefined"处理），其他情况皆返回 NaN。
3、关于取模
取模运算的结果符号只与左边值的符号有关：
var x = 7 % 3; // 结果为 1
var y = 7 % (-3); // 结果为 1
var z = (-7) % 3; // 结果为 -1
- 如果 % 左边的操作数是正数，则模除的结果为正数或零；
- 如果 % 左边的操作数是负数，则模除的结果为负数或零。
4、JavaScript == 与 === 区别
1、对于 string、number 等基础类型，== 和 === 是有区别的
- a）不同类型间比较，== 之比较 "转化成同一类型后的值" 看 "值" 是否相等，=== 如果类型不同，其结果就是不等。
- b）同类型比较，直接进行 "值" 比较，两者结果一样。
2、对于 Array,Object 等高级类型，== 和 === 是没有区别的
进行 "指针地址" 比较
3、基础类型与高级类型，== 和 === 是有区别的
- a）对于 ==，将高级转化为基础类型，进行 "值" 比较
- b）因为类型不同，=== 结果为 false
标签：结果,JavaScript,innerHTML,运算符,let,nbsp,var 来源： https://www.cnblogs.com/xypersonal/p/16209539.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。