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>
相关文章
|
14天前
|
JavaScript 前端开发
js变量的作用域、作用域链、数据类型和转换应用案例
【4月更文挑战第27天】JavaScript 中变量有全局和局部作用域,全局变量在所有地方可访问,局部变量只限其定义的代码块。作用域链允许变量在当前块未定义时向上搜索父级作用域。语言支持多种数据类型,如字符串、数字、布尔值,可通过 `typeof` 检查类型。转换数据类型用 `parseInt` 或 `parseFloat`,将字符串转为数值。
18 1
|
11天前
|
存储 JavaScript 前端开发
【JavaScript技术专栏】JavaScript基础入门:变量、数据类型与运算符
【4月更文挑战第30天】本文介绍了JavaScript的基础知识,包括变量(var、let、const)、数据类型(Number、String、Boolean、Undefined、Null及Object、Array)和运算符(算术、赋值、比较、逻辑)。通过实例展示了如何声明变量、操作数据类型以及使用运算符执行数学和逻辑运算。了解这些基础知识对初学者至关重要,是进阶学习JavaScript的关键。
|
7天前
|
JavaScript 前端开发 开发者
JavaScript基础入门之浏览器控制台调试输出
本文章是对小白学习js的初级教程,也是我对自己学习经验的一种总结,文章大多采用使用案例加讲解,带动学习的方式.因为我们的天性总是喜欢有及时反馈的事物,但是学习是一个慢长的事情,而有结果的回应,才会更好的促进自己去学习,主要是对于javascript学习中的输出,有个大体上的了解,同时通过教学能够更好的使用浏览器来方便我们去学习和运行代码,也是对自己进行笔记整理,对抓住信息关键点的一种提高.
|
12天前
|
存储 JavaScript 前端开发
JavaScript引用数据类型
JavaScript引用数据类型
|
12天前
|
JavaScript 前端开发
JavaScript 基本数据类型
JavaScript 基本数据类型
|
12天前
|
JavaScript 前端开发
【Web 前端】JS中检测数据类型的有哪些?
【4月更文挑战第22天】【Web 前端】JS中检测数据类型的有哪些?
|
12天前
|
存储 前端开发 JavaScript
【Web 前端】JS数据类型有哪些?区别?
【4月更文挑战第22天】【Web 前端】JS数据类型有哪些?区别?
|
16天前
|
前端开发 JavaScript
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
前端 富文本编辑器原理——从javascript、html、css开始入门
26 0
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
|
16天前
|
前端开发 JavaScript 索引
前端 富文本编辑器原理——从javascript、html、css开始入门(一)
前端 富文本编辑器原理——从javascript、html、css开始入门
36 0
|
21天前
|
存储 JavaScript 前端开发
JavaScript的数据类型主要分为两大类:基本数据类型和引用数据类型
【4月更文挑战第20天】JavaScript的数据类型主要分为两大类:基本数据类型和引用数据类型
21 6