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 相关文章推荐
chrome下img加载对height()的影响示例探讨
May 26 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
初识angular框架后的所思所想
Feb 19 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
Sep 17 Javascript
Angular2 多级注入器详解及实例
Oct 30 Javascript
js数字舍入误差以及解决方法(必看篇)
Feb 28 Javascript
javascript算法之二叉搜索树的示例代码
Sep 12 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
Oct 17 Javascript
JS实现的JSON序列化操作简单示例
Jul 02 Javascript
JS数组方法concat()用法实例分析
Jan 18 Javascript
微信小程序实现上传照片代码实例解析
Aug 04 Javascript
微信小程序input抖动问题的修复方法
Mar 03 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动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
jquery easyui的tabs使用时的问题
2010/03/23 Javascript
JS按字节截取字符长度实例
2013/11/20 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
了解Javascript的模块化开发
2015/03/02 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
详解webpack 多页面/入口支持&公共组件单独打包
2017/06/29 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
js 倒计时(高效率服务器时间同步)
2017/09/12 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
python中使用pyhook实现键盘监控的例子
2014/07/18 Python
使用python实现生成用户信息
2017/03/20 Python
Python实现注册、登录小程序功能
2018/09/21 Python
python+tkinter实现学生管理系统
2019/08/20 Python
python中Django文件上传方法详解
2020/08/05 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
个人自我鉴定怎么写
2013/10/28 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书
V Rising 服务器搭建图文教程
2022/06/16 Servers