文章目录

  • 【JavaScript】 数据类型转换
  • 一. 转换为Number
  • 各种数据类型转换情况
  • 方式一 调用Number()函数
  • 方式二 调用parseInt()或parseFloat()
  • 方式三 使用算术运算符
  • 方式四 +号
  • 方式五 tofixed()方法
  • 转Number的案例
  • (1) 计算年龄
  • (2) 简单的加法运算
  • 二. 转换为String
  • 方式一 调用被转换数据的toString()方法
  • 方式二 调用String()函数
  • 方式三 任意的数据类型 +" "
  • 字符串拼接
  • 三. 转换为布尔值
  • 方式一 使用Boolean()函数
  • 方式二 两次非运算


【JavaScript】 数据类型转换

类型转换就是指将其他的数据类型，转换为String、Number 或 Boolean。

一. 转换为Number

各种数据类型转换情况

转换前类型

描述

字符串

如果字符串是一个合法的数字，则直接转换为对应的数字。

如果字符串是一个非法的数字，则转换为NaN。

如果是一个空串或纯空格的字符串，则转换为0。

布尔值

true转换为1

false转换为0

空值

null转换为0

undefined

undefined 转换为NaN

总结：

  • 不能被转换的值：‘hello(非数字)’、undefined 转换为 NaN
  • 不存在的值：null、false 转换为 0

方式一 调用Number()函数

调用Number()函数会进行强制类型转换**（在开发中用的不多）**

特点：

  • 可以把一个变量强制转换成数值类型
  • 可以转换小数，会保留小数
  • 可以转换布尔值
  • 遇到不可转换的都会返回NaN
var s = "123";
console.log(Number(s));// 123
console.log(Number(false)); // 布尔值false转换成0
console.log(Number('100')); // 100
console.log(Number('hello')); // NaN
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN

方式二 调用parseInt()或parseFloat()

这两个函数专门用来将一个字符串转换为数字的，属于强制类型转换。

parseInt()

可以将一个字符串中的javascript 整形转换 javascript转换数据类型_javascript提取出来（向下取整），并转换为Number。

var a = "123.456px";
a = parseInt(a); 
console.log(a); // 123
console.log('rem120px'); // NaN

特点：

  • 从第一位开始检查，是数字就转换，直到一个不是数字的内容就结束了
  • 开头就不是数字，那么直接返回NaN
  • 不认识小数点，只能保留整数

注：如果需要可以在parseInt()中指定一个第二个参数，来指定进制。

parseFloat()

可以将一个字符串中的javascript 整形转换 javascript转换数据类型_javascript_02提取出来，并转换为Number。

特点：

  • 从第一位开始检查，是数字就转换，直到一个不是数字的内容就结束了
  • 开头就不是数字，那么直接返回 NaN
  • 认识一次小数点
var a = "123.456px";
a = parseFloat(a); 
console.log(a);// 123.456

方式三 使用算术运算符

除了加法以外的数学运算

如果是数字格式的字符串，除了加法以外的数学运算符,其他的运算符会将数字格式的字符串转换成真正的数字进行运算，如果无法转换成真正的数字，输出NaN。

console.log('12' - 0);// 12
console.log('12' - '10');// 2
console.log('3' / '5'); // 0.6
console.log('3' * '5'); // 15
console.log('3' * 'abc'); // NaN

原理：和Number()函数一样。

方式四 +号

正号，使用在某个数字的前面，具有转换数字的能力。

console.log(+false); // 0
console.log(+'100'); // 100
console.log(+'hello'); // NaN
console.log(+null); // 0
console.log(+undefined); // NaN
console.log(+''); // 0

方式五 tofixed()方法

保留括号里面的数字的小数。结果为字符串格式。(银行家算法)

var num = 2.3445566;
var a = num.toFixed(2);
console.log(a);// 2.34

转Number的案例

(1) 计算年龄

var year = prompt('请输入您的出生年份：');
var age = 2022 - year;
alert('您今年'+age+'岁了');

(2) 简单的加法运算

var a = prompt('请输入第一个值：');
var b = prompt('请输入第二个值：');
var c = parseInt(a) + parseInt(b);
alert('结果为：' + c);

二. 转换为String

方式一 调用被转换数据的toString()方法

变量.toString(),将前面的变量变成字符串格式。（强制类型转换）

var a = 10;
console.log(a.toString()); // 字符串10
  • $\color{red} {注意} $：这个方法不适用于null和undefined。因为null和undefined这两个类型的数据中没有方法，所以调用toString()时会报错。

方式二 调用String()函数

可以把一个变量强制转换成字符串类型(添加引号)（强制类型转换）

console.log(String(true));
console.log(String(false));
console.log(String(0));
console.log(String(100));

原理：

  • 对于Number Boolean String都会调用他们的toString()方法来将其转换为字符串。
  • 对于null值，直接转换为字符串"null"。对于undefined直接转换为字符串"undefined"。

方式三 任意的数据类型 +" "

任意的数据类型 +" "都会进行隐式的类型转换，结果为字符串。

var a = true;
a = a + "";

原理：和String()函数一样

字符串拼接

普通的加法运算符，两边出现字符串，会变成拼接。

console.log(true + 1); // 2
console.log(2 + 1); // 3
console.log(null + null); // 0

特殊情况 (面试题)

console.log(0.1 + 0.2); // 0.30000000000000004  
console.log(0.2 + 0.4); // 0.6000000000000001
console.log(0.2 + 0.3); // 0.5

因为IEEE754标准对于浮点数(小数float)产生的误差造成的

解决方式(转换成整数)

console.log((0.1 * 10 + 0.2 * 10) / 10); // 0.3

三. 转换为布尔值

方式一 使用Boolean()函数

可以把一个变量强制转换成布尔类型（强制类型转换）

// 以下结果全为：false
console.log(Boolean(0));
console.log(Boolean(''));
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log(Boolean(NaN));
console.log(Boolean(false));

规律：数字非0即真，字符串非空即真。

转换的情况

转换前类型

转换后

字符串

除了空串其余全是true

数值

除了0和NaN其余的全是true

null、undefined

都是false

对象

都是true

总结：

  • 代表javascript 整形转换 javascript转换数据类型_前端_03会被转换为false，如：’ '、0、NaN、null、undefined
  • 其余值都会转换为true

方式二 两次非运算

为任意的数据类型做两次非运算（隐式类型转换）

var a = "hello";
a = !!a; // true