Experience this series of video tutorials

Click to watch: Bilibili

Type conversion

JavaScript is a dynamically typed language. Variables have no type restrictions and can be assigned arbitrary values at any time. In many cases, automatic casting is performed based on the actual needs of the expression. The rules for automatic casting are more complex. Before explaining the rules for automatic casting, I will explain how to cast data types manually.

Casts.

A cast is used to manually convert a value of various types to a Number, String, or Boolean value using the three functions Number(), String(), and Boolean().

Number()

Using the Number function, you can convert any type of value to a numeric value.

The conversion rules for primitive values are as follows

// Value: the original value after conversion
Number(324) / / 324

// String: If it can be parsed to a numeric value, it is converted to the corresponding numeric value
Number('324') / / 324

// String: If it cannot be parsed as a number, return NaN
Number('324abc') // NaN

// The empty string is converted to 0
Number(' ') / / 0

// Boolean values: true to 1, false to 0
Number(true) / / 1
Number(false) / / 0

// undefined: becomes NaN
Number(undefined) // NaN

// null: converts to 0
Number(null) / / 0
Copy the code

ParseInt parses characters one by one, while the Number function converts the string type as a whole. In addition, both the parseInt and Number functions automatically filter leading and trailing Spaces in a string.

String()

The String function converts a value of any type to a String as follows

Primitive type value

// Value: converts to the corresponding string.
String(123) / / "123"

// String: same value after conversion.
String('abc') // "abc"

// Boolean values: true to string "true", false to string "false".
String(true) // "true"

// undefined: changes to the string "undefined".
String(undefined) // "undefined"

// null: Converts to the string "null".
String(null) // "null"
Copy the code

Boolean()

The Boolean() function can convert a value of any type to a Boolean value.

Its conversion rules are relatively simple: all values are true except for the following six values that convert to false.

Boolean(false) // false
Boolean(undefined) // false
Boolean(null) // false
Boolean(0) // false
Boolean(NaN) // false
Boolean(' ') // false
Copy the code

Automatic conversion

Automatic conversion, which is based on a cast

The rule for automatic conversion is this: when you expect a value of that type, you call the conversion function of that type. For example, if a location is expected to be a String, the String() function is called to convert.

Because automatic conversions are uncertain and difficult to debug, it is recommended to use the Boolean(), Number(), and String() functions for all explicit conversions where booleans, numeric values, and strings are expected.

  • Automatically converts to a Boolean value
console.log(!!'a');
console.log(!!123);
console.log(!! [123]);
console.log(!! {name: 'xiaoming'});
Copy the code
  • Automatically converts to a string

Automatic conversion of strings occurs mainly during string addition operations. When one value is a string and the other is a non-string, the latter is converted to a string.

console.log('6' + 1) / / '61'
console.log('6' + true) // "6true"
console.log('6' + []) / / "6"
console.log('6' + undefined) // "6undefined"
console.log('6' + null) // "6null"
Copy the code
  • Automatically converts to a value

Except for the addition operator (+), which may convert an operator to a string, all operators automatically convert an operator to a number

console.log('5' - '2') / / 3
console.log('5' * '2') / / 10
console.log(true - 1)  / / 0
console.log(false - 1) // -1
console.log('1' - 1)   / / 0
console.log('5' * [])   / / 0
console.log(false / '5') / / 0
console.log('abc' - 1)  // NaN
console.log(null + 1) / / 1
console.log(undefined + 1) // NaN
Copy the code

Note: null is 0 when converted to a value, and undefined is NaN when converted to a value.

+'abc' // NaN
-'abc' // NaN
+true / / 1
-false / / 0
Copy the code

Unary operators also convert operators to numbers.

Operator 1

Arithmetic operator

JavaScript provides a total of 10 arithmetic operators to perform basic arithmetic operations.

  • Addition operator: x + y
  • The subtraction operator: x-y
  • Multiplication operator: x * y
  • The division operator: x/y
  • The exponential operator: x ** y
  • Remainder operator: x % y
  • Increment operator: ++x or x++
  • The decrement operator: –x or x–
  • Numeric operator: +x
  • Negative numeric operator: -x

Subtraction, multiplication and division are simple operations that perform corresponding mathematical operations. Here are a few other arithmetic operators, focusing on the addition operator.

Special “+”

The term
  • Operand (also called operator)

The value in the formula. For example, the formula 6 * 5 has two operators: left and right.

  • Unary operator

If there is only one operator in an expression, then the operator is unary. For example, the positive + operator in +600 is unary.

  • Binary operator

Similarly, there are two operators that are binary operators. Note that the plus sign in the formula 1 + 2 is the binary operator

Used as an addition operator

1 + 1 / / 2
Copy the code

Js allows non-numeric addition.

true + true / / 2
1 + true / / 2
Copy the code

Used as a concatenator when two strings are added.

'a' + 'bc' // "abc"
Copy the code

Even if only one operand is a string

1 + 'a' // "1a"
true + 'a' // "truea"
Copy the code

More complicated case

'3' + 4 + 5 / / "345"
3 + 4 + '5' / / "75"
Copy the code

The rule for other arithmetic operators is simple: all operators are converted to numeric values

1 - '2' // -1
1 * '2' / / 2
1 / '2' / / 0.5
Copy the code

Remainder operator

The remainder operator (%) returns the remainder of the division of the previous operator by the next operator.

12 % 5 / / 2
Copy the code

Note that the sign of the result is determined by the sign of the first operator.

-1 % 2 // -1
1 % -2 / / 1
Copy the code

Increment and decrement operators

The increment and decrement operators, which are unary operators, require only one operator. When used with =, it is important to note that the pre-increment (subtraction) is first increment (subtraction) and then assignment, and the post-increment (subtraction) is first assignment and then increment (subtraction),

var a = 1
var b = a++
console.log(a, b); 1 / / 2

var x = 1
var y = ++x
console.log(x, y); 2 / / 2
Copy the code

The assignment operator

Assignment is the final step in all computations, performing the specified operation before returning the resulting value to the variable on the left

Operand 1 and operand 2 are modified in place to perform the operation and the result is assigned to operand 1

// The same thing as x = x + y
x += y

// The same thing as x = x - y
x -= y

// The same thing as x = x * y
x *= y

// The same thing as x = x/y
x /= y

// the same thing as x = x % y
x %= y

// the same thing as x = x ** y
x **= y
Copy the code

Comma operator

Multiple statements separated by commas are executed, but only the result of the last statement is returned and assigned to the variable to the left of the equal sign.

Here’s an example:

var a = (1 + 2.3 + 6);
console.log( a ); / / 9
Copy the code

practice

  • Judge the results of all printouts
console.log(1 + null + '2');
console.log(1 + 2 + true);
console.log(1 + '2' + true);
console.log('1' + null + '2');
console.log(true + 1);
console.log(true + '1');
console.log(null + 1);
console.log(undefined + 1);
console.log(null + '1');
console.log(undefined + '1');
console.log(undefined + true + '1');
console.log(null + true + 1);
console.log(null + 'true' + 1);
console.log(null + 'true' - 1);
console.log(null - true + 1);
console.log(null - true + '1');
console.log(null * true);
console.log(null * true + 6);
console.log(null * true + '6');
console.log(true * '6');
console.log(true * '6' + 9);
console.log(true * '6' + '9');
console.log(true * '6' - '9');
Copy the code
  • Judge the results of all printouts
console.log(parseInt(0b111));
console.log(parseInt(0b111.10));
console.log(parseInt('0b111'));
console.log(parseInt('0b111'.undefined));
console.log(parseInt('0b111'.8));
console.log(parseInt('0b111'.2));
console.log(parseInt('111abc'.2));
console.log(Number(0b111));
console.log(Number('0b111'));
console.log(Number('0o101'));
console.log(Number(0o101));
console.log(Number('0x100'));
console.log(Number(0x100));
console.log(Number(1.23));
console.log(Number('1.23'));
console.log(Number(+123.1));
console.log(Number(-123.1));
console.log(Number(null + 1));
console.log(Number(null + undefined));
console.log(Number('1' + null));
console.log(parseInt('1' + null));
console.log(Number('1' - null));
Copy the code
  • Judge the results of all printouts
var a = 1;
var b = 2;
var c = true - '0'
c += ++a + b-- * 2 + ++b + a++;
console.log(c);
console.log(a);
console.log(b);
Copy the code