JavaScript字符串转数字的简单实现方法


Posted in Javascript onNovember 27, 2020

由于输入框或对话框返回的类型是字符串,但当我们想使用数字类型时进行一些数学的计算时我们就需要转换为数字类型,使用parseInt、parseFloat即可。

用法:↓

parseInt(想要转换的字符串) //转为 int类型
parseFloat(想要转换的字符串) //转为 float类型

parseInt

样例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			var age1 = prompt("请输入小明的年龄:"); // 12
			var age2 = prompt("请输入小刚的年龄:"); // 13
			
			//小明十年后 转int
			age1 = parseInt(age1);
			age1 += 10;
			
			//小刚十年后 不转 int
			age2 += 10;
			
			
			document.write("十年后小明的年龄:" + age1 + "</br>"); //22
			document.write("十年后小刚的年龄:" + age2); // 1310
			
		</script>
		<title></title>
	</head>
	<body>
		
		
	</body>
</html>

效果截图:

JavaScript字符串转数字的简单实现方法

很明显我们可以看出,如果不转int我们+10的时候就会得到拼接字符串的效果。

parseFloat

样例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			var num1 = prompt("请输入第一个数字(小数):"); // 11.22
			var num2 = prompt("请输入第二个数字(小数):"); // 22.33
			
			var num11=num1;
			var num22=num2;
			
			num1 = parseFloat(num1);
			num2 = parseFloat(num2);
			
			var sum = num1+num2; // 33.55
			
			var sum2 = num11 + num22; //11.2222.33
			
			document.write("相加的结果(转float):"+sum + "</br>");
			document.write("相加的结果(不转float):"+sum2);
		</script>
		<title></title>
	</head>
	<body>
	</body>
</html>

效果截图:

JavaScript字符串转数字的简单实现方法

同样我们可以看出,如果不转float我们就会得到拼接字符串的效果。

总结

到此这篇关于JavaScript字符串转数字的简单实现方法的文章就介绍到这了,更多相关JavaScript字符串转数字内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
jQuery对表单的操作代码集合
Apr 06 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
jQuery搜索同辈元素方法
Feb 10 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
Bootstrap轮播图的使用和理解4
Dec 14 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 #Vue.js
JavaScript中的Proxy对象
Nov 27 #Javascript
详解JavaScript中的链式调用
Nov 27 #Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 #Vue.js
vuex的数据渲染与修改浅析
Nov 26 #Vue.js
vue动态合并单元格并添加小计合计功能示例
Nov 26 #Vue.js
JavaScript用document.write()输出换行的示例代码
Nov 26 #Javascript
You might like
用PHP编程语言开发动态WAP页面
2006/10/09 PHP
PHP时间处理类操作示例
2018/09/05 PHP
PHP使用HTML5 FormData对象提交表单操作示例
2019/07/02 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
Javascript实现可旋转的圆圈实例代码
2015/08/04 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
ES6 Set结构的应用实例分析
2019/06/26 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
python中map()与zip()操作方法
2016/02/27 Python
Python部署web开发程序的几种方法
2017/05/05 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
python with语句的原理与用法详解
2020/03/30 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
国际贸易个人求职信范文
2014/01/04 职场文书
大学新闻系求职信
2014/06/03 职场文书
跑操口号
2014/06/12 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
先进个人推荐材料
2014/12/29 职场文书
商务代表岗位职责
2015/02/15 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
七年级上册生物的课件
2019/08/07 职场文书
netty 实现tomcat的示例代码
2022/06/05 Servers