JavaScript中的数据类型转换
数据类型转换
字符串转数字
var str1 = '123';
var str2 = '123.456';
var str3 = '123abc';
var str4 = 'abc123';
console.log(str1 + ' --- ' + typeof str1); // => 123 --- string
console.log('-----+-----');
var a1 = str1 + 0;
console.log(a1 + ' --- ' + typeof a1); // => 1230 --- string
console.log('-----------');
var b1 = str1 - 0;
var b2 = str2 - 0;
var b3 = str3 - 0;
var b4 = str4 - 0;
console.log(b1 + ' --- ' + typeof b1); // => 123 --- number
console.log(b2 + ' --- ' + typeof b2); // => 123.456 --- number
console.log(b3 + ' --- ' + typeof b3); // => NaN --- number
console.log(b4 + ' --- ' + typeof b4); // => NaN --- number
console.log('-----*-----');
var c1 = str1 * 1;
var c2 = str2 * 1;
var c3 = str3 * 1;
var c4 = str4 * 1;
console.log(c1 + ' --- ' + typeof c1); // => 123 --- number
console.log(c2 + ' --- ' + typeof c2); // => 123.456 --- number
console.log(c3 + ' --- ' + typeof c3); // => NaN --- number
console.log(c4 + ' --- ' + typeof c4); // => NaN --- number
console.log('-----/-----');
var d1 = str1 / 1;
var d2 = str2 / 1;
var d3 = str3 / 1;
var d4 = str4 / 1;
console.log(d1 + ' --- ' + typeof d1); // => 123 --- number
console.log(d2 + ' --- ' + typeof d2); // => 123.456 --- number
console.log(d3 + ' --- ' + typeof d3); // => NaN --- number
console.log(d4 + ' --- ' + typeof d4); // => NaN --- number
console.log('-----%-----');
var h1 = str1 % 1;
var h2 = str2 % 1;
var h3 = str3 % 1;
var h4 = str4 % 1;
console.log(h1 + ' --- ' + typeof h1); // => 0 --- number
console.log(h2 + ' --- ' + typeof h2); // => 0.45600000000000307
--- number
console.log(h3 + ' --- ' + typeof h3); // => NaN --- number
console.log(h4 + ' --- ' + typeof h4); // => NaN --- number
console.log('-----Number-----');
var e1 = Number(str1);
var e2 = Number(str2);
var e3 = Number(str3);
var e4 = Number(str4);
console.log(e1 + ' --- ' + typeof e1); // => 123 --- number
console.log(e2 + ' --- ' + typeof e2); // => 123.456 --- number
console.log(e3 + ' --- ' + typeof e3); // => NaN --- number
console.log(e4 + ' --- ' + typeof e4); // => NaN --- number
console.log('-----parseInt-----');
var f1 = parseInt(str1);
var f2 = parseInt(str2);
var f3 = parseInt(str3);
var f4 = parseInt(str4);
console.log(f1 + ' --- ' + typeof f1); // => 123 --- number
console.log(f2 + ' --- ' + typeof f2); // => 123 --- number
console.log(f3 + ' --- ' + typeof f3); // => 123 --- number
console.log(f4 + ' --- ' + typeof f4); // => NaN --- number
console.log('-----parseFloat-----');
var g1 = parseFloat(str1);
var g2 = parseFloat(str2);
var g3 = parseFloat(str3);
var g4 = parseFloat(str4);
console.log(g1 + ' --- ' + typeof g1); // => 123 --- number
console.log(g2 + ' --- ' + typeof g2); // => 123.456 --- number
console.log(g3 + ' --- ' + typeof g3); // => 123 --- number
console.log(g4 + ' --- ' + typeof g4); // => NaN --- number
conclusion:
在js中遇到 `-` 、`*` 、`/` 、`%` 操作符时
js引擎会尝试着先将操作符两边的数据转换成`number`类型
如果成功则进行相应的操作,如果不成功则`NaN`
在使用`Number`函数进行字符串强制转换数字类型时
无论是整数还是小数类型的字符串都会转换成相应的`number`类型
字符串中含有除小数点之外的非数字字符时`NaN`
`parseInt`和`parseFloat`方法可以强制转换数字类型的字符串
而且可以转换`数字+字母`(`"123abc"`)类型的字符串
不过遇到`字母+数字`(`"abc123"`)就会`NaN`
数字转字符串
var num = 123.456;
var arr = [1, 2, 3];
console.log(num + '---' + typeof num); // => 123.456---number
console.log(arr + '---' + typeof arr); // => 1,2,3---object
console.log('------');
var a1 = num + '';
var a2 = num - '';
var a3 = arr + '';
var a4 = arr - '';
console.log(a1 + '---' + typeof a1); // => 123.456---string
console.log(a2 + '---' + typeof a2); // => 123.456---number
console.log(a3 + '---' + typeof a3); // => 1,2,3---string
console.log(a4 + '---' + typeof a4); // => NaN---number
console.log('------');
var b1 = String(num);
var b2 = String(arr);
console.log(b1 + '---' + typeof b1); // => 123.456---string
console.log(b2 + '---' + typeof b2); // => 1,2,3---string
console.log('------');
var c1 = num.toString();
var c2 = arr.toString();
console.log(c1 + '---' + typeof c1); // => 123.456---string
console.log(c2 + '---' + typeof c2); // => 1,2,3---string
conclusion:
当一个数字类型的数据和空(`''`)字符串进行加(`+`)运算时
会自动转换成`string`类型
构造函数`String`可以实现字符串的转换
在进行对象转换时其实调用了`toString`方法
toString
可以进行字符串转换
数字和字符转换布尔类型
var a = 123;
var b = '123';
var c = 'abc';
var d = null;
var e = 0;
var f = undefined;
var g = [];
var h = {};
var i = c - 1;
var j = '';
var k = '0';
console.log(i); // => NaN
var a1 = !!a;
var b1 = !!b;
var c1 = !!c;
var d1 = !!d;
var e1 = !!e;
var f1 = !!f;
var g1 = !!g;
var h1 = !!h;
var i1 = !!i;
var j1 = !!j;
var k1 = !!k;
console.log(a1 + '---' + typeof a1); // => true---boolean
console.log(b1 + '---' + typeof b1); // => true---boolean
console.log(c1 + '---' + typeof c1); // => true---boolean
console.log(d1 + '---' + typeof d1); // => false---boolean
console.log(e1 + '---' + typeof e1); // => false---boolean
console.log(f1 + '---' + typeof f1); // => false---boolean
console.log(g1 + '---' + typeof g1); // => true---boolean
console.log(h1 + '---' + typeof h1); // => true---boolean
console.log(i1 + '---' + typeof i1); // => false---boolean
console.log(j1 + '---' + typeof j1); // => false---boolean
console.log(k1 + '---' + typeof k1); // => true---boolean
console.log('------');
var a2 = Boolean(a);
var b2 = Boolean(b);
var c2 = Boolean(c);
var d2 = Boolean(d);
var e2 = Boolean(e);
var f2 = Boolean(f);
var g2 = Boolean(g);
var h2 = Boolean(h);
var i2 = Boolean(i);
var j2 = Boolean(j);
var k2 = Boolean(k);
console.log(a2 + '---' + typeof a2); // => true---boolean
console.log(b2 + '---' + typeof b2); // => true---boolean
console.log(c2 + '---' + typeof c2); // => true---boolean
console.log(d2 + '---' + typeof d2); // => false---boolean
console.log(e2 + '---' + typeof e2); // => false---boolean
console.log(f2 + '---' + typeof f2); // => false---boolean
console.log(g2 + '---' + typeof g2); // => true---boolean
console.log(h2 + '---' + typeof h2); // => true---boolean
console.log(i2 + '---' + typeof i2); // => false---boolean
console.log(j2 + '---' + typeof j2); // => false---boolean
console.log(k2 + '---' + typeof k2); // => true---boolean
console.log('------');
conclusion:
可以使用运算符进行隐式转换(`!!`)
也可以通过构造函数强制转换
`null`、数字`0`、`undefined`、空字符串`''`、`NaN` 转换成`false`
布尔值转数字或字符串
var bool1 = true;
var bool2 = false;
console.log(bool1+'---'+typeof bool1); // => true---boolean
var n1 = bool1.toString();
var n2 = bool2.toString();
console.log(n1+'---'+typeof n1); // => true---string
console.log(n2+'---'+typeof n2); // => false---string
console.log('------');
var m1 = bool1 + '';
var m2 = bool2 + '';
console.log(m1 +'---'+typeof m1); // => true---string
console.log(m2 +'---'+typeof m2); // => false---string
console.log('------');
var s1 = bool1 - 0;
var s2 = bool2 - 0;
console.log(s1 + '---' + typeof s1); // => 1---number
console.log(s2 + '---' + typeof s2); // => 0---number
console.log('------');
var q1 = bool1 - '';
var q2 = bool2 - '';
console.log(q1 + '---' + typeof q1); // => 1---number
console.log(q2 + '---' + typeof q2); // => 0---number
console.log('------');
var w1 = bool1 * 1;
var w2 = bool1 / 1;
console.log(w1 + '---' + typeof w1); // => 1---number
console.log(w2 + '---' + typeof w2); // => 1---number
console.log('------');
var z1 = bool1 + 0;
console.log(z1 + '---' + typeof z1); // => 1---number
conclusion:
在`boolean`转`number`时
`true`转换成 `1`
`false` 转换成 `0`
在`boolean`转`string`时
`true`转换成`'true'`字符串
` false`转换成字符串`'false'`
在进行隐式转换时,在和字符串进行` + `运算时转换成 `string`类型
在和数字进行` + `运算时转换成 `number`类型
在进行` - `、` * ` 、` / `运算时转换成`number`类型