前端-JavaScript1-6——JavaScript之变量类型的转换
6.1 string → number
先来学习一个语句,这个语句和alert差不多,也是弹窗,弹的是输入框:
|
1 prompt("请输入你的电话","139"); |
这些小功能,就叫做程序给我们提供的API,每个API都有自己不同的语法。
|
1 prompt(“提示文本”,”默认值”); |
默认值可以省略。
可以把用户输入的值,存入变量:
|
1 var a = prompt("请输入你的电话","139"); 2 alert("哈哈,你输入的电话是" + a); |
用prompt接收的任何东西都是字符串,哪怕用户输入了一个数字,也是字符串的数字。
好了,下面附上代码
prompt的样子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript">
// 输入框
// 第一步先让输入电话号码,存入变量
// var a = prompt("请输入你的电话","139");
// //第二步显示用户输入的电话
// alert("哈哈,你输入的电话是" + a); //计算器
//第1步让用户先输入第1个数字
var a = prompt("请输入第1个数字啊");
//第2步让用户先输入第2个数字
var b = prompt("请输入第2个数字啊啊");
//第3步求和
var sum = parseFloat(a) + parseFloat(b);
//第4步弹出结果
alert(sum);
</script>
</head>
<body> </body>
</html>
有一些方法可以将内存中表示一个数字的字符串转换为对应的数字
parseInt()和parseFloat()。
parseInt就是将一个string转为一个整数,不四舍五入,直接截取整数部分。如果这个string有乱七八糟的东西,那么就截取前面数字部分。
|
1 var a = "123"; 2 var b = parseInt(a); //parseInt就把字符串123转为数字123了 3 console.log(b); 4 console.log(typeof b); |
下面的实例结果都是123,最后一个是-123:
|
1 parseInt("123") //123 2 parseInt("123.6") //123 3 parseInt("123年都会很爱你") //123 4 parseInt("123年11月") //123 5 parseInt("123px") //123 6 parseInt("-123.99999999") //-123 |
parseInt()不仅仅能够进行一个转为整数,更能进行一个进制的转换,把任何进制的数字,都换为10进制。
进制和要转换的字符串,用逗号隔开。
下面的运算结果都是15:
|
1 parseInt(15,10) 2 parseInt(17,8) 3 parseInt(1111,2) 4 parseInt("0xf",16) 5 parseInt("f",16) 6 parseInt(16,9) 7 parseInt("15e6",10) 8 parseInt("15*6",10) |
parseInt如果不能转,那么就返回NaN
|
1 parseInt("Hello", 8); 2 parseInt("546", 2); 3 parseInt("三百六十五"); |
得到NaN的方法又多了一种,上午讲的是6/0得到Infinity。0/0得到NaN。
parseInt的样子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript">
// var a = "123";
// var b = parseInt(a); //parseInt就把字符串123转为数字123了
// console.log(b);
// console.log(typeof b); // console.log(parseInt("123")); //123
// console.log(parseInt("123.6")); //123
// console.log(parseInt("123年都会很爱你")); //123
// console.log(parseInt("123年11月")); //123
// console.log(parseInt("123px")); //123
// console.log(parseInt("-123.99999999")); //-123 // 下面的结果都是15
// console.log(parseInt(15,10));
// console.log(parseInt(17,8));
// console.log(parseInt(1111,2));
// console.log(parseInt("0xf",16));
// console.log(parseInt("f",16));
// console.log(parseInt(16,9));
// console.log(parseInt("15e6",10));
// console.log(parseInt("15*6",10)); //NaN
console.log(parseInt("三百六十五"));
</script>
</head>
<body> </body>
</html>
parseFloat就是将字符串转为浮点数
尽可能的将一个字符串转为浮点数,浮点数之后如果有乱七八糟的内容,直接舍弃。
|
1 <script type="text/javascript"> 2 var a = "123.67.88"; 3 var b = parseFloat(a); 4 console.log(b); 5 </script> |
也就是说,数字类型都是number,不分整数和浮点数,但是转换的时候分。
parseFloat的样子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript">
// var a = "123.67.88";
// var b = parseFloat(a);
// console.log(b); console.log(parseFloat("123.67年")); //123.67
console.log(parseFloat("哈哈123.67年")); //NaN </script>
</head>
<body> </body>
</html>
5.2 number →
string
将一个数字,与一个空字符串进行连字符运算,那么就是自动转为字符串了。
|
1 var a = 123; 2 var b = a + 3 console.log(b); 4 console.log(typeof b); |
转型的样子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript">
var a = 123;
var b = a + "";
console.log(b);
console.log(typeof b);
</script>
</head>
<body> </body>
</html>
over,next!
前端-JavaScript1-6——JavaScript之变量类型的转换的更多相关文章
- javascript数据类型及类型的转换总结
javascript 是浏览器客户端脚本语言,要想让网页与后台程序更好的交互效果,这里我们详细了解javascript 数据类型及类型的转换 1,数据类型 number number类型 数字类型,浮 ...
- Javascript声明变量类型
声明变量类型 当您声明新变量时,可以使用关键词 "new" 来声明其类型: var carname=new String; var x= new Number; var y= ne ...
- Javascript 判断变量类型的陷阱 与 正确的处理方式
Javascript 由于各种各样的原因,在判断一个变量的数据类型方面一直存在着一些问题,其中最典型的问题恐怕就是 typeof null 会返回 object 了吧.因此在这里简单的总结一下判断数据 ...
- javascript显式类型的转换
显式类型转换目的:为了使代码变得清晰易读,而做显示类型的转换常使用的函数:Boolean(),String(),Number()或Object()如:Nunber(5) //5String(true) ...
- 对JavaScript中变量类型的重新理解
<JavaScript启示录>这本书中提出:JavaScript中,对象为“王”(JavaScript里的几乎所有东西都是对象或者用起来像对象). 飞燕草对JavaScript最深刻的理解 ...
- JavaScript判断变量类型
使用JavaScript变量时是无法判断出一个变量是0 还是“”的 这时可用typeof()来判断变量是string 还是number来区分0和“”, typeof(undefined) == 'un ...
- 在JavaScript中也玩变量类型强行转换
<script language="javascript"> var str = '100'; var num = Number(100); a ...
- javascript的变量类型:var、let、const
不同点:可变性,与作用域的关系. 可变性:const定义的变量都不可变,而var和let可以任意更改. const 只能在声明时被初始化一次,之后不允许将全新的值赋值给const变量.但可以修改con ...
- JavaScript各变量类型的判断方法
我们很容易被漂亮的代码吸引,也不知不觉的在自己的代码库中加入这些.却没有冷静的想过它们的优劣.这不,我就收集了一系列形如 "是否为……?" 的判断的boolean函数. isNul ...
随机推荐
- 6 款最棒的 Go 语言 Web 框架简介
地址: https://studygolang.com/articles/11897?fr=sidebar
- wincc项目移植和复制解决办法
wincc项目复制 wincc项目不支持直接复制,部分的后台数据库在活跃状态,直接复制wincc项目,会提示跳过活跃状态的数据库,当跳过活跃数据库时,复制的项目也是无效的.在wincc项目管理器中打不 ...
- 各大型网站架构分析收集-原网址http://blog.csdn.net/lovingprince/article/details/3379710
1. PlentyOfFish 网站架构学习http://www.dbanotes.net/arch/plentyoffish_arch.html 采取 Windows 技术路线的 Web 2.0 站 ...
- arguments.callee弃用与webuploader
使用最近使用ueditor的时候 谷歌浏览器下上传相同图片两次后第三次上传不了 而且取消了后会出现一个错误的图片.使用的ueditor是1.4.3 后来发现 这个是 webuploader插件的问题. ...
- decode encode
https://blog.csdn.net/crylearner/article/details/38521685,python常用的十进制.16进制.字符串.字节串之间的转换
- 记一次前端css样式的三角形的应用
1)面试题是这样的要求用css实现 <section> <div></div> <div></div> </section> & ...
- nginx原理及使用
Nginx的特点: 方便 简单 灵活 比较具有发展潜力的服务软件 在性能上占用的系统资源更少 能支持更多的并发连接 , 特别是静态小文件场景下, 达到更的访问效率.Nginx是什么? Nginx是一个 ...
- 对python的super方法的用法理解
参考链接:https://www.cnblogs.com/dkblog/archive/2011/02/24/1980654.html https://www.cnblogs.com/wjx1/p/5 ...
- Java语法基础学习DayTwelve(泛型)
一.泛型(Generic)在集合中的使用 1.作用 (1)解决元素存储的安全问题 (2)解决获取数据元素时,需要类型强转的问题 2.代码案例 //在集合没有使用泛型的情况下 List list = n ...
- [Data Structure] Tree - relative
Segment Tree First, try to build the segment tree. lintcode suggest code: Currently recursion recomm ...