跳到主要内容

JavaScript 数据类型转换

JavaScript 中有多种数据类型,不同数据类型之间经常需要转换,比如数字和字符串、字符串转数字等。本文就来介绍,在 JavaScript 中实现类型转换的各种方法。

转换为字符串

方式一:toString()

调用 toString() 方法可以将对象的值转成字符串,例如:

var num = 123;
num.toString(); // 返回字符串 '123'

var flag = true;
flag.toString(); // 返回字符串 'true'

方式二:String() 强制转换

String() 作为工具函数,可以将任何类型的值强制转换为字符串。

var num = 123;
String(num); // 返回字符串 '123'

var flag = true;
String(flag); // 返回字符串 'true'

方式三:加号拼接字符串

其他数据类型和字符串拼接的结果都是字符串,这种方式也称为隐式转换

var num = 123;
console.log(num + 120); // 输出数值 243
console.log(num + '120'); // 输出字符串 123120

var flag = true;
console.log(flag + ''); // 输出字符串 true

转换为数值型

方式一:parseInt()

将 String 字符串转换成整数数值,例如:

var myStr = '123';
var tmp = parseInt(myStr); // 数字 123
typeof tmp // 'number'

方式二:parseFloat()

将 String 字符串转换成浮点数数值,例如:

var myStr = '12.34';
var tmp = parseFloat(myStr); // 数字 12.34
typeof tmp // 'number'

方式三:Number() 强制转换

Number() 作为工具函数,可以将 String 字符串强制转换为数值型。

var str1 = '12.34';
var str2 = '12.3a';
var str3 = '12.b4';
var str4 = 'A12';
var str5 = '2e10';
Number(str1); // 12.34
Number(str2); // NaN
Number(str3); // NaN
Number(str4); // NaN
Number(str5); // 20000000000

方式四:隐式转换

利用算术运算符(-*/)隐式转换为数值型。

console.log('12' + 2);    // 122
console.log('12' - 2); // 10
console.log('12' - true); // 1
console.log('12' * 3); // 36
console.log('12' / 3); // 4

综合示例

下面是一个计算年龄的简单示例,涉及 Date 对象和类型转换的知识。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>年龄计算器</title>
<script>
const now = new Date();
console.log(now);
const bornYear = prompt('请输入你的出生年份');
const age = now.getFullYear() - bornYear;
alert('你今年已经 ' + age + ' 啦!');
</script>
</head>
<body>
<h1>年龄计算器</h1>
</body>
</html>

完整代码:GitHub