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 相关文章推荐
prototype 学习笔记整理
Jul 17 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
javascript的内存管理详解
Aug 07 Javascript
动态显示可输入的字数提示还可以输入的字数
Apr 01 Javascript
js实现特定位取反原理及示例
Jun 30 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 Javascript
使用Promise解决多层异步调用的简单学习心得
May 17 Javascript
微信小程序左右滑动切换页面详解及实例代码
Feb 28 Javascript
Mac中安装nvm的教程分享
Dec 11 Javascript
在vue中使用G2图表的示例代码
Mar 19 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 Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
一个选择最快的服务器转向代码
2009/04/27 Javascript
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
2012/02/03 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
IE中getElementsByName()对有些元素无效的解决方案
2014/09/28 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
JavaScript移除数组内重复元素的方法
2015/03/18 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
JQuery 动态生成Table表格实例代码
2016/12/02 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
mock.js模拟数据实现前后端分离
2019/07/24 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
django表单的Widgets使用详解
2019/07/22 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
10个python爬虫入门基础代码实例 + 1个简单的python爬虫完整实例
2020/12/16 Python
HTML5中FileReader接口使用方法实例详解
2017/08/26 HTML / CSS
Vision Directa智利眼镜网:框架眼镜、隐形眼镜和名牌太阳眼镜
2016/11/23 全球购物
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
电台编导求职信
2014/05/06 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
新闻报道策划方案
2014/06/11 职场文书
医学生求职自荐书
2014/06/12 职场文书
新员工入职感言范文!
2019/07/04 职场文书
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL