前端学习(27)~js学习(五): typeof和数据类型转换

变量的数据类型转换:将一种数据类型转换为另外一种数据类型。

通常有三种形式的类型转换

  • 转换为字符串类型
  • 转换为数字型
  • 转换为布尔型

typeof 运算符

typeof()表示“获取变量的数据类型”,返回的是小写,语法为:(两种写法都可以)

// 写法1
typeof 变量;

// 写法2
typeof(变量);

typeof 这个运算符的返回结果就是变量的类型。那返回结果的类型是什么呢?是字符串

返回结果:

typeof 的代码写法 返回结果
typeof 数字 number
typeof 字符串 string
typeof 布尔型 boolean
typeof 对象 object
typeof 方法 function
typeof null object
typeof undefined undefined

备注 1:为啥 typeof null的返回值也是 object 呢?因为 null 代表的是空对象。

备注 2:typeof NaN的返回值是 number,上一篇文章中讲过,NaN 是一个特殊的数字。

返回结果举例:

console.log(type []); // 空数组的打印结果:object

console.log(type {}); // 空对象的打印结果:object

代码解释:这里的空数组[]、空对象{} ,为啥他们在使用 typeof 时,返回值也是 object呢?因为这里的 返回结果object指的是引用数据类型。空数组、空对象都是引用数据类型 Object。

变量的类型转换的分类

类型转换分为两种:显示类型转换、隐式类型转换。

显示类型转换

  • toString()
  • String()
  • Number()
  • parseInt(string)
  • parseFloat(string)
  • Boolean()

隐式类型转换

  • isNaN ()
  • 自增/自减运算符:++—-
  • 正号/负号:+a-a
  • 加号:+
  • 运算符:-*/

隐式类型转换(特殊)

  • 逻辑运算符:&&|| 。非布尔值进行与或运算时,会先将其转换为布尔值,然后再运算,但运算结果是原值。具体可以看下一篇文章《运算符》。
  • 关系运算符:<> <= >=等。关系运算符,得到的运算结果都是布尔值:要么是true,要么是false。具体可以看下一篇文章《运算符》。

针对上面这两种类型转换,这篇文章来详细介绍。

其他的简单类型 --> String

方法一(隐式类型转换):字符串拼接

格式:变量+"" 或者 变量+"abc"

举例:

var a = 123; // Number 类型
console.log(a + ‘‘); // 转换成 String 类型
console.log(a + ‘haha‘); // 转换成 String 类型

上面的例子中,打印的结果,都是字符串类型的数据。实际上内部是调用的 String() 函数。也就是说,c = c + "" 等价于 c = String(c)

方法二:调用 toString()方法

语法:

变量.toString()

重要】该方法不会影响到原变量,它会将转换的结果返回。当然我们还可以直接写成a = a.toString(),这样的话,就是直接修改原变量。

注意:null 和 undefined 这两个值没有 toString()方法,所以它们不能用方法二。如果调用,会报错。

另外,Number 类型的变量,在调用 toString()时,可以在方法中传递一个整数作为参数。此时它将会把数字转换为指定的进制,如果不指定则默认转换为 10 进制。例如:

var a = 255;

//对于Number调用toString()时可以在方法中传递一个整数作为参数
//此时它将会把数字转换为指定的进制,如果不指定则默认转换为10进制
a = a.toString(2); // 转换为二进制

console.log(a); // 11111111
console.log(typeof a); // string

方法三(强制转换):使用 String()函数

语法:

String(变量)

使用 String()函数做强制类型转换时

  • 对于 Number 和 Boolean 而言,本质上就是调用 toString()方法。
  • 但是对于 null 和 undefined,则不会调用 toString()方法。它会将 null 直接转换为 "null"。将 undefined 直接转换为 "undefined"。

prompt():用户的输入

prompt()就是专门用来弹出能够让用户输入的对话框。重要的是:用户不管输入什么,都当字符串处理。

其他的数据类型 --> Number 【重要】

使用 Number() 函数

情况一:字符串 --> 数字

  • 1.如果字符串中是纯数字,则直接将其转换为数字
  • 2.只要字符串中包含了非数字的内容小数点按数字来算),则转换为 NaN
  • 3.如果字符串是一个空串或者是一个全是空格的字符串,则转换为 0

情况二:布尔 --> 数字

  • true 转成 1
  • false 转成 0

情况三:null --> 数字

  • 结果为:0

情况四:undefined --> 数字

  • 结果为:NaN

补充:怎么理解这里的 NaN 呢?可以这样理解,使用 Number() 函数之后,如果无法转换为数字,就会转换为 NaN。

使用 parseInt()函数:字符串 -> 整数

原文地址:https://www.cnblogs.com/Vincent-yuan/p/12393137.html

时间: 2024-08-03 20:10:07

前端学习(27)~js学习(五): typeof和数据类型转换的相关文章

前端学习:JS学习总结(图解)

前端学习:JS学习总结(图解) JS比HTML和CSS的知识点要多的多,下面分几段来介绍其内容... 为了能让大家更好的检索,前面的图解是整个JS的概括,后面的才是知识点... 旁边就是目录,建议用目录来观看本博客...... JS的知识体系  JS的简介 JS基本语法 JS内置对象 JS的函数 JS的事件 JS的BOM JS的DOM JS的简介 JS是什么? JS能做什么? JS的历史及组成 JS的引入方式 JS基本语法 变量 原始数据类型 引入数据类型 运算符 逻辑语句 JS内置对象 JS对

前端学习(38)~js学习(十五):原型对象

原型对象 原型的引入 function Person(name, age, gender) { this.name = name; this.age = age; this.gender = gender; //向对象中添加一个方法 this.sayName = function () { console.log("我是" + this.name); } } //创建一个Person的实例 var per = new Person("孙悟空", 18, "

前端学习(23)~js学习(一)

Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(实现业务逻辑和页面控制) 浏览器的介绍 浏览器是网页运行的平台,常用的浏览器有谷歌(Chrome).Safari.火狐(Firefox).IE.Edge.Opera等. 浏览器的组成 浏览器分成两部分: 渲染引擎 JS 引擎 1.渲染引擎:(浏览器内核) 浏览器所采用的「渲染引擎」也称之为「浏览器内核」,用来解析 HTML与CSS.渲染引擎决定了浏览

前端学习(24)~js学习(二):变量

字面量:数字和字符串 “字面量”即常量,是固定值,不可改变. 字面量有3种: 数字 字符串 布尔字面量 (1)数值的字面量非常简单,写上去就行了,不需要任何的符号. alert(886); //886是数字,所以不需要加引号. (2)字符串的字面量也很简单,但一定要加上引号.可以是单词.句子等.例如: console.log('886'); console.log('千古壹号,永不止步'); 温馨提示:100是数字,"100"是字符串. (3)布尔字面量举例: if (true) {

前端学习(25)~js学习(三):变量的数据类型

变量的数据类型 为什么需要数据类型 在计算机中,不同的数据所需占用的存储空间不同,为了充分利用存储空间,于是定义了不同的数据类型.而且,不同的数据类型,寓意也不同. JS 的变量数据类型,是在程序运行的过程中,根据等号右边的值来确定的.而且,变量的数据类型是可以变化的.比如说: var name = 'qianguyihao'; name = 123; // 强制将变量 name 修改为 数字类型 JS中一共有六种数据类型 基本数据类型(值类型):String 字符串.Number 数值.Boo

前端学习(33)~js学习(十):函数

关于函数的核心内容: 函数有哪几种定义和调用方式 this:函数内部的 this 指向.如何改变 this 的指向. 函数的严格模式 高阶函数:函数作为参数传递.函数作为返回值传递 闭包:闭包的作用 递归:递归的两个条件 深拷贝和浅拷贝的区别 函数的介绍 函数:就是将一些功能或语句进行封装,在需要的时候,通过调用的形式,执行这些语句. 函数也是一个对象 使用typeof检查一个函数对象时,会返回function 函数的作用: 将大量重复的语句抽取出来,写在函数里,以后需要这些语句的时候,可以直接

前端学习(26)~js学习(四):基本数据类型vs引用数据类型

在上一篇文章中,我们介绍过,变量有以下数据类型: 基本数据类型(值类型):String 字符串.Number 数值.Boolean 布尔值.Null 空值.Undefined 未定义. 引用数据类型(引用类型):Object 对象. 本文,我们针对这两种类型,做进一步介绍.我们先来看个例子. 基本数据类型举例: var a = 23; var b = a; a++; console.log(a); // 打印结果:24 console.log(b); // 打印结果:23 上面的代码中:a 和

前端学习(39)~js学习(十六):数组

数组简介 数组(Array)是属于内置对象,我们可以在MDN网站上查询各种方法. 数组和普通对象的功能类似,也是用来存储一些值的.不同的是: 普通对象是使用字符串作为属性名的,而数组是使用数字来作为索引来操作元素.索引:从0开始的整数就是索引. 数组的存储性能比普通对象要好.在实际开发中我们经常使用数组来存储一些数据,使用频率非常高. 数组中的元素可以是任意的数据类型,也可以是对象,也可以是函数,也可以是数组.数组的元素中,如果存放的是数组,我们就称这种数组为二维数组. 接下来,我们讲一讲数组的

Amaze UI学习笔记——JS学习历程一

1.自定义事件 (1)一些组件提供了自定义事件,命名方式为{事件名称}.{组件名称}.amui,用户可以查看组件文档了解.使用这些事件,如: $('#myAlert').on('close.alert.amui',function(){ //do something; }); (2)data-am-observe 在元素上添加data-am-abserve属性以后,动态插入改元素的Amaze UI JS插件会自动初始化,支持的插件包括Button.Dropdown.Slider.Popover.