全面分析toString与valueOf

最新推荐文章于 2024-06-04 16:16:27 发布
最新推荐文章于 2024-06-04 16:16:27 发布
阅读量343 收藏 1
点赞数
文章标签： js javascript
原文链接：https://juejin.im/post/6873215243804213262
版权

基本上，所有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)          // 我有这么多钱：1001

Nice.

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     => (严格等于不会触发隐式转换)

结果给人的感觉是，如果转换为字符串时调用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偏向于显示。

  1. 在进行对象转换时，将优先调用toString方法，如若没有重写 toString，将调用 valueOf 方法；如果两个方法都没有重写，则按Object的toString输出。

  2. 在进行强转字符串类型时，将优先调用 toString 方法，强转为数字时优先调用 valueOf。

  3. 使用运算操作符的情况下，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;
}
yuan2018__
关注
MapReduce程序的行业应用与市场分析
AI天才研究院
07-02 364
在大数据时代，数据量的爆炸式增长对数据处理技术提出了前所未有的挑战。传统的单机数据处理方式已经无法满足现代数据处理的需求。MapReduce作为一种分布式计算框架，能够有效地处理大规模数据集，成为解决这一问题的重要工具。Map阶段：将输入数据分割成多个小块，并将每个小块映射为键值对。Shuffle阶段：对Map阶段生成的键值对进行排序和分组。Reduce阶段：对分组后的键值对进行汇总和处理，生成最终结果。本文详细介绍了MapReduce的核心概念、算法原理、数学模型、项目实践和实际应用场景。
MyBatis-Executor源码全面分析
Javaer
08-14 312
全面分析MyBatis执行器相关源码，细节到每一个类！！！！
全面分析toString与valueOf，并随手解决掉几道大厂必备面试题
weixin_44658445的博客
09-17 544
让人恐惧的夏天也许就过去了，没人知道你在这个夏天、这个今年发生什么，但是我知道。 知道你是努力的，也有可能是缓慢的。不过面对秋天，面对即将到来的国庆小假期，还请继续努力吧，川流不息的不止生命，还有时间，加油~~ 今天，我是作者，也是读者，为自己交作业，也为技术学习的路上交作业~~ 好了，进入正题，先理解这两个方法是做什么的： 基本上，所有JS数据类型都拥有这两个方法，null除外。它们俩是位于原型链上的方法，也是为了解决javascript值运算与显示的问题。 valueOf和toString..
方法的覆写【toString()方法的重写】
LCW0102的博客
10-21 755
有的方法系统会自动给出来，但是我们不希望按照系统给的那样执行的话，可以对方法进覆写。 对于引用数据类型在打印的时候系统都会自动调用toString()方法 public String toString() { return getClass().getName() + "@" + Integer.toHexString(hashCode()); } 例如我们定义了一个数组，直接通过系统的方法来打印的话将会打印数组的地址。 public class Blog { int[]
c++ to_String()
热门推荐
u010455041的专栏
11-29 3万+
函数原型： string to_string (int val); string to_string (long val); string to_string (long long val); string to_string (unsigned val); string to_string (unsigned long val); string to_string (unsigned
C++中的to_string()函数[C++11支持]
weixin_34321977的博客
09-29 4414
C++ -> 字符串库 -> std::basic_string 定义于头文件 std::string to_string(int value); (1) (C++11起) std::string to_string(long value); (2) (C++11起) std::st...
C++ std::to_string
打过ICPC/CCPC，学习ACM算法，Linux内核，Openharmony，加油努力开心珍惜
03-10 4186
c++ to_string() 函数的主要作用是将数字转换为字符串。to_string() 函数定义在标头 ，因此在使用 to_string() 函数之前需要包含此头文件。
js常用函数_JS开发常用工具函数
weixin_39866867的博客
12-03 204
1、isStatic：检测数据是不是除了symbol外的原始数据functionisStatic(value){return(typeofvalue==='string'||typeofvalue==='number'||typeofvalue==='boolean'||typeofva...
toString()、String，阿里P8大佬亲自教你
m0_61440053的博客
09-05 442
3、null值问题 （1）toString()报空指针异常 （2）String.valueOf()返回字符串“null” （3）null值强转成功 三、源码分析 1、toString() 2、String.valueOf() String.valueOf()比toString多了一个非空判断。 四、总结 1、toString()，可能会抛空指针异常 在这种使用方法中，因为java.lang.Object类里已有public方法.toString()，所以java对象都可以调用此方法。但在使.
【大数据挑战应对】：全面分析MapReduce数据倾斜问题及高效对策
[【大数据挑战应对】：全面分析MapReduce数据倾斜问题及高效对策](https://media.geeksforgeeks.org/wp-content/uploads/20200717200258/Reducer-In-MapReduce.png) # 1. MapReduce数据倾斜问题概述 MapReduce作为...
Dart语法篇之集合操作符函数与源码分析(三)
Mikyou的专栏
11-06 1439
简述: 在上一篇文章中，我们全面地分析了常用集合的使用以及集合部分源码的分析。那么这一节讲点更实用的内容，绝对可以提高你的Flutter开发效率的函数，那就是集合中常用的操作符函数。这次说的内容的比较简单就是怎么用，以及源码内部是怎么实现的。 一、Iterable<E> 在dart中几乎所有集合拥有的操作符函数(例如: map、every、where、reduce等)都是因为继承或者实...
【C++】详解 to_string 与 stoi 函数（整数转字符串-字符串转整数）
weixin_45031801的博客
03-26 9448
想必大家在做 LeetCode 算法题的时候会经常看到有使用 to_string 和 to_stoi 处理字符串，由于自己对这个类不是很了解，查了资料在这里记录一下。 所以本文通过收集资料将其进行总结，主要介绍如何使用 to_string 和 to_stoi 处理在算法练习或竞赛中遇到的输入输出问题
C++--to_string使用方法
最新发布
m0_75266675的博客
06-04 606
C++--to_string使用方法
c++ tostring函数_送你一波JS 开发常用工具函数
weixin_30282917的博客
01-22 294
点击上方“IT平头哥联盟”，选择“置顶或者星标”一起进步～作者：hfhanhttps://segmentfault.com/a/11900000196013331、isStatic：检测数据是不是除了symbol外的原始数据function isStatic(value) { return( typeof value === 'string' || ty...
C++中 to_string函数与find函数的用法与实例
qq_73554831的博客
10-25 4865
'to_string'是C++标准库中的一个函数，用于将数字转换为字符串。它通常用于将整数或浮点数转换为其字符串表示形式，以便进行字符串操作或输出。转换后的字符串可以用于输出、存储或进行其他字符串操作。以下是'to_string'函数的基本用法。头文件，以便正确使用。
C++中to_string函数的用法
Aaron_Yang
07-13 1万+
to_string 函数：将数字常量转换为字符串，返回值为转换完毕的字符串 头文件：#include < string >（必须加） string s = to_string(i); //将整数i转换为字符串表示形式 string to_string (int val); string to_string (long val); string to_string (long long val); string to_string (unsigned val); string to_string
C++中 to_string()的用法
weixin_45790559的博客
02-15 2409
功能：将数值转化为字符串并返回对应的字符串
C++数字转string【不支持C++11的情况下，使用to_string】
ehco1971的博客
05-20 2444
目前只有C++11标准下才支持to_string 因此在低版本的编译器环境下 可以通过模板函数自己构建一个to_string 一、建立一个头文件stdtostring.h内容如下 #ifndef STDTOSTRING_H #define STDTOSTRING_H #include <string> #include <sstream> #include <i...
C++ to_string()函数
wesigj的博客
05-10 6425
系列文章目录 文章目录系列文章目录前言一、C++ to_string()函数详解二、example总结 前言 http://www.cplusplus.com/reference/string/to_string/ 一、C++ to_string()函数详解 std::to_string string to_string (int val); string to_string (long val); string to_string (long long val); string to_st
JavaScript隐式调用深度解析：toString与valueOf魔术
- `Number`方法会优先调用`valueOf()`，再调用`toString()`（反之，`String`方法会先`toString()`再`valueOf()`）。 - 这意味着在处理非数值对象时，会确保它们被正确地转换为数值或字符串形式。 隐式调用不仅...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值