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 相关文章推荐
用innerhtml提高页面打开速度的方法
Aug 02 Javascript
JavaScript作用域与作用域链深入解析
Dec 06 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
使用原生js封装的ajax实例(兼容jsonp)
Oct 12 Javascript
js实现简单选项卡功能
Mar 23 Javascript
微信小程序实现选项卡效果
Nov 06 Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 Javascript
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
使用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 图片水印类代码
2012/08/27 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
php socket通信简单实现
2016/11/18 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
jquery 3D球状导航的文章分类
2010/07/06 Javascript
javascript按位非运算符的使用方法
2013/11/14 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
详解angular中通过$location获取路径(参数)的写法
2017/03/21 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
微信小程序 蓝牙的实现实例代码
2017/06/27 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
分析JavaScript数组操作难点
2017/12/18 Javascript
Vue.js 2.x之组件的定义和注册图文详解
2018/06/19 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
深入理解python中的浅拷贝和深拷贝
2016/05/30 Python
Python Paramiko模块的安装与使用详解
2016/11/18 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
python3注册全局热键的实现
2020/03/22 Python
Django缓存Cache使用详解
2020/11/30 Python
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
介绍一下JNDI的基本概念
2013/07/26 面试题
电话销售经理岗位职责
2013/12/07 职场文书
竞争上岗演讲稿范文
2014/05/12 职场文书
美食节目策划方案
2014/05/31 职场文书
文明城市创建标语
2014/06/16 职场文书
《童年的发现》教学反思
2016/02/18 职场文书