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>

代码仓库

Leave a Reply