Skip to content

Latest commit

 

History

History
305 lines (233 loc) · 9.13 KB

12 js中的数据转换.md

File metadata and controls

305 lines (233 loc) · 9.13 KB

数据类型转换

PaddyWang

字符串转数字

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`类型