JavaScript中将一个值转换为字符串的方法分析[译]


Posted in Javascript onSeptember 21, 2012

译者注:前两天在看ES5的时候顺便出了一道题,今天看到这篇文章,刚好解释的很清楚,就翻译了一下.
在JavaScript中,主要有三种方法能让任意值转换为字符串.本文讲解了每种方法以及各自的优缺点.

1.转换字符串的三种方法
这三种将value转换为字符串的方法是:

1.value.toString()
2."" + value
3.String(value)

第一种方法存在的问题是,它不能把null和undefined转换为字符串.还有第二种和第三种方法,这两种方法的效果基本一样.

•""+value: 使用加法运算符配合一个空字符串可以把任意值转换为字符串,我觉得这种方法代码的可读性很差,但相对String(value)来,还是有一些人更喜欢用这种转换方式.
•String(value): 这种方法可读性更好,唯一的问题是,这种函数调用可能会迷惑一些人,尤其是那些熟悉Java的的程序员,因为String同时也是一个构造函数.要注意的是它作为普通函数和作为构造函数时的表现完全不同:

> String("abc") === new String("abc") 
false > typeof String("abc") 
'string' 
> String("abc") instanceof String 
false 
> typeof new String("abc") 
'object' 
> new String("abc") instanceof String 
true

String作为普通函数时会产生一个字符串(一个原始值).作为构造函数时会产生一个String对象的实例.后者在JavaScript中很少用到,所以基本上你可以忽略掉String作为构造函数的用法,但一定要记得它是个转换函数.

2.""+value 和 String(value)的细微差别
到现在你已经知道了+ 和 String()都可以将它们的“参数”转换为字符串.但他们的转换方式还是着有细微的差别,不过几乎所有的情况下,转换结果都是一样的.

2.1 将原始值转换为字符串
这两种方法都是使用引擎内部的ToString()操作将原始值转换为字符串的.“内部操作”的意思是:这个操作函数是在ECMAScript 5.1 (§9.8)中定义的,但ES语言本身并不能访问到它.下面这个表格解释了ToString()是如何转换原始值的.

参数 结果
undefined "undefined"
null "null"
布尔值 "true"或者"false"
数字 数字作为字符串,比如"1.765"
字符串 无需转换

2.2 将对象值转换为字符串

这两种方法都先将对象值转换为原始值,然后再将原始值转换为字符串.但是在这个转换中, + 使用的是内部的ToPrimitive(Number)操作(除非被转换的是date对象),而String()用的是ToPrimitive(String).

•ToPrimitive(Number): 将一个对象值转换为原始值,首先调用obj.valueOf().如果返回值是一个原始值,则返回这个原始值.如果不是,则再调用obj.toString().如果返回值是个原始值,返回这个原始值.否则,抛出TypeError异常.
•ToPrimitive(String): 和上面的方法类似,只是优先调用obj.toString()方法而不是obj.valueOf().
通过转换下面的这个对象,你可以看到它们之间的差别:

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

2.3 结果通常都相同
上面讲的区别,在实际情况中几乎不太可能遇到.因为:大部分对象都使用了默认的继承而来的valueOf()方法,返回值总是这个对象本身.
> var x = {} 
> x.valueOf() === x 
true

因此, ToPrimitive(Number)通常会跳过valueOf方法返回toString()方法的返回值,这就表现的和ToPrimitive(String)完全一样.但是,如果这个对象是Boolean,Number或者String的对象实例,那么它的valueOf()会返回一个原始值(被这个对象包装前的原始值).那么这两种操作就会按照如下步骤执行:

•ToPrimitive(Number)返回了对象的valueOf()方法的返回值(被包装前的原始值)再经过ToString()操作后的结果.
•ToPrimitive(String)返回了对象的toString()方法的返回值(在该对象被包装前的原始值上进行ToString()操作的返回值).
就这样,他们还是返回了相同的结果,只是转换的途径不同.

3.结论

你应该选择哪种方式来将其他类型的值转换为字符串呢?如果你能确保这个值永远不会是null或者undefined,则可以用value.toString()来转换.否则,""+value和String(value)选哪个都可以,看个人喜好,我认为String(value) 更明确一点.

4.相关文章

  1. JavaScript values: not everything is an object [原始值和对象值的区别]
  2. What is {} + {} in JavaScript? [解释了+运算符的工作原理]
  3. String concatenation in JavaScript [怎样才能更好的连接多个字符串]
Javascript 相关文章推荐
extjs 学习笔记(二) Ext.Element类
Oct 13 Javascript
JavaScript类和继承 prototype属性
Sep 03 Javascript
JS 数字转换研究总结
Dec 26 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 Javascript
JavaScript导航脚本判断当前导航
Jul 12 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 Javascript
Vue中Axios从远程/后台读取数据
Jan 21 Javascript
使用apply方法处理数组的三个技巧[译]
Sep 20 #Javascript
js DOM 元素ID就是全局变量
Sep 20 #Javascript
JavaScript NaN和Infinity特殊值 [译]
Sep 20 #Javascript
JavaScript 更严格的相等 [译]
Sep 20 #Javascript
JavaScript 反科里化 this [译]
Sep 20 #Javascript
Array.prototype.concat不是通用方法反驳[译]
Sep 20 #Javascript
JavaScript 用Node.js写Shell脚本[译]
Sep 20 #Javascript
You might like
解析array splice的移除数组中指定键的值,返回一个新的数组
2013/07/02 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
网页打开自动最大化的js代码
2012/08/22 Javascript
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
[02:22]2018DOTA2亚洲邀请赛VG赛前采访
2018/04/03 DOTA
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
Linux中Python 环境软件包安装步骤
2016/03/31 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
解决pycharm无法调用pip安装的包问题
2018/05/18 Python
python 拼接文件路径的方法
2018/10/23 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
医学专业个人求职自荐信格式
2013/09/23 职场文书
求职推荐信
2013/10/28 职场文书
初中生期末考试的自我评价
2013/12/17 职场文书
2014离婚协议书范文
2014/09/10 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
担保书范本
2015/01/20 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书
MySQL Server 层四个日志
2022/03/31 MySQL
vue实现简易音乐播放器
2022/08/14 Vue.js