整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

JavaScript类型转换

JavaScript类型转换

avaScript中,类型转换只有三种:

  1. 转换成数字
  2. 转换成布尔值
  3. 转换成字符串

经典类型面试题

console.log([]==![]); // true

代码分析

  1. 左侧是一个对象(数组)
  2. 右侧是一个布尔值,对象[]转换成布尔值true,因为除了null所有对象都转换成布尔值,所以![]结果为false
  3. 此时相当于对象==布尔值,依据类型转换规则,转换成数字类型进行比较
  4. 对象(空数组)转换成0,布尔值false转换成0
  5. 0==0,返回true

类型转换规则,如下图:

如若转载,请注明出处:开源字节 https://sourcebyte.cn/article/128.html

数值转换为字符串类型,可以直接利用加号"+"将数值加上一个长度为零的空字符串, 或者通过toString()方法

将数值转换为字符串

<script language="javascript">

var a=3;

var b=a + "";

var c=a.toString();

var d="student" + a;

alert(typeof(a) + " " + typeof(b) + " " +typeof(c) + " " +typeof(d));

</script>

var a=b=c=4;

alert(a+b+c.toString()); //其结果为84

toString() 方法可把一个 Number 对象转换为一个字符串,并返回结果。

NumberObject.toString(radix)

radix 可选。规定表示数字的基数,使 2 ~ 36 之间的整数。若省略该参数,则使用基数 10。

但是要注意,如果该参数是 10 以外的其他值,则 ECMAScript 标准允许实现返回任意值。

数字的字符串表示。例如,当 radix 为 2 时,NumberObject 会被转换为二进制值表示的字符串。

<script type="text/javascript">

var number=new Number(1337);

document.write (number.toString())

</script>

输出:1337

对于字符串转换为数值类型,javascript提供了两种非常方便的方法,分别是parseInt和parseFloat()

前者是将字符串转换为整数,后者将字符串转换为浮点数,只有字符类型才能调用这两种方法,否则直接返回NaN。

parseInt() 函数可解析一个字符串,并返回一个整数。

parseInt(string, radix)

radix 可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。

如果 string 以 "0x" 开头,parseInt() 会把 string 的其余部分解析为十六进制的整数。

如果 string 以 0 开头,那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。

如果 string 以 1 ~ 9 的数字开头,parseInt() 将把它解析为十进制的整数。

parseInt("10"); //返回 10

parseInt("19",10); //返回 19 (10+9)

parseInt("11",2); //返回 3 (10+9)

parseInt("17",8); //返回 15 (8+7)

parseInt("1f",16); //返回 31 (16+15)

parseInt("010"); //未定:返回 10 或 8

<script language="javascript">

document.write(parseInt("4567red") + "<br>");

document.write(parseInt("53.5") + "<br>");

document.write(parseInt("0xC") + "<br>"); //直接进制转换

document.write(parseInt("isaacshun@gmail.com") + "<br>");

</script>

输出:4567

53

12

NaN

parseFloat() 函数可解析一个字符串,并返回一个浮点数。

parseFloat(string)

<script type="text/javascript">

document.write(parseFloat("10"))

document.write(parseFloat("10.00"))

document.write(parseFloat("10.33"))

document.write(parseFloat("34 45 66"))

document.write(parseFloat(" 60 "))

document.write(parseFloat("40 years"))

document.write(parseFloat("He was 40"))

</script>

输出:

10

10

10.33

34

60

40

NaN

Number() 函数把对象的值转换为数字。

Number(object)

如果参数是 Date 对象,Number() 返回从 1970 年 1 月 1 日至今的毫秒数。

如果对象的值无法转换为数字,那么 Number() 函数返回 NaN。

在本例中,我们将尝试把不同的对象转换为数字:

<script type="text/javascript">

var test1=new Boolean(true);

var test2=new Boolean(false);

var test3=new Date();

var test4=new String("999");

var test5=new String("999 888");

var test6=null;

var test7=undefined;

var test8="1234abc"; //NaN

var test9=.123; //0.123

var test10=0123; //八进制 83

var test11=0x123; //或写成0X123 十六进制 291

document.write(Number(test1)+ "<br />");

document.write(Number(test2)+ "<br />");

document.write(Number(test3)+ "<br />");

document.write(Number(test4)+ "<br />");

document.write(Number(test5)+ "<br />");

document.write(Number(test6)+ "<br />");

document.write(Number(test7)+ "<br />");

document.write(Number(test8)+ "<br />");

document.write(Number(test9)+ "<br />");

document.write(Number(test10)+ "<br />");

document.write(Number(test11)+ "<br />");

</script>

输出:

1

0

1256657776588

999

NaN

0

NaN

NaN

0.123

83

291

转换变量的全局函数汇总:

Number()

使用Number函数,可以将任意类型的值转化成数值。

// 数值:转换后还是原来的值

Number(324) // 324

// 字符串:如果可以被解析为数值,则转换为相应的数值

Number('324') // 324

// 字符串:如果不可以被解析为数值,返回 NaN

Number('324abc') // NaN

// 空字符串转为0

Number('') // 0

// 布尔值:true 转成 1,false 转成 0

Number(true) // 1

Number(false) // 0

// undefined:转成 NaN

Number(undefined) // NaN

// null:转成0

Number(null) // 0

Number()和parseFloat()、parseInt()的区别:

Number() 转换时包含整数和浮点数部分, 可以将任意类型的值转化成数值;

parseInt() 只能转换数值型字符串, 不能则直接转换的返回NaN

parseFloat() 只能转换数值型字符串, 转换时包含整数和浮点数部分, 不能则直接转换的返回NaN

var test="12345.678abc";

document.write(Number(test)+"<br/>"); //NaN

document.write(Number(null)+"<br/>"); //0

document.write(Number(true)+"<br/>"); //1

document.write(Number(undefined)+"<br/>"); //NaN

document.write(parseFloat(test)+"<br/>"); //12345.678

document.write(parseInt(test)+"<br/>"); //12345

document.write(parseInt(null)+"<br/>"); //NaN

document.write(parseInt(true)+"<br/>"); //NaN

document.write(parseInt(undefined)+"<br/>"); //NaN

String()

String函数可以将任意类型的值转化成字符串,转换规则如下:

数值:转为相应的字符串。

字符串:转换后还是原来的值。

布尔值:true转为字符串"true",false转为字符串"false"。

undefined:转为字符串"undefined"。

null:转为字符串"null"。

console.log(String(123)); // 123

console.log(String("123")); // 123

console.log(String(true)); // true

console.log(String(undefined)); //undefined

console.log(String(null)); //null

Boolean() true: 非0、 非空字符串 false: 0、""、 null、 undefined、 NaN

Boolean(undefined) // false

Boolean(null) // false

Boolean(0) // false

Boolean(NaN) // false

Boolean('') // false

隐式类型转换

运算中存在的隐式类型转换

"+"运算符

var a=11, b='22';

var c=a + b;

这里引擎将会先把a变成字符串"11"再与b进行连接, 变成了"1122"。有人会有疑问, 为什么不把b变成数字22再进行算术加运算呢, 这样的话c就是33了。

没有为什么, 当运算符"+"两边一个是数字类型, 一个是字符串类型时, js引擎规定进行字符串连接运算而非算术加运算。

利用运算符"+"这个特性, 可以很方便的将Number转换成String。如

var a=11;

alert(typeof a); //-->number

a=a + '';

alert(typeof a); //-->string

"-"运算符

"-"可以是一元运算符(取负), 也可以是二元(减法运算)的。如

var a=11, b='5';

var c=a - b;

alert(typeof c); //--> number

这里与上面的"+"相反,会把字符串b隐式的转换成数字5再进行算术减法运算。利用这个特性,可以很方便的将String转换成Number

var a='11';

a=a - '';

alert(typeof a);// -->number

语句中存在的隐式类型转换

if语句

var obj={name:'jack'}

if(obj){

//do more

}

这里会把obj隐式的转换成Boolean类型

while语句

var obj={name:'jack'}

while(obj){

//do more

}

同if语句

for in时的类型转换

定义对象字面量时发生从标识符到字符串的隐式转换。

var person={'name':'jack',"age":20,school:'PKU'};

for(var a in person){

alert(a + ": " + typeof a); / * 返回值name: string

jack: string

age: string

school: string */

}

这里name, age分别加单/双引号以强调其为String类型, school没有加单/双引号。

我们遍历下该对象的属性, 查看其类型。发现school也被隐式的转换成了String类型。

数组的索引其实也是字符串类型。这着实令人惊叹, 但事实的确如此。如

var ary=[1,3,5,7];

for(var a in ary){

alert(a + ": " + typeof a); /* 返回值0: string

1: string

2: string

3: string */

}

alert时存在的隐式类型转换

String.prototype.fn=function(){return this};

var a='hello';

alert(typeof a.fn()); //-->object

alert(a.fn()); //-->hello

给String原型上添加了个fn方法,该方法返回this,我们知道this可以理解成当前类的实例对象,既然是对象那么typeof a.fn()自然返回是object了。

关键是最后的alert(a.fn()),a.fn()返回的明明是对象,但却隐式的转换成了字符串"hello"显示。

同样的情况发生在数字类型上,如

Number.prototype.fn=function(){return this};

var a=10;

alert(typeof a.fn());//-->object

alert(a.fn()); //-->10

a.fn()返回的是对象类型, 但在alert(a.fn())时会隐式的将其转换成数字。

typeof(varname); 也可写成 typeof varname;

instanceof判断数据类型

var str=null

var arr=[];

var obj={}; //new Object()

console.log(str instanceof Object); //false

console.log(arr instanceof Array); //true

console.log(obj instanceof Object); //true

型转换,typeof的用法

例 3.1.1

<HTML>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
/*
Cast operator (Definition) refer to 过去的网站www.favo.com
A way of converting data types.
Primitive values can be converted from one to another or rendered as objects by using object constructors to convert the values.

Boolean
Number
String

Number() (Function) 马克-to-win: actually Number() is the method of Global object.
A Number type convertor.

Property/method value type: Number primitive
JavaScript syntax: - Number()
- Number(aValue)
Argument list: aValue A value to be converted to a number.

When the Number() constructor is called as a function, it will perform a type conversion.
The following values are yielded as a result of calling Number() as a function:

Value Result
Number No conversion, the input value is returned unchanged.
Non numeric string NaN

window.Number("23");在favo中查不出来, 但Idea中可以打点打出来。
*/
var a=9;
/*下句话如果放在ie8中执行, 必须打开debug工具*/
// console.log(typeof(a));
document.writeln(typeof(a));
var as=String(a);
//String是Global的方法
document.writeln("typeof(as) is " + typeof(as));
var x=window.Number("23");
document.writeln("typeof(x) is " + typeof(x));
var age2=Number("56");
document.writeln(typeof(age2) + "is typeof(age2)");
var age3=new Number(56);

篇幅有限更多请见扩展链接:http://www.mark-to-win.com/tutorial/js_1_TypeConvert.html「链接」