程序博客网 > 安卓手机变win7软件

javascript数据类型转换

来源：互联网 发布：安卓手机变win7软件 编辑：程序博客网 时间：2024/06/08 06:08

原文：http://www.css88.com/archives/5199

JavaScript是一种动态类型语言，变量是没有类型的，可以随时赋予任意值。但是，数据本身和各种运算是有类型的，因此运算时变量需要转换类型，而且转换非常灵活。大多数情况下，这种数据类型转换是自动的，但是有时也需要手动强制转换。

1. 强制转换

强制转换主要指使用Number、String和Boolean三个构造函数，手动将各种类型的值，转换成数字、字符串或者布尔值。

1.1 Number函数：强制转换成数值

使用Number函数，可以将任意类型的值转化成数字。

（1）原始类型值的转换规则

  • 数值：转换后还是原来的值。
  • 字符串：如果可以被解析为数值，则转换为相应的数值，否则得到NaN。空字符串转为0。
  • 布尔值：true转成1，false转成0。
  • undefined：转成NaN。
  • null：转成0。

  1. Number("324") // 324
  2.  
  3. Number("324abc") // NaN
  4.  
  5. Number("") // 0
  6.  
  7. Number(false) // 0
  8.  
  9. Number(undefined) // NaN
  10.  
  11. Number(null) // 0

Number函数会自动过滤一个字符串前导和后缀的空格。

  1. Number('\t\v\r12.34\n ')

（2）对象的转换规则

对象的转换规则比较复杂。

  • 先调用对象自身的valueOf方法，如果该方法返回原始类型的值（数值、字符串和布尔值），则直接对该值使用Number方法，不再进行后续步骤。
  • 如果valueOf方法返回复合类型的值，再调用对象自身的toString方法，如果toString方法返回原始类型的值，则对该值使用Number方法，不再进行后续步骤。
  • 如果toString方法返回的是复合类型的值，则报错。
  1. Number({a:1})
  2. // NaN

上面代码等同于

  1. if (typeof {a:1}.valueOf() === 'object'){
  2.     Number({a:1}.toString());
  3. } else {
  4.     Number({a:1}.valueOf());
  5. }

上面代码的valueOf方法返回对象本身（{a:1}），所以对toString方法的返回值“[object Object]”使用Number方法，得到NaN。

如果toString方法返回的不是原始类型的值，结果就会报错。

  1. var obj = {
  2.     valueOf: function () {
  3.             console.log("valueOf");
  4.             return {};
  5.     },
  6.     toString: function () {
  7.             console.log("toString");
  8.             return {}; 
  9.     }
  10. };
  11.  
  12. Number(obj)
  13. // TypeError: Cannot convert object to primitive value

上面代码的valueOf和toString方法，返回的都是对象，所以转成数值时会报错。

从上面的例子可以看出，valueOf和toString方法，都是可以自定义的。

  1. Number({valueOf:function (){return 2;}})
  2. // 2
  3.  
  4. Number({toString:function(){return 3;}})
  5. // 3
  6.  
  7. Number({valueOf:function (){return 2;},toString:function(){return 3;}})
  8. // 2

上面代码对三个对象使用Number方法。第一个对象返回valueOf方法的值，第二个对象返回toString方法的值，第三个对象表示valueOf方法先于toString方法执行。

1.2 String函数：强制转换成字符串

使用String函数，可以将任意类型的值转化成字符串。规则如下：

（1）原始类型值的转换规则

  • 数值：转为相应的字符串。
  • 字符串：转换后还是原来的值。
  • 布尔值：true转为“true”，false转为“false”。
  • undefined：转为“undefined”。
  • null：转为“null”。
  1. String(123) // "123"
  2.  
  3. String("abc") // "abc"
  4.  
  5. String(true) // "true"
  6.  
  7. String(undefined) // "undefined"
  8.  
  9. String(null) // "null"

（2）对象的转换规则

如果要将对象转为字符串，则是采用以下步骤。

  1. 先调用toString方法，如果toString方法返回的是原始类型的值，则对该值使用String方法，不再进行以下步骤。
  2. 如果toString方法返回的是复合类型的值，再调用valueOf方法，如果valueOf方法返回的是原始类型的值，则对该值使用String方法，不再进行以下步骤。
  3. 如果valueOf方法返回的是复合类型的值，则报错。

String方法的这种过程正好与Number方法相反。

  1. String({a:1})
  2. // "[object Object]"

上面代码相当于下面这样。

  1. String({a:1}.toString())
  2. // "[object Object]"

如果toString方法和valueOf方法，返回的都不是原始类型的值，则String方法报错。

  1. var obj = {
  2.     valueOf: function () {
  3.             console.log("valueOf");
  4.             return {}; 
  5.     },
  6.     toString: function () {
  7.             console.log("toString");
  8.             return {}; 
  9.     }
  10. };
  11.  
  12. String(obj)
  13. // TypeError: Cannot convert object to primitive value

下面是一个自定义toString方法的例子。

  1. String({toString:function(){return 3;}})
  2. // "3"
  3.  
  4. String({valueOf:function (){return 2;}})
  5. // "[object Object]"
  6.  
  7. String({valueOf:function (){return 2;},toString:function(){return 3;}})
  8. // "3"

上面代码对三个对象使用String方法。第一个对象返回toString方法的值（数值3），然后对其使用String方法，得到字符串“3”；第二个对象返回的还是toString方法的值（”[object Object]”），这次直接就是字符串；第三个对象表示toString方法先于valueOf方法执行。

1.3 Boolean函数：强制转换成布尔值

使用Boolean函数，可以将任意类型的变量转为布尔值。

（1）原始类型值的转换方法

以下六个值的转化结果为false，其他的值全部为true。

  • undefined
  • null
  • -0
  • +0
  • NaN
  • ”（空字符串）
  1. Boolean(undefined) // false
  2.  
  3. Boolean(null) // false
  4.  
  5. Boolean(0) // false
  6.  
  7. Boolean(NaN) // false
  8.  
  9. Boolean('') // false

（2）对象的转换规则

所有对象的布尔值都是true，甚至连false对应的布尔对象也是true。

  1. Boolean(new Boolean(false))
  2. // true

请注意，空对象{}和空数组[]也会被转成true。

  1. Boolean([]) // true
  2.  
  3. Boolean({}) // true

2.自动转换

当遇到以下几种情况，JavaScript会自动转换数据类型：

  • 不同类型的数据进行互相运算；
  • 对非布尔值类型的数据求布尔值;
  • 对非数值类型的数据使用一元运算符（即“+”和“-”）。

2.1 自动转换为布尔值

当JavaScript遇到预期为布尔值的地方（比如if语句的条件部分），就会将非布尔值的参数自动转换为布尔值。它的转换规则与上面的“强制转换成布尔值”的规则相同，也就是说，在预期为布尔值的地方，系统内部会自动调用Boolean方法。

因此除了以下六个值，其他都是自动转为true：

  • undefined
  • null
  • -0
  • +0
  • NaN
  • ”（空字符串）
  1. if (!undefined && !null && !0 && !NaN && !''){
  2.     console.log('true');
  3. }
  4. // true

2.1 自动转换为字符串

当JavaScript遇到预期为字符串的地方，就会将非字符串的数据自动转为字符串，转换规则与“强制转换为字符串”相同。

字符串的自动转换，主要发生在加法运算时。当一个值为字符串，另一个值为非字符串，则后者转为字符串。

  1. '5' + 1 // '51'
  2. 1 + '5'  // '15'
  3. 1 + 2 + '5'  // '35'
  4. '5' + true // "5true"
  5. '5' + false // "5false"
  6. '5' + {} // "5[object Object]"
  7. '5' + [] // "5"
  8. '5' + function (){} // "5function (){}"
  9. '5' + undefined // "5undefined"
  10. '5' + null // "5null"

2.3 自动转换为数值

当JavaScript遇到预期为数值的地方，就会将参数值自动转换为数值，转换规则与“强制转换为数值”相同。

除了加法运算符有可能把运算子转为字符串，其他运算符都会把两侧的运算子自动转成数值。

  1. '5' - '2' // 3
  2. '5' * '2' // 10
  3. true - 1 // 0
  4. false - 1 // -1
  5. '1' - 1 // 0
  6. '5'*[] // 0
  7. false/'5' // 0
  8. 'abc'-1 // NaN

上面都是二元算术运算符的例子，JavaScript的两个一元算术运算符——正号和负号——也会把运算子自动转为数值。

  1. +'abc' // NaN
  2. -'abc' // NaN
  3. +true // 1
  4. -false // 0

2.4 小结

由于自动转换有很大的不确定性，而且不易除错，建议在预期为布尔值、数值、字符串的地方，全部使用Boolean、Number和String方法进行显式转换。

3. 加法运算符的类型转化

加法运算符（+）需要特别讨论，因为它可以完成两种运算（加法和字符连接），所以不仅涉及到数据类型的转换，还涉及到确定运算类型。

3.1 三种情况

加法运算符的类型转换，可以分成三种情况讨论。

（1）运算子之中存在字符串

两个运算子之中，只要有一个是字符串，则另一个不管是什么类型，都会被自动转为字符串，然后执行字符串连接运算。前面的《自动转换为字符串》一节，已经举了很多例子。

（2）两个运算子都为数值或布尔值

这种情况下，执行加法运算，布尔值转为数值（true为1，false为0）。

  1. true + 5 // 6
  2.  
  3. true + true // 2

（3）运算子之中存在对象

运算子之中存在对象（或者准确地说，存在非原始类型的值），则先调用该对象的valueOf方法。如果返回结果为原始类型的值，则运用上面两条规则；否则继续调用该对象的toString方法，对其返回值运用上面两条规则。

  1. 1 + [1,2]
  2. // "11,2"

上面代码的运行顺序是，先调用[1,2].valueOf()，结果还是数组[1,2]本身，则继续调用[1,2].toString()，结果字符串“1,2”，所以最终结果为字符串“11,2”。

  1. 1 + {a:1}
  2. // "1[object Object]"

对象{a:1}的valueOf方法，返回的就是这个对象的本身，因此接着对它调用toString方法。({a:1}).toString()默认返回字符串”[object Object]”，所以最终结果就是字符串“1[object Object]”

有趣的是，如果更换上面代码的运算次序，就会得到不同的值。

  1. {a:1} + 1
  2. // 1

原来此时，JavaScript引擎不将{a:1}视为对象，而是视为一个代码块，这个代码块没有返回值，所以被忽略。因此上面的代码，实际上等同于 {a:1};+1 ，所以最终结果就是1。为了避免这种情况，需要对{a:1}加上括号。

  1. ({a:1})+1
  2. "[object Object]1"

将{a:1}放置在括号之中，由于JavaScript引擎预期括号之中是一个值，所以不把它当作代码块处理，而是当作对象处理，所以最终结果为“[object Object]1”。

  1. 1 + {valueOf:function(){return 2;}}
  2. // 3

上面代码的valueOf方法返回数值2，所以最终结果为3。

  1. 1 + {valueOf:function(){return {};}}
  2. // "1[object Object]"

上面代码的valueOf方法返回一个空对象，则继续调用toString方法，所以最终结果是“1[object Object]”。

  1. 1 + {valueOf:function(){return {};}, toString:function(){return 2;}}
  2. // 3

上面代码的toString方法返回数值2（不是字符串），则最终结果就是数值3。

  1. 1 + {valueOf:function(){return {};}, toString:function(){return {};}}
  2. // TypeError: Cannot convert object to primitive value

上面代码的toString方法返回一个空对象，JavaScript就会报错，表示无法获得原始类型的值。

3.2 四个特殊表达式

有了上面这些例子，我们再进一步来看四个特殊表达式。

（1）空数组 + 空数组

  1. [] + []
  2. // ""

首先，对空数组调用valueOf方法，返回的是数组本身；因此再对空数组调用toString方法，生成空字符串；所以，最终结果就是空字符串。

（2）空数组 + 空对象

  1. [] + {}
  2. // "[object Object]"

这等同于空字符串与字符串“[object Object]”相加。因此，结果就是“[object Object]”。

（3）空对象 + 空数组

  1. {} + []
  2. // 0

JavaScript引擎将空对象视为一个空的代码块，加以忽略。因此，整个表达式就变成“+ []”，等于对空数组求正值，因此结果就是0。转化过程如下：

  1. + []
  2. // Number([])
  3. // Number([].toString())
  4. // Number("")
  5. // 0

如果JavaScript不把前面的空对象视为代码块，则结果为字符串“[object Object]”。

  1. ({}) + []
  2. // "[object Object]"

（4）空对象 + 空对象

  1. {} + {}
  2. // NaN

JavaScript同样将第一个空对象视为一个空代码块，整个表达式就变成“+ {}”。这时，后一个空对象的ValueOf方法得到本身，再调用toSting方法，得到字符串“[object Object]”，然后再将这个字符串转成数值，得到NaN。所以，最后的结果就是NaN。转化过程如下：

  1. + {}
  2. // Number({})
  3. // Number({}.toString())
  4. // Number("[object Object]")

看一个Date对象的特殊例子：

  1. var d = new Date();
  2. console.log(d); //"Sun Sep 28 2014 14:12:03 GMT+0800 (CST)"
  3. console.log(+d); //1411884723677
  4. console.log(Number(d));//1411884723677
  5. console.log(Number(d.toString())); //NaN

如果，第一个空对象不被JavaScript视为空代码块，就会得到“[object Object][object Object]”的结果。

  1. ({}) + {}
  2. // "[object Object][object Object]"
  3.  
  4. ({} + {})
  5. // "[object Object][object Object]"
  6.  
  7. console.log({} + {})
  8. // "[object Object][object Object]"
  9.  
  10. var a = {} + {};
  11. a
  12. // "[object Object][object Object]"

需要指出的是，对于第三和第四种情况，Node.js的运行结果不同于浏览器环境。

  1. {} + {}
  2. // "[object Object][object Object]"
  3.  
  4. {} + []
  5. // "[object Object]"

可以看到，Node.js没有把第一个空对象视为代码块。原因是Node.js的命令行环境，内部执行机制大概是下面的样子：

  1. eval.call(this,"(function(){return {} + {}}).call(this)")

Node.js把命令行输入都放在eval中执行，所以不会把起首的大括号理解为空代码块加以忽略。

4. 参考链接

  • Axel Rauschmayer, What is {} + {} in JavaScript?
  • Axel Rauschmayer, JavaScript quirk 1: implicit conversion of values
  • Benjie Gillam, Quantum JavaScript?

来自《JavaScript 标准参考教程（alpha）》，做了部分修改。


0 0
安卓手机变win7软件 安卓手机变win7软件
原创粉丝点击
热门IT博客
邮箱搜索软件邮箱搜索软件
为什么淘宝店铺被释放为什么淘宝店铺被释放
html导航页面源码
windows ping 压力
洛阳青峰网络人事
vb时间触发事件
语音聊天软件下载
男生围巾知乎
fugue免流源码
杭州淘宝拍摄基地
android耗电量优化
《java编程思想》 下载
毕业论文选题 知乎
珠海鲁班软件培训
吉他教学视频软件
网络答题系统
在线客服软件有哪些
mac pro type c
欧洲工商管理学院 知乎
过目不忘 知乎
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 陈壮赵铁柱雪梅大结局 沈浪苏若雪大结局 苏若雪沈浪大结局 沈浪苏若雪大结局1400 幕柔雪番外篇大结局作品 禁忌边缘苏雪大结局 雪怪大冒险 王婿叶凡唐大若雪 雷厉风慕雪大结局目录 萧轻雪目录全文大结局 t大陈若雪 雷厉风慕雪大结局344章 傻子和雪萍大结局 倾城雪大结局 北雪大少续写 形容雪大的成语 雪大创始人 雪大教育 形容雪大的词语 陈壮赵铁柱雪梅 都市神豪林云王雪大结 女人梦见下特别大的雪 雪天盐 大雪天 雪天图片 雪天婚纱照 雪天防滑鞋 雪天 东方宁心雪天傲全章节阅读 雪天唯美诗句 雪天傲东方宁心全文免费阅读 雪天唯美语录 雪天盐多少钱一包 血戮魔帝 落雪天痕 雪天在高速公路上驾驶时 车辆在雪天临时停车开什么灯 你的心里是大雪天吗 带着空间去星际 冰冰的雪天 鸿蒙大帝系统 冰冰的雪天 雪奈 雪奈的茶

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里