-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
小职
2021-08-10
来源 ：
阅读 505
评论 0
摘要：本文主要介绍了web前端入门到精通--JavaScript基础入门之数据类型转换 ，通过具体的内容向大家展现，希望对大家前端开发Javascript的学习有所帮助。
本文主要介绍了web前端入门到精通--JavaScript基础入门之数据类型转换 ，通过具体的内容向大家展现，希望对大家前端开发Javascript的学习有所帮助。
1.显式数据类型转换
显式转换：程序员主动调用语法去转换数据类型，语义更加明确
注意：数据类型的转变并不会改变原来变量的值，而是会产生一个新的值
例如：（1） let num = '10';
parseInt(num) ：
为什么要有数据类型转换？
有时候想要进行某种计算的时候，由于数据类型不同往往会产生一些错误的结果，为了避免这种结果，我们需要将某种数据类型转化为其他数据类型
例如：prompt()输入框得到的数据的类型是string，如果想要进行数学计算则需要转成number类型，否则会计算出错
什么是显示类型转换：程序员主动转换（可以理解为使用关键字来转换）
这种方式代码易读性更高
1.其他类型转换成number类型
/**转换成number
* 第一种方式：`parseInt()`
* * 作用：转换整数
* * 从左往右解析，遇到非数字结束（停止解析），将解析好的整数返回
* * 如果第一个字符不是数字或者符号就返回NaN
* 第二种方式：`parseFloat()`
* * 作用：转换小数
* * 与parseInt()最大的区别就是可以解析字符串的第一个小数点
* 第三种方式: `Number()`
* 作用：布尔类型转换成数字
* * 可以把任意值转换成数值，如果要转换的字符串只要有一个不是数字，返回NaN
*/
console.log ( Number ( "123" ) );//123
console.log ( Number ( "123.1.1abc" ) ); //NaN 只要有一个字符不是数字，得到就是NaN
console.log ( parseInt ( "123.1.1abc" ) ); //123 从左往右解析，遇到非数字结束
console.log ( parseFloat ( "123.1.1abc" ) );//123.1 与parseInt唯一的区别就是可以识别第一个小数点
//一般数字字符串使用parseInt和parseFloat，其他数据类型转数字使用Number()
console.log ( Number ( true ) ); //1布尔类型转换number会得到数字0(false)和1（true）
console.log ( Number ( "" ) ); //0 空字符串转number会得到0
//js基础面试题
console.log(Number(undefined)); //NaN
console.log(Number(null)); //0
2.其他类型转换成string类型
1.第一种方式：变量名.toString()
如果变量的值为undefined或者null，则会报错
2.第二种方式：String(变量名)
与第一种方式的唯一区别就是如果变量的值为undefined或者null不会报错，会得到undefined或者null
let a = null;
//1.常用： String ( )
//特点：可以识别undefined与null
console.log ( String ( null ) );
console.log ( typeof String ( a ) );
// //2. 变量名.toString ()
//特点：无法识别undefined与null，程序会报错
console.log ( a.toString () );
3.其他类型转换成boolean类型
只有一种方式： Boolean(变量名)
官网文档中有八种情况得到的false：0、-0、null、false、NaN、undefined、或者空字符串（""）、 document.all（）
其他一切均为true
console.log ( Boolean ( 0 ) ); //false
console.log ( Boolean ( -0 ) ); //false
console.log ( Boolean ( null ) ); //false
console.log ( Boolean ( false ) ); //false
console.log ( Boolean ( undefined ) ); //false
console.log ( Boolean ( '' ) ); //false
console.log ( Boolean ( NaN ) ); //false
2.隐式数据类型转换
隐式转换：运算符两边数据类型不一致，编译器自动帮我们转换一致在计算，这是js的语法特点
隐式转换
1.转成string类型：+号两边如果有一边是字符串，则会把另一边转换成字符串，然后进行拼接
2.转成number类型：以下几种运算符会将任何数据转换成number类型再运算，如果无法转换则为NaN
数学正号 ： +num
当 +/-号写在一个变量名的前面，此时表示数学的正/负数
自增自减（++ --）
算术运算符（+ - * / %）
比较运算符(> < >= <= == != \=\=\= !==)
说明：全等与不全等会先比较值（此时会隐式转换再比较），然后再比较数据类型
3.转成boolean类型：逻辑非（！）会将任何数据转为boolean类型再运算
4.+号有三种含义：数学正负号（转成number）、算术运算符（转成number）、字符串连接符（转成string)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
1. 显式转换 ： 程序员主动使用语法来转换（阅读性最高）
2. 隐式转换 ： 如果运算符两边数据类型不一致，编译器偷偷的帮我们转成一致再计算。
(1)其他数据类型转number :
数学正号 : +num
自增自减： ++ --
算术运算符： + - * / %
关系运算符 : > < >= <=
(2)其他数据类型转string : +
(3)其他数据类型转boolean : !
*/
console.log('100' - 1); // Number('100') - 1 = 100 - 1 = 99
//1.其他数据类型转number :
// 数学正号 : +num
// 自增自减： ++ --
// 算术运算符： + - * / %
console.log(+'10'); // Number('10')
console.log('海海' - 100); // Number('海海') - 100 = NaN - 100 = NaN
console.log(10 - '1'); // 10 - Number('1') = 10 - 1 = 9
//2. 其他数据类型转string : +
console.log('1' + 1); //'1' + String(1) = '1' + '1' = '11'
/*
注意点 ： 算术运算符 + 转换规则 与 连接符 + 转换规则
*/
console.log('1' + true); //1true 连接符 ‘1’ + String(true) = '1' + 'true' = '1true'
console.log(1 + true); //2 算术运算符 1 + Number(true) = 1 + 1 = 2
console.log(1 + undefined); //NaN 算术 1 + Number(undefined) = 1 + NaN = NaN
console.log(1 + null); //1 算术 1 + Number(null) = 1+ 0 = 1
console.log('1' + null); //1null 连接 '1' + String(null) = '1' + 'null' = '1null'
//其他数据类型转boolean : !
//取反 ： true变false false变true
console.log(!1); //(1)!Boolean(1) = !true = false
console.log(!!''); //(1)!!Boolean('') (2)!!false (3)!true = false
</script>
</body>
</html>
我是小职，记得找我
✅ 解锁高薪工作
✅ 免费获取基础课程·答疑解惑·职业测评
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
