JavaScript数据类型转换详解（推荐）

JS数据类型

在 JavaScript 语言中数据类型分为2大类：基本数据类型和复杂数据类型

基本数据类型有：

  • number
  • string
  • boolean
  • null
  • undefined
  • symbol
  • bigint

复杂数据类型有：

  • 标准普通对象：object
  • 标准特殊对象：Array、RegExp、Date、Math、Error……
  • 非标准特殊对象：Number、String、Boolean……
  • 可调用/执行对象「函数」：function

类型之间的转换

类型转换可以分为两种：隐式类型转换 和 显式类型转换。

显式类型强制转换 是指当开发人员通过编写适当的代码用于在类型之间进行转换，比如：Number(value)。

隐式类型转换 是指在对不同类型的值使用运算符时，值可以在类型之间自动的转换，比如0 == null

在 JS 中只有 3 种类型的转换:

  • 转化为 Number 类型：Number() / parseFloat() / parseInt()
  • 转化为 String 类型：String() / toString()
  • 转化为 Boolean 类型: Boolean()

类型转换的逻辑无论在原始类型和对象类型上，他们都只会转换成上面 3 种类型之一。所以只需要弄清在什么场景下应该转成哪种类型就可以了

转换为boolean

显式：Boolean()方法可以用来显式将值转换成布尔型。

隐式：隐式类型转换通常在逻辑判断或者有逻辑运算符时被触发（|| && !）。

boolean 类型转换只会有 true 或者 false 两种结果。除了“0/NaN/空字符串/null/undefined”五个值是false，其余都是true

转换为string

显式：String()方法可以用来显式将值转为字符串。

String([1,2,3])    //"1,2,3"
String({})    //"[object Object]"

隐式转换通常在有 + 运算符并且有一个操作数是 string 类型时被触发。

“+”代表的字符串拼接，如果下面的情况存在时会触发转换

  • 有两边，一边是字符串，则会变成字符串拼接；
  • 有两边，一边是对象
1 + {}     //"1[object Object]"
NaN + {} //"NaN[object Object]"

转换为number

显式：Number()方法可以用来显式将值转换成数字类型。

字符串转换为数字：空字符串变为0，如果出现任何一个非有效数字字符，结果都是NaN

Number("")           //0
Number("10px")       //NaN
Number("10")         //10

布尔转换为数字

Number(true)         //1
Number(false)        //0

null和undefined转换成数字

Number(null)         //0
Number(undefined)    //NaN

Symbol无法转换为数字，会报错：Uncaught TypeError: Cannot convert a Symbol value to a number

BigInt去除“n”

Number(12312412321312312n)     //12312412321312312

对象转换为数字，会按照下面的步骤去执行

先调用对象的 Symbol.toPrimitive 这个方法，如果不存在这个方法

再调用对象的 valueOf 获取原始值，如果获取的值不是原始值

再调用对象的 toString 把其变为字符串

最后再把字符串基于Number()方法转换为数字

let obj ={
    name:'xxx'
}
console.log(obj-10) // 数学运算：先把obj隐式转换为数字，再进行运算
//运行机制
obj[Symbol.toPrimitive] //undifined
obj.valueof() // {name:xxx}
obj.toString() // [object object]
Number ("[object object]") // NaN
NaN-10 // NaN
obj+10 //"[object object]10"

隐式：number 的隐式类型转换是比较复杂的，因为它可以在下面多种情况下被触发。

  • 比较操作（>, <, <=, >=）
  • 按位操作（| & ^ ~）
  • 算数操作（- + * / %）， 注意：当 + 操作存在任意的操作数是 string 类型时，不会触发 number 类型的隐式转换
  • 一元 + 操作

操作符==两边的隐式转换规则

如果两边数据类型不同，需要先转为相同类型，然后再进行比较，以下几种情况需要注意一下：

可以根据这个图进行参考，如对象和布尔比较的话，

  • 对象 => 字符串 => 数值
  • 布尔值 => 数值。

对象==字符串

[1,2,3]=='1,2,3'              //true
[1,2,3][Symbol.toPrimitive]   //undefined
[1,2,3].valueOf()             //[1, 2, 3]
[1,2,3].toString()            //"1,2,3"

null/undefined

null==undefined      //true
null===undefined     //false  不会发生隐试类型转换

注意：null/undefined和其他任何值都不相等

对象==对象

比较的是堆内存地址，地址相同则相等

{}=={}      //false   因为比较的是地址

NaN

除了以上情况，只要两边类型不一致，剩下的都是转换为数字，然后再进行比较

需要注意的情况

{} + [] === 0               // true
[] + {} === 0               // false

[] + {}  = "[object Object]"
{} + []  = 0
/**
  * 对于编译器而言，代码块不会返回任何的值
  * 接着+[]就变成了一个强制转number的过程
  * []通过ToPrimitive变成''，最后''通过ToNumber操作转换成0
  **/

结尾练习

let result = 100 + true + 21.2 + null + undefined + “Tencent” + [] + null + 9 + false;

result的结果是？

1.首先100 + true
+连接符两边存在Number类型，true转number为1，进行加法运算，结果为：101
2.101 + 21.2
+连接符两边均为Number类型，进行加法运算，结果为：122.2
3.122.2 + null
+连接符两边存在Number类型，null转number为0，进行加法运算，结果为：122.2
4.122.2 + undefined
+连接符两边存在Number类型，undefined转number为NaN，NaN与任何数据类型计算都为NaN，结果为：NaN
5.NaN + "Tencent"
+连接符两边存在String类型，NaN转string为"NaN"，进行字符串拼接，结果为："NaNTencent"
6."NaNTencent" + []
+连接符两边存在String类型，[]转string为""，进行字符串拼接，结果为："NaNTencent"
7."NaNTencent" + null
+连接符两边存在String类型，null转string为"null"，进行字符串拼接，结果为："NaNTencentnull"
8."NaNTencentnull" + 9
+连接符存在String类型，9转string为"9"，进行字符串拼接，结果为："NaNTencentnull9"
9."NaNTencentnull9" + false
+连接符存在String类型，false转string为"false"，进行字符串拼接，结果为："NaNTencentnull9false"

总结

到此这篇关于JavaScript数据类型转换的文章就介绍到这了,更多相关js数据类型转换内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • js 变量类型转换常用函数与代码[比较全]

    1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把值转换成浮点数.只有对String类型调用这些方法,这两个函数才能正确运行:对其他类型返回的都是NaN(Not a Number). 在判断字符串是否是数字值前,parseInt()和parseFloat()都会仔细分析该字符串.parseInt()方法首先查看位置0处的 字符,判断它是否是个有效数字:如果不是,该方法将返回NaN,不再继续执行其他操作.但如果该字符是有效数字,该方法

  • JavaScript中数据类型转换总结

    在js中,数据类型转换分为显式数据类型转换和隐式数据类型转换. 1, 显式数据类型转换 a:转数字: 1)Number转换: 代码: var a = "123"; a = Number(a); 注意: a) 如果转换的内容本身就是一个数值类型的字符串,那么将来在转换的时候会返回自己. b) 如果转换的内容本身不是一个数值类型的字符串,那么在转换的时候结果是NaN. c) 如果要转换的内容是空的字符串,那以转换的结果是0. d) 如果是其它的字符,那么将来在转换的时候结果是NaN. 2)

  • Javascript将string类型转换int类型

    郁闷的事来了,先看前台HTML: 复制代码 代码如下: 购买数量: <input id="txtNum" type="text" value="1" runat="server" onchange="javascript:checkNum();" /> 件(库存<span id="getGoodsNum"> <%=GOODSNUM%></span

  • JS 类型转换常见方法小结

    一.类型转换 1.转换成字串 ECMAScript的Boolean值.数字和字串的原始值的有趣之处在于它们是伪对象,这意味着它们实际上具有属性和方法. 如: Js代码 复制代码 代码如下: var sColor = "blue"; alert(sColor.length);//outputs "4" var sColor = "blue"; alert(sColor.length);//outputs "4" 总而言之,3种主

  • 使用javascript:将其它类型值转换成布尔类型值的解决方法详解

    1.利用Boolean对象进行转换 复制代码 代码如下: var num123 = 123, str = 'abc', o = {name:'test'}, num0 = 0; num123 = Boolean(num123); //true num0 = Boolean(num0); //false str = Boolean(str); //true o = Boolean(o); //true 2. 利用两个'!'运算符,第一个'!'将值转换成布尔值并取其值的非值,第二个'!'将其布尔值还

  • js类型转换与引用类型详解(Boolean_Number_String)

    一.类型转换 1.转换成字串 ECMAScript的Boolean值.数字和字串的原始值的有趣之处在于它们是伪对象,这意味着它们实际上具有属性和方法. 如: 复制代码 代码如下: var sColor = "blue";alert(sColor.length);//outputs "4" 总而言之,3种主要的原始值Boolean值.数字和字串都有toString()方法.ECMAScript定义的所有对象都有toString()方法,无论它是伪对象,还是真的对象.

  • js 数据类型转换总结笔记

    javascript有如下数据类型的转换方法: 一,转换成数字 xxx*1.0 转换成字符串 xxx+"" 二,从一个值中提取另一种类型的值,并完成转换工作. .提取字符串中的整数:parseInt(); 例:parseInt("123zhang")的结果为123 .提取字符串中的浮点数:parseFloat(); 例:parseFloat("0.55zhang")的结果为0.55 .执行用字符串表示的一段javascript代码:eval();

  • Javascript 类型转换方法

    Javascript 类型转换方法

    Javascript中的变量同样支持自由类型转换成为适用(或者要求)的内容以便于使用. 弱类型的Javascript不会按照程序员的愿望从实际的变量类型到所需要的数据类型转换,例如一个非常常见的错误,在浏览器脚本中,从表单控件中获取用户将要输入的一个数值类型的变量与另一个数值变量的和.因为变量类型在表单控件中是字符串类型(计时字符串序列包含一个数字)这种尝试将会添加那个字符串到变量,即使这些值碰巧是一些数字,结果在第二个变量将会被转换为字符串类型,在最后只会把从表单控件中得到的变量添加到第一个字

  • Javascript 强制类型转换函数

    1. Boolean(value):把值转换成Boolean类型: 2. Nnumber(value):把值转换成数字(整型或浮点数): 3. String(value):把值转换成字符串. 我们先来看Boolean():在要转换的值为"至少有一字符的字符串"."非0的数字"或"对象",那么Boolean()将返回true,如果要转换的值为"空字符串"."数字0"."undefined"

  • JavaScript数据类型转换详解（推荐）

    JavaScript数据类型转换详解（推荐）

    JS数据类型 在 JavaScript 语言中数据类型分为2大类:基本数据类型和复杂数据类型 基本数据类型有: number string boolean null undefined symbol bigint 复杂数据类型有: 标准普通对象:object 标准特殊对象:Array.RegExp.Date.Math.Error-- 非标准特殊对象:Number.String.Boolean-- 可调用/执行对象「函数」:function 类型之间的转换 类型转换可以分为两种:隐式类型转换 和

  • JavaScript显式数据类型转换详解

    基本概念 将值从一种类型转换为另一种类型称为类型转换,类型转换总是返回基本类型值,如字符串.数字和布尔值,不会返回引用类型值. 类型转换分为"显式"和"隐式":"显式"转换发生在静态类型语言的编译阶段,而"隐式"转换则发生在动态类型语言的运行时. 显式类型转换 非字符串到字符串的类型转换 toString() 方法 数字.布尔值.字符串和对象都有 toString() 方法,但 null 和 undefined 没有. 例子:

  • JAVA中string数据类型转换详解

    在JAVA中string是final类,提供字符串不可以修改,string类型在项目中经常使用,下面给大家介绍比较常用的string数据类型转换: String数据类型转换成long.int.double.float.boolean.char等七种数据类型 复制代码 代码如下: * 数据类型转换 * @author Administrator * */ public class 数据类型转换 { public static void main(String[] args) { String c=

  • C/C++中数据类型转换详解及其作用介绍

    C/C++中数据类型转换详解及其作用介绍

    目录 概述 不同类型数据间的转换 隐式类型转换 强制类型转换 自己声明的类型转换 转换构造函数 类型转换函数 案例 应用 概述 在日常的开发中, 我们经常会用到数据类型转换, 所以我们要对数据类型转换有一定的了解. 不同类型数据间的转换 在 C++ 中, 某些标准类型的数据之间可以自动转换. 隐式类型转换 隐式类型转换: 由 C++ 编译系统自动完成的, 我们无需干预. 例如: int main() { int a = 6; a = a + 3.5; cout << a << en

  • Java数据类型转换详解

    一.基本数据类型阐述 Java语言提供了八种基本类型.六种数字类型(四个整数型,两个浮点型),一种字符类型,还有一种布尔型. [注]JAVA没有unsigned类型 (1). 整数:int,short,byte,long (2). 浮点型:float,double (3). 字符:char (4). 布尔:boolean 基本型别     大小         最小值            最大值 void boolean     -----         -----             

  • Python数据类型转换详解

    目录 1. Python的数据类型 2. Python数据类型转换 2.1 自动类型转换 2.2 强制类型转换 2.2.1 其他转字符串 2.2.2 其他转数字类型 2.2.3 其他转列表类型 2.2.4 其他转元组类型 2.2.5 其他转集合类型 2.2.6 其他转字典类型 总结 1. Python的数据类型 上一遍博文已经详细地介绍了Python的数据类型,详见链接Python的变量命名及数据类型. 在这里总结一下Python的数据类型: 字符串类型 String 数字类型 Number:

  • SQL Server中T-SQL 数据类型转换详解

    常用的转换函数是 cast 和 convert,用于把表达式得出的值的类型转换成另一个数据类型,如果转换失败,该函数抛出错误,导致整个事务回滚.在SQL Server 2012版本中,新增两个容错的转换函数:try_cast 和 try_convert,如果转换操作失败,该函数返回null,不会导致整个事务失败,事务继续执行下去. 注意:对于SQL Server显式定义的不合法转换,try_cast 和 try_convert 会失败,抛出错误信息:Explicit conversion fro

  • JavaScript处理解析JSON数据过程详解

    JSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧. JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包. JSON的规则很简单: 对象是一个无序的"'名称/值'对"集合.一个对象以"{"(左括号)开始,"}"(右括号)结束.每个"名称"后跟一个":"(冒号):"

  • javascript解析json格式的数据方法详解

    JSON (JavaScript Object Notation)是一种简单的数据格式,比xml更轻巧. 它是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包.那么如何用JavaScript来解析json呢? 首先,科普一下json.在json中,有两种结构:对象和数组. 一个对象以"{"(左括号)开始,"}"(右括号)结束.每个"名称"后跟一个":"

  • $.ajax()常用方法详解(推荐)

    AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分.接下来通过本文给大家介绍ajax一些常用方法,大家有需要可以一起学习. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持. 3.timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆

随机推荐