百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

第9节 Javascript数据类型转换-零点程序员-王唯

wxin55 2024-11-21 22:15 7 浏览 0 评论

JavaScript中的数据类型非常灵活;将一种类型转为另外一种数据类型,如:将string类型的1转换为数字类型的1;

为什么要进行类型转换:因为数据之间的运算需要是同类型的运算,如果不同类型进行运算,需要将其转换为同一种类型后再进行运算。

类型转换分为两种:强制类型转换和自动类型转换;

1)自动转换:

在运行过程中根据运算的语意环境,会自动进行类型转换;

var a="2",b="1";
console.log(a-b);
b = true;
console.log(a-b);

注:最经典的是用在if语句中的条件中:

var car = new Object();
if(car){
    console.log("汽车");
}

2)强制(显式)类型转换:

尽管JavaScript可以自动进行类型转换,但有时仍需要显示转换,或者有时为了使代码变得更加清晰易读。

使用String()、Number()、Boolean()等函数强制转换;


a)转换为数值:

有3个函数可以把非数值转换为数值:Number()、parseInt()、parseFloat();Number()可以用于任何类型,而另外两个则专门用于把字符串转换成数值;这三个函数对于同样的输入会有不同的返回结果;

Number()函数:转换规则如下:

如果是Boolean值,true和false分别被转换为1和0;

如果是数字值,会直接返回该数值;

如果是undefined,返回NaN;

如果是null,返回0;

如果是字符串,则遵循以下规则:如果字符串中只包含数字(包括前面的正号或负号),则将其转换为十进制数,如“123”会变成123,而“011“会变成11(注:前导零忽略了);如果字符串中包含有效的浮点格式,如”1.1“,会被转换为浮点数值(同样,也忽略前导零);如果字符串包含有效的十六进制格式 ,如”0xf“,则被转换为相同大小的十进制数;会忽略字符串前面的空格;如果字符串是空的(不包含任何字符),则转换为0;如果字符串中包含除上述格式之外的字符,则被转换为NaN;

如果是对象,则调用对象的valueOf()方法,然后依照前面的规则转换返回的值;

一元操作符(+、-)的操作与Number()函数相同,会将操作数转换为数字;

var x = "w";
console.log(typeof +x);  // 等价于 x - 0

parseInt()和parseFloat()函数:

由于Number()函数在转换字符串时比较复杂而且不够合理,并且只能基于十进制数进行转换,且不能出现非法的尾随字符,因此在处理整数的时候更常用的是parseInt()和parseFloat()函数;

二者是全局函数,不从属于任何对象的方法;

其在转换时,更多的是看其是否符合数值模式;它会忽略字符串前面的空格,直到找到第一个非空字符;如果第一个字符不是数字字符或者负号,其会返回NaN,即parseInt()转换空字符串时会返回NaN(Number不会);如果第一个字符是数字,parseInt()会继续解析第二个字符,直到解析完后续所有字符或遇到到一个非数字字符;如:

console.log(parseInt("123red"));  // 123
console.log(parseInt("    8a"));  // 8
console.log(parseInt(22.5));  // 22
console.log(parseInt("wang"));  // NaN
console.log(parseInt(""));  // NaN

parseInt()可以识别出十六进制数,识别不了八进制,在解析八进制时,去除零转换为十进制;

console.log(parseInt("0xAF"));  // 10*16 + 15 = 175
console.log(parseInt("  0xAFwangwei"));  // 175
console.log(parseInt("070"));  // 70

parseInt()在识别八进制时,第3版可以识别,但第5版识别不了,为了解决这个问题,可以为parseInt()指定第二个参数:转换基数,如:

console.log(parseInt("0xAF",16));  // 175
console.log(parseInt("070",8));  // 56

在指定了进制后,字符串可以不带前面的“0x“或“0”,如:

console.log(parseInt("AF",16));  // 175
console.log(parseInt("70",8));  // 56

注:当然除了八进制,十六进制,还可以指定其他进制;如:

console.log(parseInt("11",2));  // 1*2 + 1 = 3
console.log(parseInt("ff",16));  // 15 * 16 + 15 = 255
console.log(parseInt("zz",36));  // 35 * 36 + 35 = 1295
console.log(parseInt("077",8));  // 7 * 8 + 7 = 63
console.log(parseInt("077",10));  // 7 * 10 + 7 = 77

与parseInt()类似,parseFloat()也是如此,但如果字符串里有两个小数点,第二个小数点就是无效的了。

console.log(parseFloat("22.23.5"));  // 22.23

parseFloat()只能解析十进制数,会忽略字符串的前导零,即十六进制数会被始终转换成0;

如果字符串包含的是一个可解析为整数的值,或者小数点后是零,parseFloat()会返回整数;

console.log(parseFloat("123abc"));  // 123
console.log(parseFloat("123.56abc"));  // 123.56
console.log(parseFloat("0xA"));  // 0
console.log(parseFloat("22.5"));  // 22.5
console.log(parseFloat("0909.5"));  // 909.5
console.log(parseFloat("3.125e6"));   // 3125000

b) 转换为字符串:

要把一个值转换为一个字符串有两种方式;第一种是使用几乎每个值都有的toString()方法;该方法会返回相应值的字符串;

var age = 18;
var ageString = age.toString();
var found = true;
console.log(found);  // "true" ,实际上调用了:found.toString()或found.valueof();

注:数值、布尔值、对象和字符串值都有toString()方法,但null和undefined值没有这个方法;

可以为toString()指定一个可选的基数(radix)的参数;默认情况下,toString()方法以十进制格式返回数值的字符串表示;通过设置基数,可以输出其他进制表示的字符串;如:

var age = 18;
console.log(age.toString(2));  // 10010
console.log(age.toString(8));  // 22
console.log(age.toString(16));  // 12

第二种方法:使用String(),这个函数可以将任何类型的值转换为字符串,包括null或undefined;

转换规则:如果值有toString()方法,则调用该方法(没有参数);如果值是null,则返回null;如果是undefined,则返回undefined;

console.log(String(null));  // null
console.log(String(undefined));  // undefined

如果要把某个值转换为字符串,可以使用加号操作符把它与一个空字符串拼接。

var str = 10 + "";
console.log(typeof str);  // string

c)转换为Boolean:

可以使用转型函数Boolean(),如:var message = "zero"; alert(Boolean(message));

使用Boolean(),会返回一个Boolean一个值,但返回的值是true还是false,取决于要转换值的数据类型及其实际值;

这些转换规则一般用在控制语句(如if语句)自动执行相应的Boolean转换,如:

var msg = "zero";
if(msg){
    console.log(msg);
}

一元“!”运算符也将其操作数转换为布尔值并取反,这是在代码中进行这种类型转换的惯用用法:

var x = "w";
console.log(!!x);  // 等价于 Boolean(x)

检测类型:

typeof操作符:

ECMAScript中的数据是松散类型的,因此需要有一种方法来检测给定的变量的数据类型:typeof,其会返回以下字符串:

undefined值未定义、boolean布尔值、string字符串、number数值、object对象或null、function函数;

var msg = "zeronetwork";
console.log(typeof msg);
console.log(typeof(msg));
console.log(typeof 18);

说明:typeof是一个操作而非不是一个函数,因此可以不使用括号;

注:有时typeof会返回一个令人迷惑但技术上却正确的值,如:typeof null,会返回object,因为特殊值null被认为是一个空的对象引用;

注:从技术角度来说,函数在ECMAScript中是对象,不是一种数据类型;然而,函数也确实有一些特殊的属性,因此通过typeof操作符来区分函数和其他对象是有必要的。

instanceof操作符:

虽然typeof是个非常有用的工具,但是在检测引用类型的值时,用处不大;有时,想确认一个对象具体是什么类型的对象,就需要使用instanceof操作符了;

语法:result = variable instanceof constructor

如果变量是引用类型的实例,其会返回true,如:

var num=1;
console.log(num instanceof Number);
var person = new Object();
console.log(person instanceof Object);
var color = new Array();
alconsole.log(color instanceof Array);
var pattern = new RegExp();
console.log(pattern instanceof RegExp);

说明:根据规定,所有引用类型的值都是Object的实例;因此,在检测一个引用类型值和Object构造函数时,instanceof操作符始终会返回true;

使用instanceof操作符在检测基本类型的值,会返回false,因为基本类型不是对象。


相关推荐

ES6中 Promise的使用场景?(es6promise用法例子)

一、介绍Promise,译为承诺,是异步编程的一种解决方案,比传统的解决方案(回调函数)更加合理和更加强大在以往我们如果处理多层异步操作,我们往往会像下面那样编写我们的代码doSomething(f...

JavaScript 对 Promise 并发的处理方法

Promise对象代表一个未来的值,它有三种状态:pending待定,这是Promise的初始状态,它可能成功,也可能失败,前途未卜fulfilled已完成,这是一种成功的状态,此时可以获取...

Promise的九大方法(promise的实例方法)

1、promise.resolv静态方法Promise.resolve(value)可以认为是newPromise方法的语法糖,比如Promise.resolve(42)可以认为是以下代码的语...

360前端一面~面试题解析(360前端开发面试题)

1.组件库按需加载怎么做的,具体打包配了什么-按需加载实现:借助打包工具(如Webpack的require.context或ES模块动态导入),在使用组件时才引入对应的代码。例如在V...

前端面试-Promise 的 finally 怎么实现的?如何在工作中使用?

Promise的finally方法是一个非常有用的工具,它无论Promise是成功(fulfilled)还是失败(rejected)都会执行,且不改变Promise的最终结果。它的实现原...

最简单手写Promise,30行代码理解Promise核心原理和发布订阅模式

看了全网手写Promise的,大部分对于新手还是比较难理解的,其中几个比较难的点:状态还未改变时通过发布订阅模式去收集事件实例化的时候通过调用构造函数里传出来的方法去修改类里面的状态,这个叫Re...

前端分享-Promise可以中途取消啦(promise可以取消吗)

传统Promise就像一台需要手动组装的设备,每次使用都要重新接线。而Promise.withResolvers的出现,相当于给开发者发了一个智能遥控器,可以随时随地控制异步操作。它解决了三大...

手写 Promise(手写输入法 中文)

前言都2020年了,Promise大家肯定都在用了,但是估计很多人对其原理还是一知半解,今天就让我们一起实现一个符合PromiseA+规范的Promise。附PromiseA+规范地址...

什么是 Promise.allSettled()!新手老手都要会?

Promise.allSettled()方法返回一个在所有给定的promise都已经fulfilled或rejected后的promise,并带有一个对象数组,每个对象表示对应的pr...

前端面试-关于Promise解析与高频面试题示范

Promise是啥,直接上图:Promise就是处理异步函数的API,它可以包裹一个异步函数,在异步函数完成时抛出完成状态,让代码结束远古时无限回掉的窘境。配合async/await语法糖,可...

宇宙厂:为什么前端离不开 Promise.withResolvers() ?

大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发。1.为什么需要Promise.with...

Promise 新增了一个超实用的 API!

在JavaScript的世界里,Promise一直是处理异步操作的神器。而现在,随着ES2025的发布,Promise又迎来了一个超实用的新成员——Promise.try()!这个新方法简...

一次搞懂 Promise 异步处理(promise 异步顺序执行)

PromisePromise就像这个词的表面意识一样,表示一种承诺、许诺,会在后面给出一个结果,成功或者失败。现在已经成为了主流的异步编程的操作方式,写进了标准里面。状态Promise有且仅有...

Promise 核心机制详解(promise机制的实现原理)

一、Promise的核心状态机Promise本质上是一个状态机,其行为由内部状态严格管控。每个Promise实例在创建时处于Pending(等待)状态,此时异步操作尚未完成。当异步操作成功...

javascript——Promise(js实现promise)

1.PromiseES6开始支持,Promise对象用于一个异步操作的最终完成(包括成功和失败)及结果值的表示。简单说就是处理异步请求的。之所以叫Promise,就是我承诺,如果成功则怎么处理,失败怎...

取消回复欢迎 发表评论: