JavaScript 类型转换详解:toString、parseInt、parseFloat 与强制转换
本文系统梳理 JavaScript 中的类型转换机制,涵盖原始值到字符串、数字及布尔值的转换方法。重点解析 toString 的基模式、parseInt 与 parseFloat 的解析规则及进制处理,以及 Boolean、Number、String 强制转换函数的行为差异与注意事项。
类型转换概述
一、类型转换
在 ECMAScript 中,Boolean 值、数字和字符串的原始值具有伪对象特性,这意味着它们实际上拥有属性和方法。
例如:
JavaScript 代码
代码如下:
var sColor = "blue";
alert(sColor.length); // 输出 "4"
var sColor = "blue";
alert(sColor.length); // 输出 "4" 综上所述,三种主要原始值(Boolean、Number、String)都具备 toString() 方法。ECMAScript 定义的所有对象,无论是伪对象还是真对象,均拥有该方法。
Boolean 类型的 toString() 方法仅输出 "true" 或 "false",具体结果取决于变量的值:
JavaScript 代码
代码如下:
var bFound = false;
alert(bFound.toString()); // 输出 "false"
var bFound = false;
alert(bFound.toString()); // 输出 "false" Number 类型的 toString() 方法较为特殊,支持默认模式和基模式。在默认模式下,该方法将数字(整数、浮点数或科学计数法)转换为对应的字符串表示。
JavaScript 代码
代码如下:
var iNum1 = 10;
var fNum2 = 10.0;
alert(iNum1.toString()); // 输出 "10"
alert(fNum2.toString()); // 输出 "10"
var iNum1 = 10;
var fNum2 = 10.0;
alert(iNum1.toString()); // 输出 "10"
alert(fNum2.toString()); // 输出 "10" 使用 Number 类型 toString() 的基模式,可以指定不同的基数(进制)来输出数字字符串。
JavaScript 代码
代码如下:
var iNum = 10;
alert(iNum.toString(2)); // 输出 "1010"
alert(iNum.toString(8)); // 输出 "12"
alert(iNum.toString(16)); // 输出 "A"
var iNum = 10;
alert(iNum.toString(2)); // 输出 "1010"
alert(iNum.toString(8)); // 输出 "12"
alert(iNum.toString(16)); // 输出 "A" 2.转换成数字
转换为数字的方法
ECMAScript 提供了两种将非数字原始值转换为数字的方法,即 parseInt() 和 parseFloat()。
注意:仅对 String 类型(Number 除外)调用这些方法才能正确运行,对其他类型调用均返回 NaN。
例如:
JavaScript 代码
代码如下:
var iNum1 = parseInt("1234blue"); // 返回 1234
var iNum2 = parseInt("oxA"); // 返回 10
var iNum3 = parseInt("22.5"); // 返回 22
var iNum4 = parseInt("blue"); // 返回 NaN
var iNum1 = parseInt("1234blue"); // 返回 1234
var iNum2 = parseInt("oxA"); // 返回 10
var iNum3 = parseInt("22.5"); // 返回 22
var iNum4 = parseInt("blue"); // 返回 NaN parseInt() 方法还支持基模式,可将二进制、八进制、十六进制或其他进制的字符串转换为十进制整数。第二个参数指定解析时使用的进制基数。
JavaScript 代码
代码如下:
var iNum1 = parseInt("AF", 16); // 返回 175
var iNum2 = parseInt("10", 2); // 返回 2
var iNum3 = parseInt("10", 8); // 返回 8
var iNum4 = parseInt("10", 10); // 返回 10
var iNum1 = parseInt("AF", 16); // 返回 175
var iNum2 = parseInt("10", 2); // 返回 2
var iNum3 = parseInt("10", 8); // 返回 8
var iNum4 = parseInt("10", 10); // 返回 10 说明:若十进制数包含前导 0,建议明确指定基数为 10,否则可能被解析为八进制值。
JavaScript 代码
代码如下:
var iNum1 = parseInt("010"); // 返回 8
var iNum2 = parseInt("010", 8); // 返回 8
var iNum3 = parseInt("010", 10); // 返回 10
var iNum1 = parseInt("010"); // 返回 8
var iNum2 = parseInt("010", 8); // 返回 8
var iNum3 = parseInt("010", 10); // 返回 10 parseFloat() 方法的处理逻辑与 parseInt() 相似,从位置 0 开始扫描字符,直到遇到第一个非有效字符为止,并将此前部分转换为数字。对于此方法,首个小数点是有效字符;若出现两个小数点,第二个将被视为无效。此外,字符串必须以十进制形式表示浮点数。
JavaScript 代码
代码如下:
var fNum1 = parseFloat("1234blue"); // 返回 1234.0
var fNum2 = parseFloat("0xA"); // 返回 NaN
var fNum3 = parseFloat("22.5"); // 返回 22.5
var fNum4 = parseFloat("22.34.5"); // 返回 22.34
var fNum5 = parseFloat("0908"); // 返回 NaN
var fNum6 = parseFloat("blue"); // 返回 NaN
var fNum1 = parseFloat("1234blue"); // 返回 1234.0
var fNum2 = parseFloat("0xA"); // 返回 NaN
var fNum3 = parseFloat("22.5"); // 返回 22.5
var fNum4 = parseFloat("22.34.5"); // 返回 22.34
var fNum5 = parseFloat("0908"); // 返回 NaN
var fNum6 = parseFloat("blue"); // 返回 NaN 3.强制类型转换
强制类型转换函数
ECMAScript 中可用的 3 种强制类型转换如下:
(1).Boolean(value)
将给定值转换为 Boolean 类型。
当待转换值包含至少一个字符的字符串、非 0 数字或对象时,Boolean() 函数返回 true。若值为空字符串、数字 0、undefined 或 null,则返回 false。
例如:
JavaScript 代码
代码如下:
var b1 = Boolean(""); // false;
var b2 = Boolean("hi"); // true
var b3 = Boolean(100); // true
var b4 = Boolean(null); // false
var b5 = Boolean(0); // false
var b6 = Boolean(new Object()); // true
var b1 = Boolean(""); // false;
var b2 = Boolean("hi"); // true
var b3 = Boolean(100); // true
var b4 = Boolean(null); // false
var b5 = Boolean(0); // false
var b6 = Boolean(new Object()); // true (2).Number(value)
将给定值转换为数字(整数或浮点数)。
回顾 parseInt() 和 parseFloat() 仅转换首个无效字符前的字符串,因此 "4.5.6" 会被转换为 "4.5"。使用 Number() 进行强制类型转换时,"4.5.6" 将返回 NaN,因为整个字符串无法完整转换为数字。若字符串可完整转换,Number() 将判断调用 parseInt() 还是 parseFloat()。
例如:
JavaScript 代码
代码如下:
Number(false); // 0
Number(true); // 1
Number(undefined); // NaN
Number(null); // 0
Number("5.5"); // 5.5
Number("56"); // 56
Number("5.6.7"); // NaN
Number(new Object()); // NaN
Number(100); // 100
Number(false); // 0
Number(true); // 1
Number(undefined); // NaN
Number(null); // 0
Number("5.5"); // 5.5
Number("56"); // 56
Number("5.6.7"); // NaN
Number(new Object()); // NaN
Number(100); // 100 (3).String(value)
将给定值转换为字符串。
与调用 toString() 方法的唯一区别在于,对 null 或 undefined 值进行强制类型转换可生成字符串而不会引发错误:
JavaScript 代码
代码如下:
var s1 = String(null); // "null"
var oNull = null;
var s2 = oNull.toString(); // 引发错误定制 Quill.js 主题样式:修改默认 CSS 与添加自定义类名
2026-11-04 11:21:35
混淆JS代码怎么在线反混淆并格式化阅读
2026-11-03 21:46:39
JS在线编辑器代码报错怎么调试?控制台使用技巧
2026-11-03 21:24:56
从 marked.js 旧版本升级到最新版:API 变更与迁移指南
2026-11-03 17:38:17
JS富文本编辑器Quill与代码编辑器CodeMirror的区别及应用场景
2026-11-03 16:52:09
相关标签:
