Javascript中将变量转换为字符串的三种方法


Posted in Javascript onSeptember 19, 2017

前言

大家应该都知道,对于JavaScript,有3种不同方法可以将变量转换为字符串。这篇文章将详细介绍这些方法,并比较他们的优劣。下面话不多说了,来一起看看详细的介绍吧。

3种方法

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

  • value.toString()
  • "" + value
  • String(value)

当value为null或者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)的返回值就一样了。

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

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

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

结论

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

参考

  • JavaScript values: not everything is an object
  • What is {} + {} in JavaScript?
  • String concatenation in JavaScript
  • JavaScript String 对象

原文: Converting a value to string in JavaScript

译者: Fundebug

Javascript 相关文章推荐
js实现数字每三位加逗号的方法
Feb 05 Javascript
Jquery简单分页实现方法
Jul 24 Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
vue子路由跳转实现tab选项卡
Jul 24 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 #Javascript
JavaScript 中的 this 简单规则
Sep 19 #Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 #Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 #Javascript
原生js中ajax访问的实例详解
Sep 19 #Javascript
angularjs实现过滤并替换关键字小功能
Sep 19 #Javascript
详解vue-cli与webpack结合如何处理静态资源
Sep 19 #Javascript
You might like
PHP计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
php多重接口的实现方法
2015/06/20 PHP
php获取远程文件的内容和大小
2015/11/03 PHP
PHP实现的二分查找算法实例分析
2017/12/19 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
Python定义一个跨越多行的字符串的多种方法小结
2018/07/19 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
使用python实现对元素的长截图功能
2019/11/14 Python
python定义类self用法实例解析
2020/01/22 Python
python 实现两个线程交替执行
2020/05/02 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
Windows和Linux动态库应用异同
2016/04/17 面试题
2014年幼儿园学期工作总结
2014/12/05 职场文书
追悼会答谢词
2015/01/05 职场文书
起诉书范文
2015/05/20 职场文书
勇敢的心观后感
2015/06/09 职场文书
pandas DataFrame.shift()函数的具体使用
2021/05/24 Python
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android
canvas实现贪食蛇的实践
2022/02/15 Javascript