js获取用户输入的内容并显示,js接收用户输入的文字框

下面我们一起来做一个加法计算器，让用户输入两个数，然后计算这两个数的和。代码如下：

let num1 = prompt("请输入第一个数："); let num2 = prompt("请输入第二个数："); let sum = num1 num2; console.log(num1, num2, sum);

程序运行起来后，分别输入1和2，打印的结果为：1 2 12。

我们期望的值是3，但是当前计算的结果是12。如果你仔细观察的话会发现，打印的数据类型是字符串。

也就是我们通过 prompt 获取用户输入的内容始终是字符串类型，而我们期望的是数值类型。所以此时我们需要把用户输入的字符串类型的数值，转换成数值类型，再进行数学运算。这就是我们为什么要进行数据类型转换的原因。

• number()

• Number() 可以把任意值转换成数值类型，如果要转换的字符串中有一个不是数值的字符，返回 NaN

let res0 = Number('1a3'); console.log(res0); // 输出 NaN,NaN 就是 not a number 的缩写，表示某个结果不是一个数字 console.log(typeof res0); // 输出 number let res1 = Number('123'); console.log(res1); // 输出数字123 console.log(typeof res1); // 输出 number let res2 = Number(true); console.log(res2);// 输出 1 console.log(typeof res2); // 输出number let res3 = Number(null); console.log(res3); // 输出0 console.log(typeof res3); // 输出number let res4 = Number(undefined); console.log(res4); // 输出 NaN, NaN 就是 not a number 的缩写，表示某个结果不是一个数字 console.log(typeof res4); // 输出 number

• parseInt()

• parseInt这个方法用于将字符串转换成整数
• 它内部会从前往后解析数据，如果开头是数字一直往后找直到遇到非数字部分为止，返回前面的数字部分

• 如果首字符不为数字直接返回 NaN

let res1 = parseInt('123'); console.log(res1); // 输出 123 console.log(typeof res1); // 输出number let res2 = parseInt('12a'); console.log(res2);// 输出 12 console.log(typeof res2);// 输出number let res3 =parseInt('a123'); console.log(res3); // 输出 NaN console.log(typeof res3); // 输出number

• parseFloat()

• parseFloat()把字符串转换成浮点数
• parseFloat()和parseInt非常相似，不同之处在与 parseFloat 会解析第一个. 遇到第二个.或者非数字结束

• 如果解析的内容里只有整数，解析成整数

let res1 = parseInt('123.123'); console.log(res1); // 输出 123.123 console.log(typeof res1); // 输出number let res2 = parseInt('12.12a'); console.log(res2);// 输出 12.12 console.log(typeof res2);// 输出number let res3 =parseInt('a12.3'); console.log(res3); // 输出 NaN console.log(typeof res3); // 输出number

• ，-0 等运算(隐式类型转换)

let str = '500'; console.log( str); // 取正 console.log(-str); // 取负 console.log(str - 0);转换成字符串类型

• toString()

let res1 = (123).toString(); console.log(res1); // 输出字符串123 console.log(typeof res1); // 输出string let res2 = true.toString(); console.log(res2); // 输出字符串true console.log(typeof res2); // 输出string let res3 = undefined.toString(); console.log(res3); // 报错：Cannot read property 'toString' of undefined let res4 = null.toString(); console.log(res4); //报错： Cannot read property 'toString' of null

注意： undefined和null不能使用这个方式变成字符串

• String()

• String()函数存在的意义：有些值没有 toString()，这个时候可以使用 String()。比如：undefined 和 null

var res1 = String(123); console.log(res1); // 输出字符串的 123 console.log(typeof res1); // 输出 string var res2 = String(true); console.log(res2); // 输出字符串的 true console.log(typeof res2); // 输出 string var res3 = String(undefined); console.log(res3); // 输出 字符串 undefined console.log(typeof res3);// 输出 string var res4 = String(null); console.log(res4); // 输出 字符串null console.log(typeof res4); // 输出 string

• 拼接字符串方式()

• num ""，当 两边一个操作符是字符串类型，一个操作符是其它类型的时候，会先把其它类型转换成字符串(隐式类型转换)再进行字符串拼接，返回字符串

• Boolean() 这个方法用于将其它类型转换成布尔类型

var res1 = Boolean(123); console.log(res1);// 输出true console.log(typeof res1); // 输出 boolean var res2 = Boolean('abc'); console.log(res2);// 输出true console.log(typeof res2); // 输出 boolean var res3 = Boolean(undefined); console.log(res3);// 输出false console.log(typeof res3); // 输出 boolean var res4 = Boolean(null); console.log(res4);// 输出true console.log(typeof res4); // 输出 boolean

• 重点：

• 0、''(空字符串)、null、undefined、NaN、false 会转换成 false，其它值都会转换成 true。

JavaScript 中提供了很多运算符，方便我们进行各种运算，例如：

• 算数运算符
• 比较运算符

• 逻辑运算符
• 赋值运算符

运算符又称为操作符 (operator)，例如我们在数学中写的算式：5 6，在我们的程序中可以直接运行。

5 6 由操作数和操作符组成，在程序中我们称为表达式。

表达式执行完成后一定会有一个返回结果。

- * / % 自增操作符、自减操作符

自增操作符的作用是让一个数字在原来的基础上自增

var a = 10; a ; console.log(a);// 输出11 // a 的过程相当于 a = a 1

但是自增和自减操作符是可以写在数据前面和后面的

var a = 10; a; console.log(a); // 输出11

两者的区别在于运算顺序不同

a : 参与运算的时候，会先用原来的值先运算，再自增

a: 参与运算的时候，会先在原来的基础上自增，再使用新的值参与运算

var a = 10; var b = a 10; // 运算的时候，使用a的原来值10参与加法运算，10 10赋值给b之后，再实现a的自增 console.log(b); // 输出20 console.log(a); // 输出 11 var c = 10; var d = a 10; // 运算的时候，先执行a的自增，再使用a自增后的值11和10相加，最终结果是 11 10 console.log(d); // 输出21 console.log(c); // 输出11

这个自增操作符会在我们后面学习循环语法的时候使用

--操作符的作用是让一个数据自减

var a = 10; a--; console.log(a);// 输出9 // a-- 相当于 a = a - 1

自减操作也可以放在数据的前面和后面，运算规则和 是一样的

比较操作符的就是比较两个数据，操作符号有

> < >= <=

这几个符号的作用和数字中学习的比较是一样的，就是比较两个数字的大小，运算结果是 布尔 类型

console.log( 4 > 5); // 输出false console.log( 4 < 5); // 输出 true

还有两类的操作符

== != === !==

== 和 === 是用来比较两个数据是否相等的

let res1 = '123' == 123; let res2 = '123' === 123; console.log(res1); // true console.log(res2); // false

两者的区别在于

== 会进行隐式类型转换，先把字符串转换成数值类型，再进行比较。

=== 不会进行隐士类型转换。相当于不仅比较两个数据的值，还比较数据的类型

!= 和!== 类似 != 先进行隐士类型转，!== 不会进行类型转换

var res1 = '4' != 4; var res2 = '4' !== 4; console.log(res1); // 输出 false ,比较两个数据的值是否不相等, 此时两个数据的 值 都 4 ，相等，结果是 false console.log(res2); // 输出 true ，比较两个数据的类型和值是否不相等，此时两个数据的类型不相等，结果是 true

为了程序的严谨，我们建议使用 === 和 !==

逻辑运算符的主要作用是连接多个条件，我们要掌握的比较运算符有

&& || ！

&& 用在需要多个条件同时成立的时候

// 用户在登录的时候要用户名和密码同时正确才能登录 var userName = prompt('请输入用户名'); var password = prompt('请输出密码'); console.log(userName === 'admin' && password === '123456'); // 只有 && 两边的 结果都是 true ，最终结果才是 true

|| 用在只需要任意条件成立的时候

// 只要年龄小5岁或者身高小于120cm就可以免费乘坐 var age = parseInt(prompt('请输入你的年龄')); var height = parseFloat(prompt('请输入你的身高')); console.log(age < 5 || height < 120); // 只要 || 两边的结果有一个是true，最终结果就是true

! 用于颠倒是非的时候

var res = true; console.log(!res); // 这里暂时用不到，在后面做具体效果的时候都用，那个时候我们再学习具体的使用

• && 与 两个操作数同时为true，结果为true，否则都是false
• || 或 两个操作数有一个为true，结果为true，否则为false

• ! 非 取反

要掌握的赋值操作符有两个大类

= = -= *= /= %=

= 的作用就是把右边的结果赋值(存储)给左边的变量之类的容器

var a = 10 10; //把　１０＋１０的结果存储到　ａ　这个变量里面

= 的作用是简写加法

var a = 10; a = 2; // 相当于是 a = a 2; 就是一个简写的语法 console.log(a); // 输出12

-= *= /= %= 除了运算规则不同，作用是一样的，都是简写

观察代码

var res = 5 2 * 3; console.log(res); // 11

在上述代码中，执行过程是先计算 2*3 再和 5 相加的。在js中的操作符很多，我们要认识到它们之间是有计算的优先顺序的，这个优先顺序我们称为优先级

记忆一下下面的计算优先级

1. 第一优先级： () [] . 2. 第二优先级： -- ! 3. 第三优先级： * / % 4. 第四优先级： - 5. 第五优先级： > >= < <= 6. 第六优先级： == != === !== 7. 第七优先级： && 8. 第八优先级： || 9. 第九优先级： = = -= *= /= %=

上面是具体的优先级，但是平时我们不会把很多的操作符放在一起运算，所以我们大致记住

1. 括号先算
2. 其次算算术

3. 再次算比较
4. 然后算逻辑

5. 最后算赋值

使用多了，熟练了，规则就记住了