当前位置：网站首页>Conversion of data types

Conversion of data types

2022-07-18 18:48:00 【InfoQ】

JavaScript

  How to convert data types in ？

Introduction to data type conversion

JavaScript

  It is a dynamically typed language , Variables have no type restrictions , Any value can be assigned at any time .

var x = y ? 1 : 'a';

In the above code , Variable

x

Is it a number or a string , Depends on another variable

y

Value .

y

true

when ,

x

It's a number ;

y

false

when ,

x

Is a string . It means ,

x

The type of is not known at compile time , You have to wait until runtime to know .

Although the data type of the variable is uncertain , But various operators have requirements for data types . If the operator finds , The type of operator is not as expected , The type will be converted automatically . such as , The subtraction operator expects the left and right operators to be numeric , If not , It will automatically convert them into values .

'4' - '3' // 1

In the above code , Although it's the subtraction of two strings , But still get the value  

1

, And the reason is that  

JavaScript

  Automatically convert operators to numbers .

So let's take a look at  

JavaScript

  How to perform data type conversion in .

Coercive transformation （ Explicit conversion ）

Cast mainly refers to the use of

Number()

、

String()

and

Boolean()

Three functions , Manually put various types of values , Turn them into numbers 、 String or Boolean .

Number( )

Use

Number

function , You can convert any type of value into a number .

The following is divided into two situations , One is that the parameter is a value of the original type , The other is that parameters are objects .

（1） Primitive type value

The conversion rules for primitive type values are as follows .

//  The number ： After conversion, it is still the original value 
Number(324) // 324

//  character string ： If it can be solved numerically , Then convert to the corresponding value 
Number('324') // 324

//  character string ： If it can't be solved numerically , return  NaN
Number('324abc') // NaN

//  Empty string to 0
Number('') // 0

//  Boolean value ：true  Turn into  1,false  Turn into  0
Number(true) // 1
Number(false) // 0

// undefined： Turn into  NaN
Number(undefined) // NaN

// null： Turn into 0
Number(null) // 0

Number

Function to convert a string to a number , than

parseInt

Functions are much more strict . Basically , As long as one character cannot be converted to a numeric value , The entire string will be converted to

NaN

parseInt('42 cats') // 42
Number('42 cats') // NaN

In the above code ,

parseInt

Parse the characters one by one , and

Number

Function to convert the type of the string as a whole .

in addition ,

parseInt

and

Number

Functions will automatically filter the leading and suffix spaces of a string .

parseInt('\t\v\r12.34\n') // 12
Number('\t\v\r12.34\n') // 12.34

（2） object

The simple rule is ,

Number

When the parameter of the method is an object , Will return

NaN

, Unless it's an array of individual values .

Number({a: 1}) // NaN
Number([1, 2, 3]) // NaN
Number([5]) // 5

The reason for this , Because

Number

The rules behind the transformation are complex .

First step , Call the object's own

valueOf

Method . If the value of the original type is returned , Then directly use

Number

function , No further steps .

The second step , If

valueOf

Method returns the object , Call the object's own

toString

Method . If

toString

Method returns the value of the original type , Use... For this value

Number

function , No further steps .

The third step , If

toString

Method returns an object , Just report a mistake .

Please see the following example .

var obj = {x: 1};
Number(obj) // NaN

//  Equate to 
if (typeof obj.valueOf() === 'object') {
 Number(obj.toString());
} else {
 Number(obj.valueOf());
}

In the above code ,

Number

Function will

obj

Object to numeric . A series of operations happened behind it , First call

obj.valueOf

Method , The result returns the object itself ; therefore , Continue to call

obj.toString

Method , The string is returned

[object Object]

, Use... For this string

Number

function , obtain

NaN

By default , Object's

valueOf

Method returns the object itself , So it's always called

toString

Method , and

toString

Method returns the type string of the object （ such as

[object Object]

）. therefore , There will be the following results .

Number({}) // NaN

toString

Method does not return a value of the original type , The result will be an error .

var obj = {
 valueOf: function () {
 return {};
 },
 toString: function () {
 return {};
 }
};

Number(obj)
// TypeError: Cannot convert object to primitive value

Code above

valueOf

and

toString

Method , All returned are objects , Therefore, an error will be reported when converting to a numerical value .

We can also see from the above example ,

valueOf

and

toString

Method , It's all customizable .

Number({
 valueOf: function () {
 return 2;
 }
})
// 2

Number({
 toString: function () {
 return 3;
 }
})
// 3

Number({
 valueOf: function () {
 return 2;
 },
 toString: function () {
 return 3;
 }
})
// 2

The above code uses

Number

function . The first object returns

valueOf

The value of the method , The second object returns

toString

The value of the method , The third object represents

valueOf

Method precedes

toString

Method execution .

String( )

String

Function can convert any type of value to a string , The conversion rules are as follows .

（1） Primitive type value

The number
： To the corresponding string .

character string
： After conversion, it is still the original value .

Boolean value
：
true
To string
"true"
,
false
To string
"false"
.

undefined
： To string
"undefined"
.

null
： To string
"null"
.

String(123) // &quot;123&quot;
String('abc') // &quot;abc&quot;
String(true) // &quot;true&quot;
String(undefined) // &quot;undefined&quot;
String(null) // &quot;null&quot;

（2） object

String

If the parameter of the method is an object , Returns a type string ; If it's an array , Returns the string form of the array .

String({a: 1}) // &quot;[object Object]&quot;
String([1, 2, 3]) // &quot;1,2,3&quot;

String

The transformation rules behind the method , And

Number

The method is basically the same , It's just a swap

valueOf

Methods and

toString

Method execution order .

Call the object's own
toString
Method . If the value of the original type is returned , Use... For this value
String
function , Don't do the following steps .

If
toString
Method returns an object , Call the original object again
valueOf
Method . If
valueOf
Method returns the value of the original type , Use... For this value
String
function , Don't do the following steps .

If
valueOf
Method returns an object , Just report a mistake .

Here is an example .

String({a: 1})
// &quot;[object Object]&quot;

//  Equate to 
String({a: 1}.toString())
// &quot;[object Object]&quot;

The above code calls the... Of the object first

toString

Method , It is found that the returned string

[object Object]

, No more calls to

valueOf

The method .

toString

Law and

valueOf

Method , All returned are objects , You're going to report a mistake .

var obj = {
 valueOf: function () {
 return {};
 },
 toString: function () {
 return {};
 }
};

String(obj)
// TypeError: Cannot convert object to primitive value

The following is through customization

toString

Method , Example of changing the return value .

String({
 toString: function () {
 return 3;
 }
})
// &quot;3&quot;

String({
 valueOf: function () {
 return 2;
 }
})
// &quot;[object Object]&quot;

String({
 valueOf: function () {
 return 2;
 },
 toString: function () {
 return 3;
 }
})
// &quot;3&quot;

The above code uses

String

function . The first object returns

toString

The value of the method （ The number 3）, The second object returns

toString

The value of the method （

[object Object]

）, The third object represents

toString

Method precedes

valueOf

Method execution .

Boolean( )

Boolean()

Function can convert any type of value to a Boolean value .

Its conversion rules are relatively simple ： Except for the following five values, the conversion result is

false

, All other values are

true

undefined

null

0
（ contain
-0
and
+0
）

NaN

''
（ An empty string ）

Boolean(undefined) // false
Boolean(null) // false
Boolean(0) // false
Boolean(NaN) // false
Boolean('') // false

Of course ,

true

and

false

These two Boolean values don't change .

Boolean(true) // true
Boolean(false) // false

Be careful , All objects （ Include empty objects ） The result of the conversion is

true

, Even

false

The corresponding Boolean object

new Boolean(false)

It's also

true

（ See 《 The wrapper object of the original type value 》 chapter ）.

Boolean({}) // true
Boolean([]) // true
Boolean(new Boolean(false)) // true

The Boolean value of all objects is

true

, This is because JavaScript When it comes to language design , For performance reasons , If the object needs to be evaluated to get a Boolean value , about

obj1 && obj2

Such a scene , More calculations may be needed . To guarantee performance , We should unify the rules , The Boolean value of the object is

true

Automatic conversion （ Implicit conversion ）

The following describes automatic conversion , It is based on coercion .

In the following three situations ,JavaScript Automatically convert data types , That is, the conversion is done automatically , The user is not visible .

Case one , Different types of data operate on each other .

123 + 'abc' // &quot;123abc&quot;

The second case , Boolean for data of non boolean type .

if ('abc') {
 console.log('hello')
} // &quot;hello&quot;

The third case , Use unary operators for non numeric values （ namely

+

and

-

）.

+ {foo: 'bar'} // NaN
- [1, 2, 3] // NaN

The rule of automatic conversion is like this ： What type of values are expected , Call the conversion function of this type . such as , A location is expected to be a string , Just call

String()

Function transformation . If the position can be either a string , It could also be numerical , Then by default, it will be converted to numerical value .

Because of the uncertainty of automatic conversion , And it's not easy to debug , It is recommended to be Boolean when expected 、 The number 、 The place of the string , All use

Boolean()

、

Number()

and

String()

Function to do an explicit conversion .

Automatically convert to Boolean

JavaScript Where a Boolean value is expected （ such as

if

The conditional part of a statement ）, This will automatically convert non Boolean parameters to Boolean values . The system will automatically call

Boolean()

function .

So in addition to the following five values , Everything else is automatically converted to

true

undefined

null

+0
or
-0

NaN

''
（ An empty string ）

In the following example , Each value of the conditional part is equivalent to

false

, After using the negative operator , It becomes

true

if ( !undefined
 && !null
 && !0
 && !NaN
 && !''
) {
 console.log('true');
} // true

There are two ways to write it , Sometimes used to convert an expression to a Boolean value . What they call internally is also

Boolean()

function .

//  Writing a 
expression ? true : false

//  Write two 
!! expression

Automatically convert to string

JavaScript Encountered the expected string , Will automatically convert non string values to strings . The specific rule is , First convert the value of the composite type to the value of the original type , The original type value is converted to a string .

Automatic conversion of strings , It mainly occurs in the addition of strings . When a value is a string , The other value is a non string , The latter is converted into a string .

'5' + 1 // '51'
'5' + true // &quot;5true&quot;
'5' + false // &quot;5false&quot;
'5' + {} // &quot;5[object Object]&quot;
'5' + [] // &quot;5&quot;
'5' + function (){} // &quot;5function (){}&quot;
'5' + undefined // &quot;5undefined&quot;
'5' + null // &quot;5null&quot;

This automatic conversion is very error prone .

var obj = {
 width: '100'
};

obj.width + 20 // &quot;10020&quot;

In the above code , Developers may expect to return

120

, But because of automatic switching , It actually returns a character

10020

Automatically convert to values

JavaScript Where the expected value is , The parameter value will be automatically converted to a numerical value . The system will automatically call

Number()

function .

Except for the addition operator （

+

） It's possible to turn an operator into a string , Other operators automatically convert operators to numeric values .

'5' - '2' // 3
'5' * '2' // 10
true - 1 // 0
false - 1 // -1
'1' - 1 // 0
'5' * [] // 0
false / '5' // 0
'abc' - 1 // NaN
null + 1 // 1
undefined + 1 // NaN

In the above code , Operators on both sides of the operator , It's all converted into numbers .

Be careful ：
null
When it is converted to a number, it is
0
, and
undefined
When it is converted to a number, it is
NaN
.

A unary operator also converts an operator to a number .

+'abc' // NaN
-'abc' // NaN
+true // 1
-false // 0

JavaScript
  How to convert data types in ？

Refer to the answer ：
Type conversion can be divided into two types ,
Covert transformation
and
Overt conversion
.
1. Covert transformation
When different data types operate on each other , Or when calculating Boolean values for non Boolean data , There will be implicit conversion .
When expected to be a number ： When doing arithmetic operations , Our result and the number of operations are numbers , The data will be converted into numbers for calculation .

When expecting a string ： If one operand is a string , Use
+
When adding symbols , Will be automatically converted to a string .
When expected to be Boolean ： Mentioned earlier when introducing Boolean types 9 The value will change to false, The rest is converted to true
2. Overt conversion
The so-called dominant transformation , Only programmers force one type to be converted to another . Explicit transformation often uses some transformation methods . Common conversion methods are as follows ：
Convert to numeric type ：
Number()
,
parseInt()
,
parseFloat()
Convert to boolean type ：
Boolean()
Convert to string type ：
toString()
,
String()
Of course , In addition to using the above conversion method , We can also use some shortcuts to perform explicit conversion of data types , as follows ：
Convert string ： Directly spliced with an empty string , for example ：
a = "" + data
Convert Boolean ：!! data type , for example ：
!!"Hello"
Convert values ： data *1 or /1, for example ：
"Hello * 1"

原网站

版权声明
本文为[InfoQ]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/199/202207161427185484.html