一日一练-JS toString 和valueOf 方法的联系与区别

子曰:类型转换中toString 和valueOf 的联系与区别分析

首先是看看ES5 的规范是如何进行说明的

在这里有几个基础知识点需要了解一下:

  1. [[Class]]

    [[Class]] 属于Object 的内部属性,值的类型返回为String,其作用是,说明规范定义的对象分类的一个字符串值。

    ES5 规范的每种内置对象都定义了[[Class]] 内部属性值。宿主对象的[[Class]] 内部属性值可以是除了“Arguments”、 “Array”、 “Boolean”、 “Date”、 “Error”、 “Function”、 “JSON”、 “Math”、 “Number”、 “Object”、 “RegExp”、 “String” 的任意字符串。[[Class]] 内部属性的值用于内部区分对象的种类。注,本规范中除了通过Object.prototype.toString 没有提供任何手段使程序访问此值。

    摘自ES5 类型

  2. [[PrimitiveValue]]

    [[PrimitiveValue]] 属于只在某些对象中定义的内部属性,其值的类型范围为原始类型,作用是说明与此对象的内部状态信息关联。对于标准内置对象只能用 Boolean、Date、Number、String 对象实现 [[PrimitiveValue]]

    摘自ES5 类型

  3. ToObject

    ToObject 抽象操作根据下表将其参数转换为对象类型的值:

输入类型 结果
未定义 抛出TypeError 异常。
空值 抛出TypeError 异常。
布尔值 创建一个新的Boolean 对象,其[[PrimitiveValue]] 属性被设为该参数的值。
数值 创建一个新的Number 对象,其[[PrimitiveValue]] 属性被设为该参数的值。
字符串 创建一个新的String 对象,其[[PrimitiveValue]] 属性被设为该参数的值。
对象 结果是输入的参数(不转换)

摘自ES5 类型转换与测试

Object.prototype.toString()

当调用toString 方法,采用如下步骤:

  1. 如果this 的值是undefined, 返回 [object Undefined]
  2. 如果this 的值是null, 返回 [object Null]
  3. 令O 为以this 作为参数调用ToObject 的结果。
  4. class 为O 的[[Class]] 内部属性的值。
  5. 返回三个字符串"[Object "、 class 和"]" 连起来的字符串。

    摘自ES5 Object.prototype.toString()

Object.prototype.valueOf()

当调用valueOf 方法,采用如下步骤:

  1. 令O 为以this 作为参数调用ToObject 的结果。
  2. 如果O 是以宿主对象15.2.2.1作为参数调用Object 构造器的结果,则

    2.1. 返回O 或返回先前传递给构造器的原宿主对象。返回的具体结果是由实现定义的。

  3. 返回O。

    摘自ES5 Object.prototype.valueOf()

toString() 和valueOf()

所有对象继承了两个转换方法。

  1. toString()

    作用是返回一个反映这个对象的字符串。默认的toString() 方法返回值

    js ({x:1, y:2}).toString() // => "[object Object]"

    1.1. 数组类(Array class)

    将每个数组元素转换为一个字符串,并在元素之间添加逗号后合并结果字符串。

      [1,2,3].toString() // => "1,2,3"

    1.2. 函数类(Function class)

    返回这个函数的实现定义的表示方法。实际上,这里的实现方式是通常是将用户定义的函数转换为JavaScript 源代码字符串。

      (function(x) { f(x) }).toString()  // => "function(x) {\n f(x) \n }"

    1.3. 日期类(Date class)

    返回一个可读的(意指可以通过JavaScript 的方法过了并再做封装)日期和时间字符串。

    new Date().toString() // => "Tue Apr 24 2018 09:43:31 GMT+0800 (中国标准时间)"

    1.4. RegExp 类(RegExp class)

    将RegExp 对象转换为表示正则表达式直接量的字符串。

    /\d+/g.toString() // => "/\\d+/g"
  2. valueOf()

    这个方法的任务并未详细定义:如果存在任意原始值,它就默认将对象转换为表示它的原始值。对象是复合值,而且诶额大多数对象无法真正表示为一个原始值,因此默认的valueOf() 方法简单地返回对象本身,而不是返回一个原始值。

    2.1. 数组、函数和正则表达式简单地继承了这个默认方法,调用这些类型的实例的valueOf() 方法只是简单返回对象本身。

    2.2. 日期类定义的valueOf() 方法会返回它额一个内部表示:1970年1月1日以来的毫秒数。

    js var d = new Date(2018,4,1) // => 2018年5月1日 d.valueOf() // => 1525104000000

    参考自《JavaScript 权威指南(第6版)(中文版)》第3 章 类型、值和变量 中的3.8 类型转换

对象转换为原始值

  1. 对象到布尔值的转换:

    所有对象(包括数值和函数)都转换为true。对于包装函数亦是如此:new Boolean(false) 是一个对象而不是原始值,它将转化为true

  2. 对象到字符串的转换:

    2.1. 如果对象具有toString() 方法,则调用这个方法。如果它返回一个原始值,JavaScript 将原始值转换为字符串(如果它本身不是字符串的话),并返回这个字符串的结果。

    2.2. 如果对象没有toString() 方法, 或者这个方法并不返回一个原始值,那么JavaScript 会调用valueOf() 方法。如果存在这个方法,则JavaScript 调用它。如果返回值是原始值,JavaScript 将这个值转换为字符串(如果本身不是字符串的话),并返回这个字符串的结果。

    2.3. 否则,JavaScript 无法从toString()valueOf() 获得一个原始值,因此这时它将抛出一个类型错误异常。

  3. 对象到数字的转换:

    3.1. 如果对象具有valueOf() 方法,后者返回一个原始值,则JavaScript 将这个原始值转换为数字(如果需要的话)并返回这个数字。

    3.2. 否则,如果对象具有toString() 方法,后者返回一个原始值,则JavaScript 将其转换并返回。对象的toString() 方法返回一个字符串直接量(这里的原始值),JavaScript 将这个字符串转换为数字类型,并返回这数字。

    3.3. 否则,JavaScript 抛出一个类型错误异常。

    参考自《JavaScript 权威指南(第6版)(中文版)》第3 章 类型、值和变量 中的3.8 类型转换

实例讲解

  1. 空数组会被转换为数字0,具有单个元素的数组同样会转换为一个数组。

    Number([]) // => 0
    Number([‘1234‘]) // => 1234

    数组继承了默认的valueOf() 方法,这个方法返回一个对象而不是一个原始值,因此,数组到数字的转换则调用toString() 方法。空数组转换为空字符串,空字符串转换成数字0.

    // [] => ‘‘ => 0
    [].valueOf() // => []
    [].toString() // => ‘‘
    ‘‘ // => 0

    含有一个元素的数组转换为字符串的结果和这个元素转换字符串的结果一样。如果数组只包含一个数字元素,这个数字转换为字符串,再转换会数字。

    [1].valueOf() // => [1]
    [1].toString() // => "1"
    "1" // => 1
  2. + 运算符可以进行数字加法和字符串连接操作。

    如果它的其中一个操作数是对象,则JavaScript 将使用特殊的方法将对象转换为原始值,而不是执行对象到方法的转换。

    这种特殊方式是指:通过valueOf() 或者toString() 返回的原始值将被直接使用,而不会被强制转换为数字或字符串。

    +==!= 和关系运算符也会做对象到原始值的转换,但要除去日期对象的特殊情形:任何对象都会首先尝试调用valueOf(),然后调用toString()。不管得到的原始值是否直接使用,它都不会进一步被转换为数字或字符串。

    参考自《JavaScript 权威指南(第6版)(中文版)》第3 章 类型、值和变量 中的3.8 类型转换

原文地址:https://www.cnblogs.com/JobbyM/p/8929679.html

时间: 2024-10-12 20:27:11

一日一练-JS toString 和valueOf 方法的联系与区别的相关文章

js中toLocalString()、toString()和valueOf()方法

所有的对象都具有toLocaleString().toString()和valueOf()方法,toString() 1.Array.toString():将数组转换成一个字符串,并且返回这个字符串.描述:当数组用于字符串环境中时,javascript会调用这一方法将数组自动转换成一个字符串.toString()在把数组转换成字符串时,首先要将数组的每个元素都转换成字符串(通过调用这些元素的toString方法).当每个元素都被转换成字符串时,它就以列表的形式输出这些字符串,字符串之间用逗号分隔

一日一练-JS rem布局在webview 中错乱

子曰:在实践中学习 今天测试同事说,app 中的h5 页面在Mate Pro 10 中出现错误,不能够占满全屏,只占据了90% 的宽度.这是一个大bug 啊! 开始进行了排查是否是代码问题?rem 的问题?webview 的问题?最后在网络上检索到是参考文档中的内容.这里记录了解决方案. 我们在开发hybrid 应用时,h5 页面的使用rem 进行适配,设计师给出750px 宽度的设计图,在750px 设计图上进行开发.通常在适配时,都是在<head> 标签中加载一段<script>

区分javascript中的toString(),toLocaleString(),valueOf()方法

首先我们随意创建一个对象,这很简单,打开FF浏览器的Firebug切换到控制台或者打开webkit浏览器的审查元素功能. 输入以下内容: var obj1=[1,2,3,4,5] var obj2=[5,4,3,2,1] var obj3=[obj1,obj2] 接着试试调用obj3的toString(),toLocaleString(),valueOf()方法: 根据输出结果可以发现toString()和toLocaleString()方法输出的内容是一样的,且都为字符串形式.而valueOf

JS中的toString()和valueOf()方法

1.toString()方法:主要用于Array.Boolean.Date.Error.Function.Number等对象转化为字符串形式.日期类的toString()方法返回一个可读的日期和字符串. 数组形式: 1 var array = ["CodePlayer", true, 12, -5]; 2 console. log( array.toString() ); 3 输出的形式为: 4 CodePlayer,true,12,-5 1 日期形式: 2 3 var date =

js对象tostring和valueof方法

所有对象继承了Object.prototype的两个转换方法: 第一个是toString(),它的作用是返回一个反映这个对象的字符串; 第二个是valueOf(),它的作用是返回它相应的原始值; 但一些内置对象重写了这两个方法,下面展示了一些内置对象调用这两个方法的返回情况. 类型 toString valueOf Object 返回"[object ObjectName]",其中 ObjectName 是对象类型的名称. 对象本身.这是默认情况. String 返回 String 对

JavaScript的toString()和valueof()方法

toString()方法: 函数:函数 (function(){}).toString(); //返回"function(){}" typeof((function(){}).toString()); //返回string 数组:数组 [2,3,"gor"].toString(); //返回"2,3,gor" [].toString(); //返回空字符串"" 并且类型为String typeof([2,3,"gor

Java中区别.toString() ,(String),valueOf()方法

在java项目的实际开发和应用中,常常需要用到将对象转为String这一基本功能.本文将对常用的转换方法进行一个总结.常用的方法有Object.toString(),(String)要转换的对象,String.valueOf(Object)等.下面对这些方法一一进行分析.方法1:采用 Object.toString()方法请看下面的例子:Object object = getObject();System.out.println(object.toString()); 在这种使用方法中,因为Ja

一日一练-JS 了解几种跨域技术

子曰:了解几种跨域机制 简单介绍 首先简单了解一下同源策略相关知识点: 1.同源策略 限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互.这是一个用于隔离潜在恶意文件的重要机制. 2.源的定义:如果两个页面的协议.端口和域名都相同,则两个页面具有相同的 源 3.同源策略规定,是XHR 实现Ajax 通信的一个主要限制.默认情况下,XHR 对象只能访问与包含它的页面位于同一个域中的资源.这种安全策略可以预防某些恶意行为.但是,实现合理的跨域请求对开发某些浏览器应用程序也是至关重要的.

toString和valueOf

toString:第一个是toString(),它的作用是返回一个反映这个对象的字符串; toString()可以看做是把一个数据转换成了相应字符串的形式,安照这个转换规则中; valueOf:第二个是valueOf(),它的作用是返回它相应的原始值; 对象通过toString或valueOf方法转换为原始值,JS语言核心的内置类首先尝试使用valueOf(),再尝试使用toString() //返回相应的字符串 console.log( ({x:1, y:1 }).toString() );