0

0

javascript中数据类型转换分为哪两种

青灯夜游

青灯夜游

发布时间:2022-02-23 18:50:56

|

3563人浏览过

|

来源于php中文网

原创

javascript的两种数据类型转换:1、显式类型转换(又称强制类型转换),主要通过使用JavaScript内置的函数来转换数据;2、隐式类型转换,是指JavaScript根据运算环境自动转换值的类型。

javascript中数据类型转换分为哪两种

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

JavaScript 是一种弱类型动态类型语言,变量没有类型限制,可以随时赋予任意值。

var x = y ? 1 : 'a';

上面代码中,变量x到底是数值还是字符串,取决于另一个变量y的值。y为true时,x是一个数值;y为false时,x是一个字符串。这意味着,x的类型没法在编译阶段就知道,必须等到运行时才能知道。

虽然变量的数据类型是不确定的,但是各种运算符对数据类型是有要求的。如果运算符发现,运算子的类型与预期不符,就会自动转换类型。比如,减法运算符预期左右两侧的运算子应该是数值,如果不是,就会自动将它们转为数值。

立即学习Java免费学习笔记(深入)”;

'4' - '3' // 1

上面代码中,虽然是两个字符串相减,但是依然会得到结果数值1,原因就在于 JavaScript 将运算子自动转为了数值。

javascript中的数据类型转换

在js中数据类型转换一般分为两种,即强制类型转换和隐式类型转换(利用js弱变量类型转换)。

  • 显式类型转换主要通过使用JavaScript内置的函数来转换;

  • 隐式类型转换是指JavaScript根据运算环境自动转换值的类型。

在js中,想要将对象转换成原始值,必然会调用toPrimitive()内部函数,那么它是如何工作的呢?

toPrimitive(input,preferedType)

input是输入的值,preferedType是期望转换的类型,他可以是String或者Number,也可以不传。

1)如果转换的类型是number,会执行以下步骤:

 1. 如果input是原始值,直接返回这个值;

 2. 否则,如果input是对象,调用input.valueOf(),如果结果是原始值,返回结果;

 3. 否则,调用input.toString()。如果结果是原始值,返回结果;

 4. 否则,抛出错误。

2) 如果转换的类型是String,2和3会交换执行,即先执行toString()方法。

3)可以省略preferedType,此时,日期会被认为是字符串,而其他的值会被当做Number。

①如果input是内置的Date类型,preferedType视为String

②否则视为Number,先调用valueOf,在调用toString

ToBoolean(argument)

类型 返回结果
Underfined false
Null false
Boolean argument
Number 仅当argument为+0,-0或者NaN时,return false;否则return true
String 仅当argument为空字符串(长度为0)时,return false;否则return true
Symbol true
Object true

注意:除了underfined,null,false,NaN,’’,0,-0,其他都返回true

ToNumber(argument)

类型 返回结果
Underfined NaN
Null +0
Boolean argument为true,return 1;为false,return +0
Number argument
String 将字符串中的内容转化成数字,如'23'=>23;如果转化失败,则返回NaN,如‘23a’=>NaN
Symbol 抛出TypeError异常
Object **先primValue= toPrimitive(argument,number),在对primValue使用ToNumber(primValue)**

ToString(argument)

类型 返回结果
Underfined "underfined"
Null "null"
Boolean argument为true,return "true";为false,return "false"
Number 用字符串来表示这个数字
String argument
Symbol 抛出TypeError异常
Object **先primValue= toPrimitive(argument,string),在对primValue使用ToString(primValue)**

1.隐式类型转换:

SERCMS游戏币交易系统
SERCMS游戏币交易系统

这套系统是之前为一个朋友开发的一套游戏币交易系统,开发语言asp+javascript 数据库是Access。现在提供免费下载给新人学习,请不要用于商业用处。大分类为:商品管理现金转虚拟币管理 虚拟币转现金管理 历史转换记录 ID搜索虚拟币管理用户管理前台用户管理 被停权的会员 后台管理员添加 后台用户员管理 数据表备份分类管理游戏名称管理 服务器名管理数据统计查询交易类型数据信息管理修改重要公告

下载

1.1-隐式转换介绍

· 在js中,当运算符在运算时,如果两边数据不统一,CPU就无法计算,这时我们编译器会自动将运算符两边的数据做一个数据类型转换,转成一样的数据类型再计算

这种无需程序员手动转换,而由编译器自动转换的方式就称为隐式转换

· 例如1 > "0"这行代码在js中并不会报错,编译器在运算符时会先把右边的"0"转成数字0`然后在比较大小
————————————————
1.2-隐式转换规则

(1). 转成string类型: +(字符串连接符)
(2).转成number类型:++/–(自增自减运算符) + - * / %(算术运算符) > =

加法规则
1.令lval=符号左边的值,rval=符号右边的值
2.令lprim=toPrimitive(lval),rprim=toPrimitive(rval)
如果lprim和rprim中有任意一个为string类型,将ToString(lprim)和ToString(rprim)的结果做字符串拼接
否则,将ToNumber(lprim)和ToNumber(rprim)的结果做算数加法

双等规则
1.xy都为Null或者underfined,return true;一方为Null或者underfined、NaN,return false
2.如果x和y为String,Number,Boolean并且类型不一致,都转为Number在进行比较
3.如果存在Object,转换为原始值在进行比较

   //特殊情况,xy都为Null或者underfined,return true
 console.log(undefined==undefined) //true
 console.log(undefined==null) //true
 console.log(null==null) //true
 //一方为Null或者underfined、NaN,return false
 console.log("0"==null) //false
 console.log("0"==undefined) //false
 console.log("0"==NaN) //false
 console.log(false==null) //false
 console.log(false==undefined) //false
 console.log(false==NaN) //false
  
 console.log("0"=="") //false
 console.log("0"==0) //true
 console.log(""==[]) //true
 console.log(false==0) //true
 console.log(false==[]) //true

(3). 转成boolean类型:!(逻辑非运算符)

  //1.字符串连接符与算术运算符隐式转换规则易混淆
  console.log(1+true)        // 1+Number(true) ==> 1+1=2
  //xy有一边为string时,会做字符串拼接
  console.log(1+'true')     //String(1)+2 ==> '1true'
  console.log('a'+ +'b')     //aNaN
  console.log(1+undefined)  //1+Number(undefined)==>1+NaN=NaN
  console.log(null+1)       //Number(null)+1==>0+1=1
 //2.会把其他数据类型转换成number之后再比较关系
  //注意:左右两边都是字符串时,是要按照字符对应的unicode编码转成数字。查看字符串unicode的方法:字符串.charCodeAt(字符串下标,默认为0)
 console.log('2'>'10')        //'2'.charCodeAt()>'10'.charCodeAt()=50>49==>true  

  //特殊情况,NaN与任何数据比较都是NaN
 console.log(NaN==NaN)        //false
 //3.复杂数据类型在隐式转换时,原始值(valueOf())不是number,会先转成String,然后再转成Number运算
  console.log(false=={})    //false   //({}).valueOf().toString()="[object Object]"
  console.log([]+[])        //""       //[].valueOf().toString()+[].valueOf().toString()=""+""=""
  console.log({}+[])         //0
  console.log(({})+[])      //"[object Object]"
  console.log(5/[1])         //5
  console.log(5/null)         //5
  console.log(5+{toString:function(){return 'def'}})         //5def
  console.log(5+{toString:function(){return 'def'},valueOf:function(){return 3}})         //5+3=8
 //4.逻辑非隐式转换与关系运算符隐式转换搞混淆(逻辑非,将其他类型转成boolean类型)
 console.log([]==0)   //true
 console.log({}==0)   //false
 console.log(![]==0)   //true
 console.log([]==![])   //true
 console.log([]==[])   //false     //坑
 console.log({}=={})   //false     //坑
 console.log({}==!{})   //false    //坑

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

通过手动进行类型转换,Javascript提供了以下转型函数:

转换为数值类型:Number(mix)、parseInt(string,radix)、parseFloat(string)
转换为字符串类型:toString(radix)、String(mix)
转换为布尔类型:Boolean(mix)

2.1 Boolean(value)、Number(value) 、String(value)

new Number(value) 、new String(value)、 new Boolean(value)传入各自对应的原始类型的值,可以实现“装箱”-----即将原始类型封装成一个对象。其实这三个函数不仅可以当作构造函数,还可以当作普通函数来使用,将任何类型的参数转化成原始类型的值。

其实这三个函数在类型转换的时候,调用的就是js内部的ToBoolean(argument)、ToNumber(argument)、ToString(argument)
2.2 parseInt(string,radix)
将字符串转换为整数类型的数值。它也有一定的规则:

(1)忽略字符串前面的空格,直至找到第一个非空字符
(2)如果第一个字符不是数字符号或者负号,返回NaN
(3)如果第一个字符是数字,则继续解析直至字符串解析完毕或者遇到一个非数字符号为止
(4)如果上步解析的结果以0开头,则将其当作八进制来解析;如果以0x开头,则将其当作十六进制来解析
(5)如果指定radix参数,则以radix为基数进行解析

   let objj={
       valueOf:function(){return '2px'},
       toString:function(){return []}
    }
    parseInt(objj)   //2
    parseInt('001')  //1   
    parseInt('22.5')  //22
    parseInt('123sws')  //123   
    parseInt('sws123')  //NaN
    //特殊的
    parseInt(function(){},16)   //15
    parseInt(1/0,19)               //18
    //浏览器代码解析器:parseInt里面有两个参数,第二个参数是十九进制(0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,g,h,i),额,1/0,好吧先运算 结果等于Infinity,
   //I好的十九进制有认识,n十九进制不存在不认识,不管后面有没有了,立即返回i(i对应的十进制中的18),所以返回18
    parseInt(1/0,16)                //NaN   //同上,16进制灭有对应i,返回NaN
    parseInt(0.0000008)         //8    //String(0.0000008),结果为8e-7
    parseInt(0.000008)        //0
    parseInt(false,16)         //250   //16进制,'f'认识, 'a'认识, 'l'哦,不认识,立即返回fa (十六进制的fa转换成十进制等于250)
    parseInt('0x10'))          //16     //只有一个参数,好的,采用默认的十进制, '0x',额,这个我认识,是十六进制的写法, 十六进制的10转换成十进制等于16
    parseInt('10',2)              //2     //返回二进制的10 转换成十进制等于2

2.3 parseFloat(string)

将字符串转换为浮点数类型的数值.规则:

它的规则与parseInt基本相同,但也有点区别:字符串中第一个小数点符号是有效的,另外parseFloat会忽略所有前导0,如果字符串包含一个可解析为整数的数,则返回整数值而不是浮点数值。

2.4 toString(radix)

除undefined和null之外的所有类型的值都具有toString()方法,其作用是返回对象的字符串表示

【相关推荐:javascript学习教程

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

558

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

416

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

756

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

479

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

514

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

1091

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

659

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

554

2023.09.20

c++ 根号
c++ 根号

本专题整合了c++根号相关教程,阅读专题下面的文章了解更多详细内容。

25

2026.01.23

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.1万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号