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 相关文章推荐
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
JavaScript中出现乱码的处理心得
Dec 24 Javascript
js确定对象类型方法
Mar 30 Javascript
JS 退出系统并跳转到登录界面的实现代码
Jun 29 Javascript
js实现的标题栏新消息闪烁提示效果
Jun 06 Javascript
jQuery中position()方法用法实例
Jan 16 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
JavaScript中EventLoop介绍
Jan 22 Javascript
JavaScript运行原理分析
Feb 09 Javascript
vue中添加与删除关键字搜索功能
Oct 12 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
Jul 11 Javascript
微信小程序实现签到弹窗动画
Sep 21 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 开发工具
2006/12/06 PHP
PHP重定向的3种方式
2013/03/07 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
php检测图片主要颜色的方法
2015/07/01 PHP
WordPres对前端页面调试时的两个PHP函数使用小技巧
2015/12/22 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
JavaScript中的对象化编程
2008/01/16 Javascript
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
JavaScript简单获取系统当前时间完整示例
2016/08/02 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
如何利用nodejs实现命令行游戏
2020/11/24 NodeJs
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
vue3.0中使用element的完整步骤
2021/03/04 Vue.js
Python用for循环实现九九乘法表
2018/05/31 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
国培计划培训感言
2014/03/11 职场文书
先进基层党组织材料
2014/12/25 职场文书
春节随笔
2015/08/15 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技