全面分析toString与valueOf，并随手解决掉几道大厂必备面试题
发布时间：2025-11-05 09:41:54 来源：创站工坊 作者：数据库
基本上，全面所有JS数据类型都拥有这两个方法，分析null除外。并必备它们俩是随手位于原型链上的方法，也是解决为了解决javascript值运算与显示的问题。
valueOf 和 toString 几乎都是掉道大厂在出现操作符(+-*/==><)时被调用（隐式转换）。
toString
返回一个表示该对象的面试字符串，当对象表示为文本值或以期望的全面字符串方式被引用时，toString方法被自动调用。分析
1. 手动调用看看什么效果
嗯，并必备跟介绍的随手一样，没骗人，解决全部都转成了字符串。掉道大厂
比较特殊的面试地方就是，表示对象的全面时候，变成[object Object]，表示数组的时候，就变成数组内容以逗号连接的字符串，相当于Array.join(,)。
let a = {} let b = [1, 2, 3] let c = 123 let d = function(){ console.log(fn) } console.log(a.toString()) // [object Object] console.log(b.toString()) // 1,2,3 console.log(c.toString()) // 123 console.log(d.toString()) // function(){ console.log(fn) }2. 最精准的类型判断
这种属于更精确的服务器托管判断方式，在某种场合会比使用 typeof & instanceof 来的更高效和准确些。
toString.call(()=>{}) // [object Function] toString.call({}) // [object Object] toString.call([]) // [object Array] toString.call() // [object String] toString.call(22) // [object Number] toString.call(undefined) // [object undefined] toString.call(null) // [object null] toString.call(new Date) // [object Date] toString.call(Math) // [object Math] toString.call(window) // [object Window]3. 什么时候会自动调用呢
使用操作符的时候，如果其中一边为对象，则会先调用toSting方法，也就是隐式转换，然后再进行操作。
let c = [1, 2, 3] let d = {a:2} Object.prototype.toString = function(){ console.log(Object) } Array.prototype.toString = function(){ console.log(Array) return this.join(,) // 返回toString的默认值（下面测试） } Number.prototype.toString = function(){ console.log(Number) } String.prototype.toString = function(){ console.log(String) } console.log(2 + 1) // 3 console.log(s) // s console.log(s+2) // s2 console.log(c < 2) // false (一次 => Array) console.log(c + c) // "1,2,31,2,3" (两次 => Array) console.log(d > d) // false (两次 => Object)4. 重写toString方法
既然知道了有 toString 这个默认方法，那我们也可以来重写这个方法
class A { constructor(count) { this.count = count } toString() { return 我有这么多钱： + this.count } } let a = new A(100) console.log(a) // A {count: 100} console.log(a.toString()) // 我有这么多钱：100 console.log(a + 1) // 我有这么多钱：1001Nice.
valueOf
返回当前对象的原始值。
具体功能与toString大同小异，同样具有以上的自动调用和重写方法。
这里就没什么好说的了，主要为两者间的区别，有请继续往下看🙊🙊
let c = [1, 2, 3] let d = {a:2} console.log(c.valueOf()) // [1, 2, 3] console.log(d.valueOf()) // {a:2}两者区别
共同点：在输出对象时会自动调用。 不同点：默认返回值不同，且存在优先级关系。二者并存的情况下，在数值运算中，优先调用了valueOf，字符串运算中，优先调用了toString。
看代码方可知晓：
class A { valueOf() { return 2 } toString() { return 哈哈哈 } } let a = new A() console.log(String(a)) // 哈哈哈 => (toString) console.log(Number(a)) // 2 => (valueOf) console.log(a + 22) // 222 => (valueOf) console.log(a == 2) // true => (valueOf) console.log(a === 2) // false => (严格等于不会触发隐式转换)结果给人的感觉是，云南idc服务商如果转换为字符串时调用toString方法，如果是转换为数值时则调用valueOf方法。
但其中的 a + 22 很不和谐，字符串合拼应该是调用toString方法。为了追究真相，我们需要更严谨的实验。
暂且先把 valueOf 方法去掉 class A { toString() { return 哈哈哈 } } let a = new A() console.log(String(a)) // 哈哈哈 => (toString) console.log(Number(a)) // NaN => (toString) console.log(a + 22) // 哈哈哈22 => (toString) console.log(a == 2) // false => (toString) 去掉 toString 方法看看 class A { valueOf() { return 2 } } let a = new A() console.log(String(a)) // [object Object] => (toString) console.log(Number(a)) // 2 => (valueOf) console.log(a + 22) // 222 => (valueOf) console.log(a == 2) // true => (valueOf)发现有点不同吧？！它没有像上面 toString 那样统一规整。对于那个 [object Object]，我估计是从 Object 那里继承过来的，我们再去掉它看看。
class A { valueOf() { return 2 } } let a = new A() Object.prototype.toString = null; console.log(String(a)) // 2 => (valueOf) console.log(Number(a)) // 2 => (valueOf) console.log(a + 22) // 222 => (valueOf) console.log(a == 2) // true => (valueOf)总结：valueOf偏向于运算，toString偏向于显示。
在进行对象转换时，将优先调用toString方法，如若没有重写 toString，将调用 valueOf 方法；如果两个方法都没有重写，则按Object的toString输出。 在进行强转字符串类型时，将优先调用 toString 方法，强转为数字时优先调用 valueOf。 使用运算操作符的情况下，valueOf的优先级高于toString。[Symbol.toPrimitive]
MDN：Symbol.toPrimitive 是云服务器一个内置的 Symbol 值，它是作为对象的函数值属性存在的，当一个对象转换为对应的原始值时，会调用此函数。
是不是有点懵？？？把它当做一个函数就行了~~
作用：同valueOf()和toString()一样，但是优先级要高于这两者； 该函数被调用时，会被传递一个字符串参数hint
，表示当前运算的模式，一共有三种模式：
string：字符串类型 number：数字类型 default：默认下面来看看实现吧：
class A { constructor(count) { this.count = count } valueOf() { return 2 } toString() { return 哈哈哈 } // 我在这里 [Symbol.toPrimitive](hint) { if (hint == "number") { return 10; } if (hint == "string") { return "Hello Libai"; } return true; } } const a = new A(10) console.log(`${a}`) // Hello Libai => (hint == "string") console.log(String(a)) // Hello Libai => (hint == "string") console.log(+a) // 10 => (hint == "number") console.log(a * 20) // 200 => (hint == "number") console.log(a / 20) // 0.5 => (hint == "number") console.log(Number(a)) // 10 => (hint == "number") console.log(a + 22) // true22 => (hint == "default") console.log(a == 10) // false => (hint == "default")比较特殊的是(+)拼接符，这个属于default的模式。
划重点：此方法不兼容IE，尴尬到我不想写出来了~~
面试题分析
以下几道大厂必考的面试题，完美呈现出 toString 与 valueOf 的作用。
1. a===1&&a===2&&a===3 为 true
双等号(==)：会触发隐式类型转换，所以可以使用 valueOf 或者 toString 来实现。
每次判断都会触发valueOf方法，同时让value+1，才能使得下次判断成立。
class A { constructor(value) { this.value = value; } valueOf() { return this.value++; } } const a = new A(1); if (a == 1 && a == 2 && a == 3) { console.log("Hi Libai!"); }全等(===)：严格等于不会进行隐式转换，这里使用 Object.defineProperty 数据劫持的方法来实现
let value = 1; Object.defineProperty(window, a, { get() { return value++ } }) if (a === 1 && a === 2 && a === 3) { console.log("Hi Libai!") }上面我们就是劫持全局window上面的a，当a每一次做判断的时候都会触发get属性获取值，并且每一次获取值都会触发一次函数实行一次自增，判断三次就自增三次，所以最后会让公式成立。
注：defineProperty 可参考这篇文章学习，点我进入传送门 自：大厂面试题分享：如何让(a===1&&a===2&&a===3)的值为true?2. 实现一个无限累加函数
问题：用 JS 实现一个无限累加的函数 add，示例如下：
add(1); // 1 add(1)(2); // 3 add(1)(2)(3)； // 6 add(1)(2)(3)(4)； // 10 // 以此类推 function add(a) { function sum(b) { // 使用闭包 a = b ? a + b : a; // 累加 return sum; } sum.toString = function() { // 只在最后一次调用 return a; } return sum; // 返回一个函数 } add(1) // 1 add(1)(2) // 3 add(1)(2)(3) // 6 add(1)(2)(3)(4) // 10 add函数内部定义sum函数并返回，实现连续调用 sum函数形成了一个闭包，每次调用进行累加值，再返回当前函数sum add()每次都会返回一个函数sum，直到最后一个没被调用，默认会触发toString方法，所以我们这里重写toString方法，并返回累计的最终值a这样说才能理解:
add(10): 执行函数add(10)，返回了sum函数，注意这一次没有调用sum，默认执行sum.toString方法。所以输出10；
add(10)(20): 执行函数add(10)，返回sum(此时a为10)，再执行sum(20)，此时a为30，返回sum，最后调用sum.toString()输出30。add(10)(20)...(n)依次类推。
3. 柯里化实现多参累加
这里是上面累加的升级版，实现多参数传递累加。
add(1)(3,4)(3,5) // 16 add(2)(2)(3,5) // 12 function add(){ // 1 把所有参数转换成数组 let args = Array.prototype.slice.call(arguments) // 2 再次调用add函数，传递合并当前与之前的参数 let fn = function() { let arg_fn = Array.prototype.slice.call(arguments) return add.apply(null, args.concat(arg_fn)) } // 3 最后默认调用，返回合并的值 fn.toString = function() { return args.reduce(function(a, b) { return a + b }) } return fn } // ES6写法 function add () { let args = [...arguments]; let fn = function(){ return add.apply(null, args.concat([...arguments])) } fn.toString = () => args.reduce((a, b) => a + b) return fn; }- 揭秘卖假耳机的黑幕（假耳机泛滥，市场乱象丛生，消费者陷入困境）
- 数据中心800G收发器市场展望
- HAS 2023: 以数字新引擎带动能源领域深刻变革
- 数据中心基础设施的可持续性备受关注
- 当你想重装Ubuntu或者仅仅是想安装它的一个新版本的时候，假如有个便捷的方法来重新安装之前的应用并且重置其设置会很方便的。此时 Aptik 粉墨登场，它可以帮助你轻松实现。Aptik（自动包备份和恢复）是一个可以用在Ubuntu，Linux Mint 和其他基于Debian以及Ubuntu的Linux发行版上的应用，它允许你将已经安装过的包括软件库、下载包、安装的应用和主题、用户设置在内的PPAs(个人软件包存档)备份到外部的U盘、网络存储或者类似于Dropbox的云服务上。注意：当我们在此文章中说到输入某些东西的时候，假如被输入的内容被引号包裹，请不要将引号一起输入进去，除非我们有特殊说明。想要安装Aptik，需要先添加其PPA。使用Ctrl + Alt + T快捷键打开一个新的终端窗口。输入以下文字，并按回车执行。复制代码代码如下:sudo apt-get update更新完毕后，你就完成了安装Aptik的准备工作。接下来输入以下命令并按回车：复制代码代码如下:sudo apt-get install aptik注意：你可能会看到一些有关于获取不到包更新的错误提示。不过别担心，假如这些提示看起来跟下边图片中类似的话，你的Aptik的安装就没有任何问题。安装过程会被显示出来。其中一个被显示出来的消息会提到此次安装会使用掉多少磁盘空间，然后提示你是否要继续，按下“y”再按回车，继续安装。当安装完成后，输入“Exit”并按回车或者按下左上角的“X”按钮，关闭终端窗口。在正式运行Aptik前，你需要设置好备份目录到一个U盘、网络驱动器或者类似于Dropbox和Google Drive的云帐号上。这儿的例子中，我们使用的是Dropbox。一旦设置好备份目录，点击启动栏上方的“Search”按钮。在搜索框中键入 “aptik”。结果会随着你的输入显示出来。当Aptik图标显示出来的时候，点击它打开应用。此时一个对话框会显示出来要求你输入密码。输入你的密码并按“OK”按钮。Aptik的主窗口显示出来了。从“Backup Directory”下拉列表中选择“Other…”。这个操作允许你选择你已经建立好的备份目录。注意：在下拉列表的右侧的 “Open” 按钮会在一个文件管理窗口中打开选择目录功能。在 “Backup Directory” 对话窗口中，定位到你的备份目录，然后按“Open”。注意：假如此时你尚未建立备份目录或者想在备份目录中新建个子目录，你可以点“Create Folder”来新建目录。点击“Software Sources (PPAs).”右侧的 “Backup”来备份已安装的PPAs。然后“Backup Software Sources”对话窗口显示出来。已安装的包和对应的源（PPA）同时也显示出来了。选择你需要备份的源（PPAs），或者点“Select All”按钮选择所有源。点击 “Backup” 开始备份。备份完成后，一个提示你备份完成的对话窗口会蹦出来。点击 “OK” 关掉。一个名为“ppa.list”的文件出现在了备份目录中。
- 云计算采用和人工智能如何推动数据中心发展？
- 苹果 M3 Ultra 芯片规格曝光：最高 32 核 CPU、80 核 GPU
- 数字化视角下的数据中心
- 探索酷家乐预约设计的便捷与创新（利用科技力量，开启智能家居设计新时代）
- 专家视点：减少数据中心的碳足迹
- Lumia735（体验高性能、优质摄影及无缝连接的Lumia735）
- Dell APEX产品组合拓展，助力客户加强多云战略并简化IT运营
- 使用数字孪生来管理可持续的数据中心
- 新型解码芯片创数据传输能效纪录，功耗仅有同类产品 1~10%
- HD380耳机的音乐体验（用HD380耳机，感受音乐的真谛）
- 数据中心现代化：升级旧数据中心以满足当前和未来的业务需求
- 美国数据中心市场接近满负荷运行
- 亚马逊推出新 AI 量子芯片 Trainium2 及 Graviton4 处理器，以应对微软竞争
- 使用U盘安装Windows10系统教程（以U盘为工具，轻松安装Windows10系统）
- 谷歌、微软和AWS争夺超大规模数据中心市场
随便看看
IT技术网源码下载香港云服务器源码库IT资讯网益华科技企商汇亿华云服务器租用运维纵横亿华灵动思维库亿华智慧云码上建站益强编程舍极客编程亿华科技科技前瞻智能时代编程之道多维IT资讯益强智未来益强编程堂亿华云益强科技益强资讯优选益强数据堂全栈开发益强智囊团极客码头亿华互联云站无忧益华科技云智核汇智坊技术快报创站工坊益华IT技术论坛益强IT技术网益强前沿资讯益华科技亿华智造
- Copyright © 2025 Powered by 全面分析toString与valueOf，并随手解决掉几道大厂必备面试题,创站工坊 滇ICP备2023006006号-44sitemap