JS-转换类型

转换为字符串类型

• 将其它基本数据类型转换为字符串类型的第一种方式

  1. 对于Number类型和Boolean类型来说, 直接利用变量调用toString()方法即可
     toString()方法会将调用者转换为字符串, 并且会将转换后的结果返回给我们并且不会修改调用者原有的值。 toString()方法是可以接收参数的, 参数代表告诉解析引擎, 需要将Number类型转换为多少进制
     toString(2) 代表需要将调用者转换为2进制
     toString(8) 代表需要将调用者转换为8进制
     toString(16) 代表需要将调用者转换为16进制

  2. 对于null和undefined来说, 不能通过调用toString()方法来转换

// number类型
var num = 123;
var res = num.toString();
console.log(res); // 在谷歌浏览器中String类型输出之后是灰色的
console.log(typeof res); // string
console.log(num); // 在谷歌浏览器中Number类型输出之后是蓝色的
console.log(typeof num);
// Boolean布尔类型
var flag = true;
var res2 = flag.toString();
console.log(res2);
// null和 undefined
var n = null;
var res3 = n.toString(); // 会报错
var u = undefined;
var res4 = u.toString(); // 会报错

• 将其它基本数据类型转换为字符串类型的第二种方式

  由于toString()方法不能将null, undefined转换为字符串. 所以就有了第二种方式, 将需要转换的数据传递给String()函数

var num = 123;
var res1 = String(num);
console.log(res1);  // 123
console.log(typeof res1); // string

var flag = false;
var res2 = String(flag);
console.log(res2); // false

var n = null;
var res3 = String(n);
console.log(res3); // null

var u = undefined;
var res4 = String(u);
console.log(res4); // undefined

• 将其它基本数据类型转换为字符串类型的第三种方式

  1. toString()方法只能将Number和Boolean类型转换为字符串
  2. String()函数可以将Number/Boolean/null/undefined转换为字符串

  3. 利用算数运算符的加法运算来换, Number/Boolean/null/undefined转换为字符串
  格式: 需要转换的数据 + " " ;

var num = 123;
var flag = true;
var n = null;
var u = undefined;

// 任何类型和字符串相加, 都会先转换为字符串之后再相加
var res1 = num + ""; // 123 + ""  --> "123" + "" --> "123"
console.log(res1); // 123
console.log(typeof res1); // string

var res2 = flag + "";
console.log(res2); // true

var res3 = n + "";
console.log(res3); // null

var res4 = u + "";
console.log(res4); // undefined

转换为Number类型

• 转换为Number类型第一种方式:
  将需要转换的数据传递给Number()函数即可

  1. 对于字符串:
     如果字符串中都是数字, 那么就正常转换
     如果字符串中不仅仅有数字, 那么转换为NaN
     如果字符串中没有内容"" " ", 那么就转换为0

  2. 对于布尔类型: true转换为1, false转换为0

  3. 对于null: 转换为0

  4. 对于undefined: 转换为NaN

  总结:
  空字符串(""/" ") /false /null --> 0
  不仅仅包含数字的字符串 和 undefined --> 转换为NaN
  其它的均可正常转换

• 转换为Number类型第二种方式:
  利用算数运算符来转换, 在需要转换的类型前面加上+加号或者-减号即可
  注意点:
  +加号不会改变数据的正负性
  -减号会改变数据的正负性

var str1 = "123";
var res1 = +str1;
console.log(res1); // 123
console.log(typeof res1); // number

var res2 = -str1;
console.log(res2); // -123
console.log(typeof res2); // number

var str2 = "3.14";
var res3 = +str2;
console.log(res3); // 3.14

var flag1 = true;
var res4 = +flag1;
console.log(res4); // 1

var flag2 = false;
var res5 = +flag2;
console.log(res5); // 0

var n = null;
var res6 = +n;
console.log(res6); // 0

var u = undefined;
var res7 = +u;
console.log(res7); // NaN

• 转换为Number类型第三种方式:

  1. 通过Number函数或者通过+-运算符转换, 都不能转换复杂的字符串
     例如: "12px"

  2. 所以就有第三种转换的方式, 通过parseInt()/parseFloat()函数
     parseInt: 只能提取整数
     parseFloat: 可以提取小数

  注意点:

  • parseInt/parseFloat , 会从左至右的提取, 一旦被中断后续的就提取不到了
  • 对于parseFloat来说, 只能提取一个点, 第二个点会被中断

var str1 = "3.14px";
var res1 = parseInt(str1);
console.log(res1); // 3
console.log(typeof res1); // number

var res2 = parseFloat(str1);
console.log(res2); // 3.14
console.log(typeof res2); // number

var str = "12px666px";
var res1 = parseInt(str);
console.log(res1); // 12

var str = "3.14.15px";
var res1 = parseFloat(str);
console.log(res1); // 3.14

转换为Boolean类型

• 将需要转换的数据传递给Boolean()函数即可

  1. 对于字符串而言:
     只要不是空字符串(没有任何内容), 都会转换为 false
     只要字符串中有内容(包含空格/Table), 都会转换为 true

  2. 对于Number类型而言: 只要不是 0 都会转换为 true, 只有0会转换为 false

  3. 对于 null 和 undefined 而言, 都会转换为 false

  4. 对于 NaN 也会转换为false

  总结: "" / 0 / null / undefined / NaN --> false