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 相关文章推荐
关于javascript 回调函数中变量作用域的讨论
Sep 11 Javascript
JQuery中的ready函数冲突的解决方法
May 17 Javascript
jQuery验证Checkbox是否选中的代码 推荐
Sep 04 Javascript
JS获取地址栏参数的小例子
Aug 23 Javascript
JS滚轮事件onmousewheel使用介绍
Nov 01 Javascript
javascript模拟C#格式化字符串
Aug 26 Javascript
JavaScript实现in-place思想的快速排序方法
Aug 07 Javascript
基于JavaScript实现Tab选项卡切换效果
Nov 24 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
详解vue 兼容IE报错解决方案
Dec 29 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 Javascript
通过实例解析js可枚举属性与不可枚举属性
Dec 02 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
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
解析php 版获取重定向后的地址(代码)
2013/06/26 PHP
php提交post数组参数实例分析
2015/12/17 PHP
PHP7内核之Reference详解
2019/03/14 PHP
js倒计时小程序
2013/11/05 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
2015/10/21 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
Python selenium如何设置等待时间
2016/09/15 Python
python 迭代器和iter()函数详解及实例
2017/03/21 Python
JSON Web Tokens的实现原理
2017/04/02 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
python用post访问restful服务接口的方法
2018/12/07 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
python实现抽奖小程序
2020/04/15 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
python pygame实现五子棋小游戏
2020/10/26 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
python中的列表与元组的使用
2019/08/08 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
七年级地理教学反思
2014/01/26 职场文书
会计专业大学生职业生涯规划书
2014/02/11 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
人力资源主管职责范本
2014/03/05 职场文书
投标承诺书范本
2014/03/27 职场文书
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
委托公证书样本
2015/01/23 职场文书
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis
Win11软件图标固定到任务栏
2022/04/19 数码科技