js中toString()函数与valueOf()函数使用与区别

目录
  • 一、前言
  • 二、toString() 函数
  • 三、valueOf()函数
    • 小结:
  • 四、特殊情况
    • 1、引用类型转换为 String 类型
    • 2、引用类型转换为 Number 类型

一、前言

在等于运算符中,如果比较的内容包含对象类型数据,则会涉及隐式转换,那么就会调用toString()函数和valueOf()函数,下面我们将会了解到关于这两个函数的基本概念和使用场景。

二、toString() 函数

toString() 函数的作用是把一个逻辑值转换为字符串,并返回结果。

console.log((1).toString());//1
console.log((10).toString(2))//1010
console.log(("1").toString());//1
console.log((false).toString());//false
console.log(({p:1}).toString());//[object,object]
console.log((undefined).toString());//报错
console.log((null).toString());//报错
console.log((function(){}).toString());//function(){}
console.log([1,2,3,4].toString());//1,2,3,4
console.log((new Date()).toString())//Fri Jul 03 2020 17:20:11 GMT+0800 (中国标准时间)

在JavaScript中,Object,Array,Function,Date等类型都实现了自定义的toString()函数。

  • Object 类型数据的 toString() 函数默认的返回结果是 "[object Object]",当我们自定义新的类时,可以重写 toString() 函数,返回可读性更高的结果。
  • Array 的 toString() 函数返回值为以逗号分隔构成的数组成员字符串。数组也是对象,那么为什么数组返回的是对应的字符串而不是对象,其实数组覆盖了Object.toString方法,然后将连接数组并返回一个字符串,其中包含用逗号分隔的每个数组元素(相当于Array.join())
  • Function 的 toString() 函数返回值为函数的文本定义
  • Date 的 toString() 函数返回值为具有可读性的时间字符串

三、valueOf()函数

valueOf() 函数的作用是返回最适合引用类型的原始值,如果没有原始值,则会返回引用类型自身。

console.log((1).valueOf());//1
console.log((10).valueOf(2))//报错
console.log(("1").valueOf());//1
console.log((false).valueOf());//false
console.log(({p:1}).valueOf());//{p:1}
console.log((undefined).valueOf());//报错
console.log((null).valueOf());//报错
console.log((function(){}).valueOf());//function(){}
console.log([1,2,3,4].valueOf());//[1,2,3,4]
console.log((new Date()).valueOf());//1593767848260
  • Object 类型数据的valueOf()函数默认的返回结果是"{}",即一个空的对象字面量。
  • Array 的valueOf()函数返回的是数组本身
  • function 的valueOf()函数返回的是函数本身
  • Date 的valueOf()函数返回的是指定日期的时间戳

小结:

  • toString() 返回的是字符串,而 valueOf() 返回的是原始值,没有原始值返回对象本身
  • undefined 和 null 都没有 toString() 和 valueOf() 方法
  • Date 类型的 toString() 返回的表示时间的字符串;valueOf() 返回的是现在到1970年1月1日的毫秒数(时间戳)
  • Number 类型的 toString() 方法可以接收转换基数,返回不同进制的字符串形式的数值;而 valueOf()方 法无法接受转换基数

四、特殊情况

如果一个引用类型的值既存在 toString() 函数又存在 valueOf() 函数,那么在做隐式转换时,会调用哪个函数呢?这里我们可以概括成两种场景,分别是引用类型转换为 String 类型,以及引用类型转换为 Number 类型。

1、引用类型转换为 String 类型

一个引用类型的数据在转换为 String 类型时,一般是用于数据展示,转换时遵循以下规则:

  • 如果对象具有 toString() 函数,则会优先调用 toString() 函数。如果它返回的是一个原始值,则会直接将这个原始值转换为字符串表示,并返回该字符串。
  • 反之,则会再去调用 valueOf() 函数,如果 valueOf() 函数返回的结果是一个原始值,则会将这个结果转换为字符串表示,并返回该字符串。
  • 如果通过 toString() 函数或者 valueOf() 函数都无法获得一个原始值,则会直接抛出类型转换异常。

2、引用类型转换为 Number 类型

一个引用类型的数据在转换为 Number 类型时,一般是用于数据运算,转换时遵循以下规则:

  • 如果对象具有 valueOf() 函数,则会优先调用 valueOf() 函数,如果 valueOf() 函数返回一个原始值,则会直接将这个原始值转换为数字表示,并返回该数字。
  • 反之,则会再去调用 toString() 函数,如果 toString() 函数返回的结果是一个原始值,则会将这个结果转换为数字表示,并返回该数字。
  • 如果通过 toString() 函数或者 valueOf() 函数都无法获得一个原始值,则会直接抛出类型转换异常。

到此这篇关于 js中toString()函数与valueOf()函数使用与区别的文章就介绍到这了,更多相关 js toString()函数与valueOf()函数内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 实例解析JS布尔对象的toString()方法和valueOf()方法

    toString() 方法 把布尔值转换为字符串,并返回结果. 实例 将布尔值转换为字符串: var bool = new Boolean(1); var myvar = bool.toString(); 输出结果: true 定义和用法 toString() 方法可把一个逻辑值转换为字符串,并返回结果. 注意:当需要把Boolean对象转换成字符串的情况JavaScript会自动调用此方法. 语法 boolean.toString() 返回值 "true" 或者 "fals

  • javascript中tostring()和valueof()的用法及两者的区别

    基本上,所有JS数据类型都拥有valueOf和toString这两个方法,null除外.它们俩解决javascript值运算与显示的问题. 1.用法如下: toString()方法:返回对象的字符串表示. 对象 操作 Array 将 Array 的元素转换为字符串.结果字符串由逗号分隔,且连接起来. Boolean 如果 Boolean 值是 true,则返回 "true".否则,返回 "false". Date 返回日期的文字表示法. Error 返回一个包含相关

  • JavaScript中的object转换函数toString()与valueOf()介绍

    JavaScript中,object转换为boolean的操作非常简单:所有的object转换成boolean后均为true:即使是new Boolean(false)这样的object在转换为boolean后仍然为true. 复制代码 代码如下: var x = new Boolean(false); if(x){   console.log("x is true"); } 在将object转换为string或者number时,JavaScript会调用object的两个转换函数:t

  •  js中toString()函数与valueOf()函数使用与区别

    目录 一.前言 二.toString() 函数 三.valueOf()函数 小结: 四.特殊情况 1.引用类型转换为 String 类型 2.引用类型转换为 Number 类型 一.前言 在等于运算符中,如果比较的内容包含对象类型数据,则会涉及隐式转换,那么就会调用toString()函数和valueOf()函数,下面我们将会了解到关于这两个函数的基本概念和使用场景. 二.toString() 函数 toString() 函数的作用是把一个逻辑值转换为字符串,并返回结果. console.log

  • 浅谈js中的变量名和函数名重名

    今天骚凯问了一道变量名冲突的题目,感觉很有意思,顺便也复习一下预解析的一些知识,有不对的地方忘前辈大神指正,题目是这样的: var a=100; function a(){ console.log(a); } a(); 这个串代码执行完会报错 : a is not a function 问题来了,为什么会报这个错误呢? 这里涉及到函数和变量的预解析: 1)函数声明会置顶 2)变量声明也会置顶 3)函数声明比变量声明更置顶:(函数在变量上面) 4)变量和赋值语句一起书写,在js引擎解析时,会将其拆

  • 浅谈JS中的bind方法与函数柯里化

    绑定函数bind()最简单的用法是创建一个函数,使这个函数不论怎么调用都有同样的this值.不同于call和apply只是单纯地设置this的值后传参,它还会将所有传入bind()方法中的实参(第一个参数之后的参数)与this一起绑定. 关于这个特性看<JS权威指南>原文的例子: var sum = function(x,y) { return x + y }; var succ = sum.bind(null, 1); //让this指向null,其后的实参也会作为实参传入被绑定的函数sum

  • 详解Node.js中的Async和Await函数

    在本文中,你将学习如何使用Node.js中的async函数(async/await)来简化callback或Promise. 异步语言结构在其他语言中已经存在了,像c#的async/await.Kotlin的coroutines.go的goroutines,随着Node.js 8的发布,期待已久的async函数也在其中默认实现了. Node中的async函数是什么? 当函数声明为一个Async函数它会返回一个 AsyncFunction 对象,它们类似于 Generator 因为执可以被暂停.唯

  • js中apply和Math.max()函数的问题及区别介绍

    下面给大家介绍js中apply和Math.max()函数的问题,具体内容如下所示: var arr=[1,3,6,3,7,9,2]; console.log(Math.max.apply(null,arr)); 一直搞不懂为什么这样可以算出一个数组的最大值?一直想不明白,请js高手指教一下. 答案1 Function.apply()是JS的一个OOP特性,一般用来模拟继承和扩展this的用途,对于上面这段代码,可以这样去理解: XXX.apply是一个调用函数的方法,其参数为:apply(Fun

  • JS中超越现实的匿名函数用法实例分析

    本文实例讲述了JS中超越现实的匿名函数用法.分享给大家供大家参考,具体如下: 一般函数: function show1(name){ alert(name); //打印:zhangsan } show1("zhangsan"); 匿名函数: var show2 = function (name) { alert(name); //打印:张三 } show2("张三"); 上面2种定义函数的区别: 1.我们知道所有的function都会在window对象里 funct

  • JS中不应该使用箭头函数的四种情况详解

    目录 箭头函数的一些缺点 1.不支持参数对象 2.无法通过apply.call.bind来改变this指针 什么时候不能使用箭头功能 1.请不要在构造函数中使用箭头函数 2.请不要在点击事件中操作this 3.请不要在对象的方法中使用箭头函数. 4.请不要在原型链中使用箭头函数 箭头函数给我们的工作带来了极大的方便,但是它们有什么缺点呢?我们应该一直使用箭头函数吗?我们应该在哪些场景中停止使用箭头函数? 现在,我们开始吧. 箭头函数的一些缺点 1.不支持参数对象 在箭头函数中,我们不能像在普通函

  • js中toString方法3个作用

    目录 一.toString方法的三个作用 二.返回一个[表示对象]的[字符串] 三.自定义的toString() 一.toString方法的三个作用  1.返回一个[表示对象]的[字符串]  2.检测对象的类型    Object.prototype.toString.call(arr)==="[object Array]"  3.返回该数字对应进制的字符串.  console.log(10.toString(2)) //10专为为2进制'1010' 在js中包含2进制,8进制,10进

  • Java中toString()、String.valueOf、(String)强转区别

    目录 一.前言 二.代码实例 1.基本类型 2.封装类型 3.null值问题 三.源码分析 1.toString() 2.String.valueOf() 四.总结 一.前言 相信大家在日常开发中这三种方法用到的应该很多,尤其是前两种,经常在开发的时候,随心所欲,想用哪个用哪个,既然存在,那就应该有它存在的道理,那么什么情况下用哪个呢? 二.代码实例 1.基本类型 (1)基本类型没有toString()方法 (2)推荐使用 (3)无法强转 (String)是标准的类型转换,将Object类型转为

  • 浅谈JS中的!=、== 、!==、===的用法和区别

    var num = 1; var str = '1'; var test = 1; test == num //true 相同类型 相同值 test === num //true 相同类型 相同值 test !== num //false test与num类型相同,其值也相同, 非运算肯定是false num == str //true 把str转换为数字,检查其是否相等. num != str //false == 的 非运算 num === str //false 类型不同,直接返回fals

随机推荐