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变形金刚文字特效代码分享
Aug 20 Javascript
javascript伸缩型菜单实现代码
Nov 16 Javascript
js判断某个字符出现的次数的简单实例
Jun 03 Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
详解Vue用axios发送post请求自动set cookie
May 10 Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
JS中的算法与数据结构之列表(List)实例详解
Aug 16 Javascript
原生JS实现拖拽功能
Dec 16 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
linux下 C语言对 php 扩展
2008/12/14 PHP
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
js实现每日自动换一张图片的方法
2015/05/04 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
2017/04/28 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
Python中的True,False条件判断实例分析
2015/01/12 Python
使用SAE部署Python运行环境的教程
2015/05/05 Python
Python3中的2to3转换工具使用示例
2015/06/12 Python
Python中字典和集合学习小结
2017/07/07 Python
pandas通过索引进行排序的示例
2018/11/16 Python
Kali Linux安装ipython2 和 ipython3的方法
2019/07/11 Python
Python3实现配置文件差异对比脚本
2019/11/18 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
财务部岗位职责
2013/11/19 职场文书
暑期实践思想汇报
2014/01/06 职场文书
在校大学生个人的自我评价
2014/02/13 职场文书
党在我心中演讲稿
2014/09/02 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
为什么不建议在go项目中使用init()
2021/04/12 Golang
Golang之sync.Pool使用详解
2021/05/06 Golang