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 相关文章推荐
来自国外的14个图片放大编辑的jQuery插件整理
Oct 20 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
Dec 12 Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
分享12个非常实用的JavaScript小技巧
May 11 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 Javascript
VUE实现可随意拖动的弹窗组件
Sep 25 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 Javascript
实例讲解React 组件
Jul 07 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
Jul 17 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
上海无线电三厂简史修改版
2021/03/01 无线电
PHP MemCached 高级缓存应用代码
2010/08/05 PHP
php注销代码(session注销)
2012/05/31 PHP
PHP中的按位与和按位或操作示例
2014/01/27 PHP
在win7中搭建Linux+PHP 开发环境
2014/10/08 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
js 页面执行时间计算代码
2009/03/04 Javascript
JavaScript 空位补零实现代码
2010/02/26 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
Jquery之美中不足小结
2011/02/16 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
微信小程序适配iphoneX的实现方法
2018/09/18 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
Python实现接受任意个数参数的函数方法
2018/04/21 Python
Python爬虫包BeautifulSoup实例(三)
2018/06/17 Python
Django框架登录加上验证码校验实现验证功能示例
2019/05/23 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
Python分析微信好友性别比例和省份城市分布比例的方法示例【基于itchat模块】
2020/05/29 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
法制宣传口号
2014/06/16 职场文书
手机销售员岗位职责
2015/04/11 职场文书
2016年国庆节新闻稿范文
2015/11/25 职场文书
创业计划书之宠物店
2019/09/19 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
Goland使用Go Modules创建/管理项目的操作
2021/05/06 Golang
OpenCV 图像梯度的实现方法
2021/07/25 Python
python 使用pandas读取csv文件的方法
2022/12/24 Python