深入理解 JavaScript 基本包装类型：String、Number、Boolean 的隐式转换机制

文档教程前端【免费下载链接】Web千古前端图文教程超详细的前端入门到进阶知识库。从零开始学前端做一名精致优雅的前端工程师。项目地址https://gitcode.com/gh_mirrors/we/Web点击查看免费下载导读基本包装类型是 JavaScript 中连接基本数据类型与引用数据类型的桥梁字符串、数字、布尔值本身无法绑定属性和方法却可以调用length、indexOf()等看似属于对象的能力这背后正是 JS 引擎临时创建包装对象的隐式类型转换机制。本文以《千古前端图文教程》的 基本包装类型 为核心结合教程体系中 数据类型分类、String 字符串方法、Number 与 Math 内置对象 等章节系统讲解包装类的创建方式、底层执行顺序、使用陷阱与实战建议读完即可彻底理解abc.length为什么成立、new Boolean(false)为什么会被判为真。一、先厘清两类数据类型为什么基本类型不能装属性和方法在进入包装类型之前必须先建立两类数据类型的认知这是理解包装机制的前提。本教程在 变量的数据类型基本数据类型和引用数据类型 一章中有详细讲解这里提炼其核心结论基本数据类型值类型String 字符串、Boolean 布尔值、Number 数值、Undefined 未定义、Null 空值、BigInt 大型数值、Symbol。这类数据直接保存在栈内存中值与值之间独立存在修改一个变量不会影响其他变量。引用数据类型引用类型Object 对象。内置对象 Function、Array、Date、RegExp、Error 等都属于 Object 类型。对象保存在堆内存中变量保存的是对象的内存地址引用。两类数据最大的区别在于基本数据类型在赋值时传的是值引用数据类型在赋值时传的是地址。这一点直接决定了属性和方法的绑定能力。1、基本数据类型无法绑定属性和方法属性和方法只能添加给对象不能添加给基本数据类型。用字符串举例var str qianguyihao; str.aaa 12; console.log(typeof str); // 打印结果为string console.log(str.aaa); // 打印结果为undefined上方代码中当我们尝试打印str.aaa的时候会发现打印结果为undefined。也就是说不能给string基本类型绑定属性和方法。但矛盾随之而来我们可以正常打印str.length、str.indexOf(m)等。为什么因为这两个操作的底层做了数据类型转换——临时将string字符串转换为String对象然后再调用内置方法。这就是下一节要讲的包装类。2、引用数据类型可以绑定属性和方法引用数据类型String注意是包装对象是可以绑定属性和方法的var strObj new String(smyhvae); strObj.aaa 123; console.log(strObj); console.log(typeof strObj); // 打印结果Object console.log(strObj.aaa); // 打印结果123注意typeof strObj的结果是Object——它确实是一个对象因此可以自由挂载自定义属性。内置对象 Number 也有一些自带的方法和属性比如Number.MAX_VALUE最大正数值约1.7976931348623157e308Number.MIN_VALUE浮点精度范围内能够表示的最小正数约5e-324关于这两个值的详细边界说明见本教程的 基本数据类型Number 一章。内置对象 Boolean 也有一些自带的方法但实际开发中使用得不多。二、认识三个基本包装类String()、Number()、Boolean()JS 的数据类型包括基本数据类型String、Number、BigInt、Boolean、Null、Undefined、Symbol和引用数据类型Object。在此基础上JS 为我们提供了三个基本包装类包装类作用String()将基本数据类型的字符串转换为 String 对象Number()将基本数据类型的数字转换为 Number 对象Boolean()将基本数据类型的布尔值转换为 Boolean 对象通过这三个包装类我们可以将基本数据类型的数据转换为对象。代码举例let str1 qianguyihao; let str2 new String(qianguyihao); let num new Number(3); let bool new Boolean(true); console.log(typeof str1); // 打印结果string console.log(typeof str2); // 注意打印结果object上方代码中str1是基本数据类型typeof结果为string而str2经new String()包装后typeof结果为object。使用包装对象的两个经典陷阱需要注意的是在实际应用中我们一般不会使用基本数据类型的对象形式。如果使用基本数据类型的对象在做一些比较时可能会带来不可预期的结果。陷阱一两个包装对象用比较不相等var boo1 new Boolean(true); var boo2 new Boolean(true); console.log(boo1 boo2); // 打印结果竟然是false原因在于boo1和boo2是堆内存中两个独立的对象各自持有不同的引用地址比较引用地址自然不相等。这一点与本教程 变量的数据类型 中引用数据类型赋值传地址的结论一脉相承。陷阱二包装成 false 的对象在 if 判断中竟然为真var boo3 new Boolean(false); if (boo3) { console.log(qianguyihao); // 这行代码竟然执行了 }原因new Boolean(false)创建的是一个对象对象本身就是真值truthy布尔值false只是对象内部包装的值因此if (boo3)恒为真。这也是为什么社区普遍建议使用Boolean(false)这种对象形式毫无必要直接用基本类型false即可。三、基本包装类型的作用隐式类型转换的完整执行链路基本包装类型的作用当我们对一些基本数据类型的值去调用属性和方法时JS 引擎会临时使用包装类将基本数据类型转换为引用数据类型即隐式类型转换这样一来基本数据类型就有了属性和方法然后再调用对象的属性和方法调用完以后再将其转换为基本数据类型。举例var str qianguyihao; console.log(str.length); // 打印结果11上面这行代码看似简单但底层经过了三个步骤// 步骤1把简单数据类型 string 转换为 引用数据类型 String保存到临时变量中 var temp new String(qianguyihao); // 步骤2把临时变量的值 赋值给 str str temp; // 步骤3销毁临时变量 temp null;整个过程可以概括为三条核心规则临时创建访问属性/方法的瞬间引擎用对应的包装类构造一个临时对象执行操作在临时对象上完成属性读取或方法调用立即销毁操作结束后临时对象被丢弃变量仍然是基本数据类型。正因如此临时绑定上去的属性在下一次访问时就会消失——这解释了第一节中str.aaa打印为undefined的现象赋值时临时对象被创建又被销毁属性从未真正保存下来。包装机制在 String 方法调用中的体现本教程 内置对象 String字符串的常见方法 一章介绍的所有字符串方法本质上都依赖这一包装机制。例如const str abcdea; console.log(str.indexOf(c)); // 查找字符 c 第一次出现的索引 console.log(str.lastIndexOf(a)); // 从后向前查找字符 a 第一次出现的索引 console.log(str.includes(yi)); // 判断是否包含指定内容 console.log(str.startsWith(a)); // 判断是否以指定内容开头每当调用这些方法时引擎都会临时把字符串abcdea包装成String对象调用完方法后立即释放。这也是为什么教程反复强调字符串的所有方法都不会改变原字符串字符串的不可变性操作完成后会返回一个新的值。再比如数字的包装本教程 内置对象Number和Math 中提到的toFixed()方法同样依赖 Number 包装对象的能力let num 3.456; let num2 num.toFixed(2); console.log(num); // 打印结果3.456 console.log(num2); // 打印结果3.46 console.log(typeof num); // number console.log(typeof num2); // string注意toFixed 的返回结果是字符串数字常量不能直接调用toFixed()方法比如1.toFixed(2)在 JS 中会引发语法错误——因为点号.被解释为数字字面量的一部分而不是方法调用的分隔符。推荐的做法是先把数字放到变量中存起来然后通过变量调用这也间接说明包装机制作用于值本身与调用时的书写形式密切相关。四、在底层字符串以字符数组的形式保存理解了包装机制后再来看一个底层细节在底层字符串是以字符数组的形式保存的。代码举例var str smyhvae; console.log(str.length); // 获取字符串的长度 console.log(str[2]); // 获取字符串中的第3个字符下标为2的字符上方代码中smyhvae这个字符串在底层是以[s, m, y, h, v, a, e]的形式保存的。因此我们既可以获取字符串的长度也可以像操作数组一样通过索引index获取指定位置的单个字符。var str new String(smyhvae); for (var i 0; i str.length; i) { console.log(str.charAt(i)); // 逐个打印字符串中的字符 }这里有两个等价的写法需要区分str.charAt(index)返回字符串指定位置的字符str[index]H5 标准新增的特性效果与charAt(index)一致。二者的共同点是字符串中第一个字符的下标是 0区别在于如果参数index不在[0, string.length)之间charAt()将返回一个空字符串。关于字符与索引还有一个实用的进阶场景——通过charCodeAt(index)获取指定位置字符的 Unicode 编码可以用来判断用户按下了哪个按键也可以用来计算字符串的占位长度一个英文占一个字符位一个中文占两个字符位。具体实现见 内置对象 String字符串的常见方法 一章的完整示例。需要说明的是字符串的length属性在判断长度时有一套既定规则详见 基本数据类型String 和 Boolean一个中文算一个字符一个英文算一个字符一个标点符号包括中文标点、英文标点算一个字符一个空格算一个字符。五、与字符串不可变性的关系理解基本包装类型还需要与字符串的不可变性放在一起看。本教程指出字符串里面的值不可被改变。虽然看上去可以改变内容但其实是地址变了内存中新开辟了一个内存空间var str hello; str qianguyihao;当重新给变量str赋值时常量hello不会被修改依然保存在内存中str会改为指向qianguyihao这一新的内存空间。这与包装机制相互印证包装机制保证了临时对象创建后立即销毁不会在底层修改原字符串不可变性保证了所有字符串方法操作后都返回新值原字符串保持不变。因此字符串的所有方法都不会改变原字符串这一结论既是包装机制的结果也是不可变性的体现。两者共同构成了 JS 字符串处理模型的两大基石。六、实战总结与避坑清单围绕本教程的核心内容将结论整理为一份可直接用于面试与开发的清单1. 记住核心机制一句话版基本数据类型本身不能绑定属性和方法之所以能调用length、indexOf()、toFixed()等是因为 JS 引擎在调用瞬间临时创建包装对象隐式类型转换调用后立即销毁。2. 三个包装类必须分清String()字符串 → String 对象Number()数字 → Number 对象Boolean()布尔值 → Boolean 对象3. 三个执行步骤必须会画创建临时对象 → 调用属性/方法 → 销毁临时对象temp null。4. 两个陷阱必须会解释new Boolean(true) new Boolean(true)为false比较的是两个不同堆地址if (new Boolean(false))为真对象本身是真值包装的false不影响判定。5. 两个实战建议实际开发中始终使用基本数据类型字面量abc、3、true不要使用new String()、new Number()、new Boolean()创建包装对象需要判断真假、比较数值时用基本类型直接比较避免包装对象带来的不可预期结果。结语基本包装类型是 JavaScript 中小而关键的机制它解释了基本数据类型为什么能调用对象方法也解释了为什么强行给基本类型挂属性会失败。掌握本教程的 基本包装类型 一章再结合 内置对象 String、内置对象 Number 和 Math 等章节的实战方法你就能完整理解字符串、数字、布尔值在 JS 中的底层运作方式在开发与面试中做到心中有数。赞分享文档教程前端【免费下载链接】Web千古前端图文教程超详细的前端入门到进阶知识库。从零开始学前端做一名精致优雅的前端工程师。项目地址https://gitcode.com/gh_mirrors/we/Web点击查看免费下载相关推荐Modern JavaScript Tutorial深入理解 JavaScript 类型转换String / Number / BooleanModern JavaScript Tutorial深入理解 JavaScript 类型转换String / Number / Boolean JavaS文档/教程前端JavaScript 数据类型转换详解String、Number、Boolean 的显式与隐式转换全攻略JavaScript 数据类型转换详解String、Number、Boolean 的显式与隐式转换全攻略 本篇指南以「千古前端图文教程」中《数据类型转换》一节文档教程前端如何用SparkNet训练自己的模型prototxt网络配置与App开发的完整实战流程如何用SparkNet训练自己的模型prototxt网络配置与App开发的完整实战流程 想用自己的数据训练深度模型SparkNet 是基于 Apach上一篇用 tsParticles CrtPhosphor 调色板打造复古 CRT 磷光粒子背景下一篇OkHttp MockWebServer 与 JUnit 4 集成指南使用 MockWebServerRule 自动化启动与关闭测试服务器创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考