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 相关文章推荐
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
JS获取当前脚本文件的绝对路径
Mar 02 Javascript
bootstrap日历插件datetimepicker使用方法
Dec 14 Javascript
浅谈angularjs $http提交数据探索
Jan 20 Javascript
对于js垃圾回收机制的理解
Sep 14 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
vue项目每30秒刷新1次接口的实现方法
Dec 04 Javascript
vue实现新闻展示页的步骤详解
Apr 11 Javascript
Vue infinite update loop的问题解决
Apr 23 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
多文件上载系统完整版
2006/10/09 PHP
php使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
php全局变量和类配合使用深刻理解
2013/06/05 PHP
PHP保留两位小数并且四舍五入及不四舍五入的方法
2013/09/22 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
document.compatMode介绍
2009/05/21 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
Python通过for循环理解迭代器和生成器实例详解
2019/02/16 Python
pyhanlp安装介绍和简单应用
2019/02/22 Python
python 列表中[ ]中冒号‘:’的作用
2019/04/30 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
Python读取yaml文件的详细教程
2020/07/21 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
高等教育学自荐书范文
2014/02/10 职场文书
2014两会优秀的心得体会范文
2014/03/17 职场文书
村容村貌整治方案
2014/05/21 职场文书
升学宴来宾致辞
2015/07/27 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书