JavaScript 变量类型转换详解:内置函数与强制转换

作者:纸飞机时间:2026-10-24 10:55:43浏览:482

本文详细介绍 JavaScript 中变量类型转换的常用方法,包括 parseInt 和 parseFloat 的解析规则与进制处理,以及 Boolean、Number 和 String 三种强制类型转换函数的具体行为与返回值差异。

1. 转换函数:

JavaScript 内置转换函数:parseInt 与 parseFloat

JavaScript 提供了两个主要的转换函数:parseInt() 和 parseFloat()。前者用于将值转换为整数,后者用于转换为浮点数。只有当这两个函数作用于 String 类型时,才能正确执行;若作用于其他类型,则均返回 NaN(Not a Number)。



在判断字符串是否为数值之前,parseInt() 和 parseFloat() 会仔细分析字符串内容。parseInt() 首先检查位置 0 处的字符,判断其是否为有效数字;若无效,直接返回 NaN 并停止后续操作。若该字符有效,则继续检查位置 1 处的字符,重复此过程,直到发现非有效字符为止。此时,parseInt() 会将该字符之前的字符串部分转换为数字。



例如,将字符串 "1234blue " 转换为整数时,parseInt() 返回 1234,因为在检测到字符 'b' 时停止解析。字符串中包含的数字字面量会被正确转换,因此 "0xA " 会被转换为数字 10。然而,字符串 "22.5 " 将被转换为 22,因为对于整数而言,小数点是无效字符。具体示例如下:



parseInt("1234blue"); //returns 1234


parseInt("0xA"); //returns 10


parseInt("22.5"); //returns 22


parseInt("blue"); //returns NaN



parseInt() 方法支持基模式,可将二进制、八进制、十六进制或其他进制的字符串转换为整数。基数由 parseInt() 的第二个参数指定,因此解析十六进制值需按以下方式调用 parseInt():


parseInt("AF", 16); //returns 175


当然,对于二进制、八进制甚至十进制(默认模式),均可通过指定基数进行调用:


parseInt("10", 2); //returns 2


parseInt("10", 8); //returns 8


parseInt("10", 10); //returns 10


如果十进制数包含前导 0,建议明确指定基数为 10,以避免意外得到八进制值。例如:


parseInt("010"); //returns 8


parseInt("010", 8); //returns 8


parseInt("010", 10); //returns 10


在上述代码中,前两行都将字符串 "010 " 解析为数字。第一行默认将其视为八进制值,处理方式与第二行(明确声明基数为 8)相同。最后一行声明基数为 10,因此 iNum3 最终等于 10。



parseFloat() 方法的处理方式与 parseInt() 相似,从位置 0 开始查看每个字符,直到找到第一个非有效字符,然后将该字符之前的字符串转换为数字。不同之处在于,第一个出现的小数点是有效字符。若存在两个小数点,第二个小数点被视为无效,parseFloat() 会将该小数点之前的字符串转换为数字。这意味着字符串 "22.34.5 " 将被解析为 22.34。


使用 parseFloat() 方法的另一不同之处在于,字符串必须以十进制形式表示浮点数,不能使用八进制或十六进制形式。该


方法会忽略前导 0,因此八进制数 0908 将被解析为 908。对于十六进制数 0xA,该方法将返回 NaN,因为在浮点数中,'x' 不是有效字符。此外,parseFloat() 也没有基模式。



以下是使用 parseFloat() 方法的示例:


parseFloat("1234blue"); //returns 1234.0


parseFloat("0xA"); //returns NaN


parseFloat("22.5"); //returns 22.5


parseFloat("22.34.5"); //returns 22.34


parseFloat("0908"); //returns 908


parseFloat("blue"); //returns NaN



2. 强制类型转换

强制类型转换:Boolean、Number 与 String

还可以使用强制类型转换(type casting)来处理值的类型。通过强制类型转换,可以获取特定类型的值,即使它原本属于其他类型。


ECMAScript 中可用的 3 种强制类型转换如下:


Boolean(value)——将给定值转换为 Boolean 型;


Number(value)——将给定值转换为数字(可以是整数或浮点数);


String(value)——将给定值转换为字符串。


使用这三个函数之一转换值,将创建一个新值,存放由原始值直接转换成的结果。这可能会造成意想不到的后果。


当要转换的值是至少有一个字符的字符串、非 0 数字或对象(下一节将讨论这一点)时,Boolean() 函数将返回 true。如果该值是空字符串、数字 0、undefined 或 null,它将返回 false。



可以用下面的代码段测试 Boolean 型的强制类型转换。



Boolean(""); //false – empty string


Boolean("hi"); //true – non-empty string


Boolean(100); //true – non-zero number


Boolean(null); //false - null


Boolean(0); //false - zero


Boolean(new Object()); //true – object



Number() 的强制类型转换与 parseInt() 和 parseFloat() 方法的处理方式相似,但它转换的是整个值,而不是部分值。还记得吗,parseInt() 和 parseFloat() 方法只转换第一个无效字符之前的字符串,因此 "4.5.6 " 将被转换为 "4.5 "。使用 Number() 进行强制类型转换,"4.5.6 " 将返回 NaN,因为整个字符串值不能转换成数字。如果字符串值能被完整地转换,Number() 将判断是调用 parseInt() 方法还是调用 parseFloat() 方法。下表说明了对不同的值调用 Number() 方法会发生的情况:



用 法 结 果


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



最后一种强制类型转换方法 String() 是最简单的,因为它可将任何值转换为字符串。要执行这种强制类型转换,只需调用作为参数传递进来的值的 toString() 方法,即把 1 转换成 "1 ",把 true 转换成 "true ",把 false 转换成 "false ",依此类推。强制转换为字符串和调用 toString() 方法的唯一不同之处在于,对 null 或 undefined 值强制类型转换可以生成字符串而不引发错误:



var s1 = String(null); //"null"


var oNull = null;


var s2 = oNull.toString(); //won't work, causes an error



利用弱类型进行算术运算转换

3. 利用 js 变量弱类型转换



举个小例子,一看,就会明白了。


<script>


var str= '012.345 ';


var x = str-0;


x = x*1;


</script>



上例利用了 js 的弱类型的特点,只进行了算术运算,实现了字符串到数字的类型转换,不过这个方法还是不推荐的。


//对象转换为字符

对象与数组的字符串化转换

function object2String(obj) {


var val, output = "";


if (obj) {


output += "{";


for (var i in obj) {


val = obj[i];


switch (typeof val) {


case ("object"):


if (val[0]) {


output += i + ":" + array2String(val) + ",";


} else {


output += i + ":" + object2String(val) + ",";


}

break;


case ("string"):


output += i + ":'" + val + "',";


break;


default:


output += i + ":" + val + ",";


}
}

output = output.substring(0, output.length-1) + "}";


}

return output;


}

数组转换为字符串

function array2String(array) {


var output = "";


if (array) {


output += "[";


for (var i in array) {


val = array[i];


switch (typeof val) {


case ("object"):


if (val[0]) {


output += array2String(val) + ",";


} else {


output += object2String(val) + ",";


}

break;


case ("string"):


output += "'" + encodeURI(val) + "',";


break;


default:


output += val + ",";


}
}

output = output.substring(0, output.length-1) + "]";


}

return output;


}



function string2Object(string) {


eval("var result = " + decodeURI(string));


return result;


}



function string2Array(string) {


eval("var result = " + decodeURI(string));


return result;


}

日期类型转换为字符串格式

js 中将日期类型转换成字符串型格式



<script language="javascript">


/////////////////////////////////e///////////////////////


// 取得当前日期,格式yyyy-mm-dd


////////////////////////////////////////////////////////

function GetCurrentDate()


{

var Year=0;


var Month=0;


var Day=0;


var CurrentDate = new Date();


return ChangeDateToString(CurrentDate);


}

/////////////////////////////////e///////////////////////


// 取得当前日期,格式yyyy-mm-dd hh:mm


////////////////////////////////////////////////////////

function GetCurrentTime()


{

var Year=0;


var Month=0;


var Day=0;


var CurrentDate = new Date();


return ChangeTimeToString(CurrentDate);


}

////////////////////////////////////////////////////////

// 将日期类型转换成字符串型格式yyyy-MM-dd


////////////////////////////////////////////////////////

function ChangeDateToString(DateIn)


{

var Year=0;


var Month=0;


var Day=0;


var CurrentDate="";


//初始化时间


Year = DateIn.getYear();


Month = DateIn.getMonth()+1;


Day = DateIn.getDate();



CurrentDate = Year + "-";


if (Month >= 10 )


{

CurrentDate = CurrentDate + Month + "-";


}

else


{

CurrentDate = CurrentDate + "0" + Month + "-";


}

if (Day >= 10 )


{

CurrentDate = CurrentDate + Day ;


}

else


{

CurrentDate = CurrentDate + "0" + Day ;


}

return CurrentDate;


}
///////////////////////////////////////////////////////

// 将日期类型转换成字符串型格式yyyy-MM-dd hh:mm


////////////////////////////////////////////////////////

function ChangeTimeToString(DateIn)


{

var Year=0;


var Month=0;


var Day=0;


var Hour = 0;


var Minute = 0;


var CurrentDate="";


//初始化时间


Year = DateIn.getYear();


Month = DateIn.getMonth()+1;


Day = DateIn.getDate();


Hour = DateIn.getHours();


Minute = DateIn.getMinutes();



CurrentDate = Year + "-";


if (Month >= 10 )


{

CurrentDate = CurrentDate + Month + "-";


}

else


{

CurrentDate = CurrentDate + "0" + Month + "-";


}

if (Day >= 10 )


{

CurrentDate = CurrentDate + Day ;


}

else


{

CurrentDate = CurrentDate + "0" + Day ;


}

if(Hour >=10)


{

CurrentDate = CurrentDate + " " + Hour ;


}

else


{

CurrentDate = CurrentDate + " 0" + Hour ;


}

if(Minute >=10)


{

CurrentDate = CurrentDate + ":" + Minute ;


}

else


{

CurrentDate = CurrentDate + ":0" + Minute ;


}

return CurrentDate;


}

</script>

作者最新文章