IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> JavaScript入门第七章(数据类型转换 ) -> 正文阅读

[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 lang="en">
<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>

上一章:JavaScript入门第六章(数据类型比较)

下一章:JavaScript入门第八章(流程控制与分支结构)?

?

?

?

?

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-08-01 14:24:51  更:2021-08-01 14:25:55 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/3 17:23:44-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码