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 相关文章推荐
使用JavaScript 实现各种跨域的方法
May 08 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
JavaScript多线程详解
Aug 12 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
Nov 02 Javascript
基于jquery实现简单的分页控件
Mar 17 Javascript
详解JavaScript中的自定义事件编写
May 10 Javascript
微信小程序 引入es6 promise
Apr 12 Javascript
jQuery:unbind方法的使用详解
Aug 14 jQuery
js实现简单掷骰子效果
Oct 24 Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 Javascript
关于JavaScript轮播图的实现
Nov 20 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模拟post行为代码总结(POST方式不是绝对安全)
2012/02/22 PHP
php一个找二层目录的小东东
2012/08/02 PHP
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
php number_format() 函数通过千位分组来格式化数字的实现代码
2013/08/06 PHP
ThinkPHP表单自动提交验证实例教程
2014/07/18 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
JS全局变量和局部变量最新解析
2016/06/24 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
详解vue-cli3使用
2018/08/14 Javascript
详解vue-cli 2.0配置文件(小结)
2019/01/14 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
python实现将pvr格式转换成pvr.ccz的方法
2015/04/28 Python
Python实现的彩票机选器实例
2015/06/17 Python
python Django框架实现自定义表单提交
2016/03/25 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
windows系统Tensorflow2.x简单安装记录(图文)
2021/01/18 Python
南威尔士家居商店:Leekes
2016/10/25 全球购物
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
英文自我鉴定
2013/12/10 职场文书
中学生秋季运动会广播稿
2014/09/21 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
开业典礼致辞
2015/07/29 职场文书
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers
Python 避免字典和元组的多重嵌套问题
2022/07/15 Python