译者按: 语言的细枝末节了解一下就可以了,不需要太较真,不过如果一点也不知道的话,那就不太妙了。

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

对于JavaScript,有3种不同方法可以将变量转换为字符串。这篇博客将详细介绍这些方法,并比较他们的优劣。

3种方法

将变量转换为字符串的3种方法如下:

  1. value.toString()
  2. "" + value
  3. String(value)

valuenull或者undefined时,第1种方法就不行了。而方法2和方法3基本上是一样的。

  • ""+value: 将value空字符串相加,即可将其转换为字符串。这种方法其实是一种稍微晦涩的技巧,可能会让别人难于理解开发者的意图。不过,这一点见仁见智,有些人偏爱这种方法。

  • String(value): 这种方法非常清晰:使用String()函数将value转换为字符串。不过,String()有两种不同用法,容易混淆,尤其对于Java开发者来说。当String()和运算符new一起作为构造函数使用时,它返回一个新创建的String对象;当不用new运算符调用String()时,它只把value转换成原始的字符串。这两者是非常不同的:

> String("Fundebug") === new String("Fundebug")
false
 
> typeof String("Fundebug")
'string'
> String("Fundebug") instanceof String
false
 
> typeof new String("Fundebug")
'object'
> new String("Fundebug") instanceof String
true

事实上,将String()作为构造函数使用并不常见,因此仅使用它来转换字符串就好了。

“”+value与String(value)的细微差别

""+valueString(value)都可以将value转换为字符串,它们是如何做到的呢?事实上,它们虽然结果相同,但是方法稍有区别。

将primitive基本类型转换为字符串

两种方法都使用内部函数ToString()primitive基本类型转换为字符串。ToString()函数在ECMAScript 5.1 (§9.8)中定义了,但是并不能直接使用,因此称作内部函数。下面的表格显示了ToString()函数如何将primitive基本类型转换为字符串:

参数 结果
undefined "undefined"
null "null"
Boolean "true"或者 "false"
Number 将数字转换为字符串,例如: "1.765"
String 无需转换

将Object转换为字符串

转换为字符串之前,两种方法都会先将Object转换为primitive。不同的是,""+value使用内部函数ToPrimitive(Number)(除了date类型),而String(value)使用内部函数ToPrimitive(String)

  • ToPrimitive(Number): 先调用obj.valueOf,若结果为primitive则返回;否则再调用obj.toString(),若结果为primitive则返回;否则返回TypeError
  • ToPrimitive(String): 与ToPrimitive(Number)类似,只是先调用obj.toString(),后调用obj.valueOf()

可以通过以下示例了解区别,obj如下:

var obj = {
valueOf: function()
{
console.log("valueOf");
return {};
},
toString: function()
{
console.log("toString");
return {};
}
};

调用结果:

> "" + obj
valueOf
toString
TypeError: Cannot convert object to primitive value
 
> String(obj)
toString
valueOf
TypeError: Cannot convert object to primitive value

它们的结果相同

""+valueString(value)虽然不同,但是我们很少能感觉到。因为,大多数object使用默认的valueOf(),它返回对象本身:

> var x = {}
> x.valueOf() === x
true

由于valueOf()返回值并非primitive,因此ToPrimitive(Number)会跳过valueOf(),而返回toString()的返回值。这样,与ToPrimitive(String)的返回值就一样了。

objectBooleanNumber或者String实例时,valueOf()将返回primitive。这就意味着两者的计算过程是这样的:

  • ToPrimitive(Number):valueOf()返回primitive值,然后使用ToString()转换为字符串。
  • ToPrimitive(String): toString()通过ToString()函数将primitive值转换为字符串。

可知,虽然计算过程不同,但是它们的结果是一样的。

结论

那么你该选择哪种方法呢?如果你可以确保value值不是nullundefined,那么不妨使用value.toString()。否则,你只能使用""+valueString(value),它们基本上是一样的。

参考

  1. JavaScript values: not everything is an object
  2. What is {} + {} in JavaScript?
  3. String concatenation in JavaScript
  4. JavaScript String 对象

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了7亿+错误事件,得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用!

版权声明:
转载时请注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2017/09/18/value-to-string/

JS中将变量转为字符串的更多相关文章

  1. JS中将JSON的字符串解析成JSON数据格式《转》

    在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 使用eval函数来解析,并且使用jquery的ea ...

  2. 第11天:JS中变量、字符串基础知识

    一.js简介用来制作页面交互效果,提高用户体验. js页面效果:轮播图.选项卡.地图.表单验证javascript是弱变量类型的语言,变量只需要用var来声明.而java要根据变 量类型来声明, in ...

  3. JS中将XML转为JSON对象

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <scr ...

  4. 在JS中将JSON的字符串解析成JSON数据格式

    使用eval函数来解析 <script> var data="{root: [{name:'1',value:'0'},{name:'6101',value:'北京市'},{na ...

  5. js中把JSON字符串转换成JSON对象最好的方法

    在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 第一种解析方式:使用eval函数来解析,并且使用j ...

  6. Js中把JSON字符串转换为JSON对象(eval()、new Function())

    在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 第一种解析方式:使用eval函数来解析,并且使用j ...

  7. 如何让JS变量和字符串拼接后,是变量而不是字符串

    今天有个非常有趣的事,因为我需要用JS去实现多语言,就是我在JS文件里定义了不同的变量,尝试用变量拼接字符串组成之前定义好的变量名称,结果拼接之后,显示的却是字符串,而不是变量,所以无法解析 zh_t ...

  8. js中其他数据类型的值转为字符串的相关总结

    有这样一个面试题: 此题考查的是其他类型的值转换为字符串后的结果 下面我们就由此来总结一下其他类型的值转为字符串后的值都是什么? 从上面的实例可以看出,基本数据类型的值转换成字符串都如我们预期的那样. ...

  9. 使用NSJSONSerialization将数组或字典转为字符串

    IOS中将数组或字典转为字符串可以用NSJSONSerialization,代码如下: NSData* data = [NSJSONSerialization dataWithJSONObject:a ...

随机推荐

  1. 吴恩达机器学习笔记38-决策下一步做什么(Deciding What to Do Next Revisited)

    我们已经讨论了模型选择问题,偏差和方差的问题.那么这些诊断法则怎样帮助我们判断,哪些方法可能有助于改进学习算法的效果,而哪些可能是徒劳的呢? 让我们再次回到最开始的例子,在那里寻找答案,这就是我们之前 ...

  2. 一些能体现个人水平的SQL语句[总结篇]

    作为一名小小的开发人员,刚入门的时候觉得很难,过了一段时间之后,发现很简单,很快就可以搞定很bug了.然而这并不能说明你就已经很牛掰了,只能说,你不了解其他太多的东西.应该说,数据库有几个共同的命令, ...

  3. 大数据基础Hadoop 2.x入门

    hadoop概述 存储和分析网络数据 三大组件 MapReduce 对海量数据的处理 思想: 分而治之 每个数据集进行逻辑业务处理map 合并统计数据结果reduce HDFS 储存海量数据 分布式存 ...

  4. Scala - 快速学习09 - 函数式编程:一些操作

    1- 集合类(collection) 系统地区分了可变的和不可变的集合. scala.collection包中所有的集合类 可变集合(Mutable) 顾名思义,意味着可以修改,移除或者添加一个元素. ...

  5. Java多线程可以分组,还能这样玩!

    前面的文章,栈长和大家分享过多线程创建的3种方式<实现 Java 多线程的 3 种方式>. 但如果线程很多的情况下,你知道如何对它们进行分组吗? 和 Dubbo 的服务分组一样,Java ...

  6. 【新手向】使用nodejs抓取百度贴吧内容

    参考教程:https://github.com/alsotang/node-lessons 1~5节 1. 通过superagent抓取页面内容 superagent .get('http://www ...

  7. 【ABP框架系列学习】模块系统(4)之插件示例开发

    0.引言 上一篇博文主要介绍了ABP模块及插件的相关知识,本章节主要开发一个插件示例来学习如何创建一个插件,并在应用程序中使用.这个命名为FirstABPPlugin的插件主要在指定的时间段内删除审计 ...

  8. .Net 并发写入文件的多种方式

    1.简介 本文主要演示日常开发中利用多线程写入文件存在的问题,以及解决方案,本文使用最常用的日志案例! 2.使用File.AppendAllText写入日志 这是种常规的做法,通过File定位到日志文 ...

  9. kibana6.2.4版本更新x-pack认证

    我在上一次介绍了如何安装时基本使用elk留下了一个问题,这次来解决这个问题,相必大家也想知道,接下来就看详细过程. 上次说到,直接看图吧. 因为x-pack是收费的,所以试用期只有一个月.长期使用就必 ...

  10. Code Complete-13/7/23

    What is "construction"?    Hava u ever  used construction paper to make some things?What i ...