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 相关文章推荐
javascript css float属性的特殊写法
Nov 13 Javascript
JavaScript toFixed() 方法
Apr 15 Javascript
javascript在IE下trim函数无法使用的解决方法
Sep 12 Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 Javascript
PHP抓取HTTPS内容和错误处理的方法
Sep 30 Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 Javascript
bootstrap基本配置_动力节点Java学院整理
Jul 14 Javascript
JavaScript实现简单贪吃蛇效果
Mar 09 Javascript
js实现抽奖的两种方法
Mar 19 Javascript
vue使用localStorage持久性存储实现评论列表
Apr 14 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
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
2009/10/26 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
Google 爬虫如何抓取 JavaScript 的内容
2017/04/07 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
2017/05/12 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
对angular 监控数据模型变化的事件方法$watch详解
2018/10/09 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
纯JS实现五子棋游戏
2020/05/28 Javascript
python list使用示例 list中找连续的数字
2014/01/27 Python
Python中使用HTMLParser解析html实例
2015/02/08 Python
python日期相关操作实例小结
2019/06/24 Python
如何通过python实现人脸识别验证
2020/01/17 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
上班打牌检讨书
2014/02/07 职场文书
就业协议书的作用
2014/04/11 职场文书
党的群众路线教育实践活动总结报告
2014/04/28 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
刑事申诉状范文
2015/05/20 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang
golang日志包logger的用法详解
2021/05/05 Golang
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android
Python循环之while无限迭代
2022/04/30 Python