catalogue
target
- Can name 5 simple data types
- You can use typeof to get the type of a variable
- Be able to name 1 ~ 2 methods to convert to numerical type
- Be able to say 1 ~ 2 methods to convert to character type
- Be able to say what implicit conversion is
Introduction to data types
Why do I need a data type
In a computer, the storage space occupied by different data is different
In order to divide the data into data with different memory sizes and make full use of the storage space, we define different data types
Simply put, data type is the category and model of data
Data type of variable
- Variables are places where data is stored, with names and data types
- JavaScript is a weakly typed or dynamic language
- This means that there is no need to declare the type of variable in advance, and the type will be determined automatically during program operation
- When the code runs, the data type of the variable is determined by the JS engine according to the data type of the variable value on the right of "=". After the code runs, the data type of the variable is finally determined
- JavaScript has dynamic types, which also means that the same variables can be used as different types
Simple data type
Simple data types in JavaScript and their descriptions are as follows:
| Simple data type | explain | Default value |
|---|---|---|
| number | Numeric type, including integer value and floating point value; E.g. 12, 0.12 | 0 |
| boolean | Boolean type; Such as true and false; Equivalent to 1 and 0 | false |
| string | String type; Such as' Zhang San '; In JS, strings are quoted | " " |
| undefined | var a; Variable a is declared but not assigned a value; a = undefined | undefined |
| null | var a = null; Declared that variable a is null | null |
Digital type
<script>
// Both integer and floating-point values are numeric
var num1 = 10;
var num2 = 3.14;
</script>The most common base systems are binary, octal, decimal and hexadecimal
Add 0 before octal in JS; Hex preceded by 0x
<script>
// Octal digit sequence range: 0 ~ 7
// Octal preceded by 0
var num1 = 016;
console.log(num1);
var num = 023;
console.log(num);
// Hexadecimal digit sequence range: 0~9 A~F
// Hex preceded by 0x
var num2 = 0xf;
console.log(num2);
</script> 
Digital range
<script>
//Digital maximum
console.log(Number.MAX_VALUE);
//Digital minimum
console.log(Number.MIN_VALUE);
</script> 
Three special values of digital type
- infinity； Represents infinity, greater than any value
- -infinity； Represents infinitesimal, less than any value
- NaN，not a number； Represents a non numeric value
<script>
// Infinity
console.log(Number.MAX_VALUE * 2);
// Infinitesimal
console.log(-Number.MAX_VALUE * 2);
// Non numerical
console.log('zhangsan' - 100);
</script>
isNaN
- isNaN() this method verifies that the value is numeric and returns a Boolean value
- If the value is numeric, return false; Returns true if the value is not numeric
<script>
console.log(isNaN(10));
console.log(isNaN('Zhang San'));
</script>
String type string
- The string type can be any text in quotation marks, and its syntax is double quotation marks' 'and single quotation marks''
- Because the attributes in HTML tags use double quotation marks, JS recommends using single quotation marks
- JS can nest double quotation marks with single quotation marks, or nest single quotation marks with double quotation marks (outer double inner single, outer single inner double)
String escape character
Similar to the special characters in HTML, there are also special characters in the string, which are called escape characters
The escape character starts with \. The common escape characters and their descriptions are as follows:
| Escape character | interpretative statement |
|---|---|
| \n | Newline, n is newline |
| \\ | Slash\ |
| \' | 'single quote |
| \" | Double quotes |
| \t | tab indent |
| \b | Space, b is blank |
<script>
var str = '\t Empty mountain after new rain,The weather comes late in autumn.\n\t Bright moon and pine light,The clear spring stone flows upward.';
console.log(str);
</script> 
String length and splicing
String length
- A string consists of several characters. The number of these characters is the length of the string
- The length of the entire string can be obtained through the length attribute of the string
<script>
var str = '\t Empty mountain after new rain,The weather comes late in autumn.\n\t Bright moon and pine light,The clear spring stone flows upward.';
console.log(str.length); //Length 27
</script>String splicing
- Multiple strings can be spliced with + in the form of string + any type = new string after splicing
- Before splicing, any type added to the string will be converted into a string, and then spliced into a new string
- +Number summary formula: numerical values are added and characters are connected
- No matter what type of data is spliced with a string, the result is a string
console.log('China has' + 56 + 'Ethnic groups');String splicing enhancement
// The variable should not be written into the string as far as possible. It can be spliced through the string and variable name // It is convenient to modify the content of splicing string var str1 = 'China has'; var num = 56; var str2 = 'Ethnic groups'; console.log(str1 + num + str2);
Case: display age
<script>
var age = prompt('Please enter your age:');
var str = 'Your age is' + age + 'year';
alert(str);
</script>
Boolean
- Boolean types have two values: true and false
- When Boolean and numeric types are added, the value of true is 1 and the value of false is 0
<script>
var flag1 = true;
var flag2 = false;
console.log(flag1 + 1); // The result is 2
console.log(flag2 + 1); // The result is 1
</script>Undefined and Null
A variable that has not been assigned a value after declaration will have a default value of undefined (pay attention to the result when connecting or adding)
<script>
var str;
console.log(str);
var variable = undefined;
console.log(variable + 'Zhang San'); // The result is undefined Zhang San
console.log(variable + 1); // The result is NaN
</script>Assign null to a declared variable, and the stored value is null
<script>
var space = null;
console.log(space + 'Zhang San'); // The result is null
console.log(space + 1); // The result is 1
</script>Get variable data type
typeof
typeof can be used to get the data type of the detection variable
Simple tests can be performed when the program fails
<script>
var num = 10;
console.log(typeof num); // number
var str = 'Zhang San';
console.log(typeof str); // string
var bool = true;
console.log(typeof bool); // boolean
var high;
console.log(typeof high); // undefined
var space = null;
console.log(typeof space); // object
// The value extracted by prompt is character type
var age = prompt('Please enter your age:');
console.log(typeof age); // string
</script> <script>
console.log(18);
console.log('18');
console.log(true);
console.log(undefined);
console.log(null);
</script>
Blue is numeric or boolean, black is string, and light gray is undefined and null
Literal
Literal is the representation of a fixed value in the source code
Generally speaking, when we see this variable, we can know what data type it belongs to
- Number literal: 8, 9, 10
- String literal: 'Zhang San', 'zhangsan'
- Boolean literal: true, false
Data type conversion
meaning
The data obtained by using form and prompt is of string type by default. At this time, you can't simply add directly, but you need to change the data type of the variable.
Generally speaking, it is to convert a variable from its own data type to another data type
We usually implement the conversion in three ways:
- Convert to string type
- Convert to numeric
- Convert to Boolean
Convert to string
| mode | explain | Examples |
|---|---|---|
| toString() | Convert to string | var num = 1; alert(num.toString()); |
| String() cast | Convert to string | var num = 1; alert(String(num)) |
| Plus concatenated string | And string splicing results are strings | var num = 1; alert(num+'zhangsan'); |
<script>
// Convert numeric to string toString()
var num = 10;
var str1 = num.toString();
console.log(str1);
console.log(typeof str1);
// Convert Boolean to string String()
var bool = true;
var str2 = String(bool);
console.log(str2);
console.log(typeof str2);
// Convert numeric type to string type plus sign splicing
var age = 20;
var str = 'Zhang San'
var str3 = 'Zhang San' + age;
console.log(str3);
console.log(typeof str3);
</script>
- toString() and String() are used differently
- Among the three conversion methods, the most commonly used is the third plus sign splicing string conversion method, which is also called implicit conversion
Convert to digital (key)
| mode | explain | Examples |
|---|---|---|
| parseInt(string) function | Convert string type to integer numeric type | parseInt('12') |
| parseFloat(string) function | Convert string type to floating-point numeric type | parseFloat('12.34') |
| Number() cast function | Convert string type to numeric type | Number('23') |
| js implicit conversion (- * /) | Implicit conversion to numerical type by arithmetic operation | '23' - 0 |
<script>
var age = prompt('Please enter your age:');
console.log(age);
console.log(typeof age);
// parseInt() can convert character type to integer numeric type, and the result must be an integer
// When the original character type number is floating point, only integer digits are retained in the converted result
// For character types with units, such as 200px, after conversion, the units will be removed and only 200 will be retained
// When the string in parentheses does not start with a number, the result is NaN
console.log(typeof parseInt(age));
var height = prompt('Please enter your height:');
console.log(height);
console.log(typeof height);
// parseFloat() should be used when the string in parentheses is a floating-point number
// The others are the same as parseInt()
console.log(typeof parseFloat(height));
var weight = prompt('Please enter your weight:');
console.log(weight);
console.log(typeof weight);
// Number()
console.log(typeof Number(weight));
// Implicit conversion, with numeric values - */
var BMI = height - 65;
console.log(BMI);
var info = 'Your age is' + age + 'year\n' + 'Your height is' + height + 'cm\n' + 'Your weight is' + weight + 'kg';
alert(info);
</script>Case 1: calculating age
Perform an input box on the page, enter the year of birth and calculate the age
<script>
var year = prompt('Please enter your year of birth:');
var age = 2021 - year + 1;
var str = 'Your age is' + age + 'year';
alert(str);
</script>Case 2: simple adder
Calculate the value of two numbers. After the user enters the first value, continue to pop up the second input box and enter the second value. Finally, the sum of the two input values is displayed through the pop-up window
<script>
var num1 = prompt('Please enter the first value:');
var num2 = prompt('Please enter the second value:');
// Note that + is string splicing
// During addition operation, the values on both sides shall be converted to digital type
var result = parseInt(num1) + parseInt(num2);
alert('The addition result is:' + result);
</script>Convert to Boolean
| mode | explain | Examples |
|---|---|---|
| Boolean() function | Convert other types to Boolean values | Boolean('true') |
- Values representing null and negative will be converted to false, such as' ', 0, NaN, null and undefined
- The remaining values are converted to true
<script>
// When there are only spaces in '', the output result is also true
console.log(Boolean(''));
console.log(Boolean(0));
console.log(Boolean(NaN));
console.log(Boolean(null));
console.log(Boolean(undefined));
// Except for the above five, the others are true
console.log(Boolean('Zhang San'));
console.log(Boolean(' '));
console.log(Boolean(12));
</script>