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 相关文章推荐
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 Javascript
jquery多浏览器捕捉回车事件代码
Jun 22 Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
javascript + jquery实现定时修改文章标题
Mar 19 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
May 04 Javascript
使用js画图之饼图
Jan 12 Javascript
javascript从作用域链谈闭包
Jul 29 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
JS中的BOM应用
Feb 02 Javascript
JS逻辑运算符短路操作实例分析
Jul 09 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
使用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
SONY ICF-F10中波修复记
2021/03/02 无线电
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
PHP的PDO事务与自动提交
2019/01/24 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
javascript闭包传参和事件的循环绑定示例探讨
2014/04/17 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
Vue计算属性的使用
2017/08/04 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
浏览器事件循环与vue nextTicket的实现
2019/04/16 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
python使用RNN实现文本分类
2018/05/24 Python
python skimage 连通性区域检测方法
2018/06/21 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
Python自动化操作实现图例绘制
2020/07/09 Python
python和go语言的区别是什么
2020/07/20 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
linux面试题参考答案(7)
2012/10/29 面试题
外国语学院毕业生自荐信
2013/10/28 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
学校食堂食品安全承诺书
2015/04/29 职场文书
个人工作决心书
2015/09/22 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书
vue里使用create, mounted调用方法
2022/04/26 Vue.js