JavaScript基础知识2（常量、数据类型、类型转换、算术运算符优先级）

- 常量
- 数据类型
- - 数值类型
  - 字符串类型
  - 模板字符串基本用法
  - - 你的例子改写成模板字符串
    - 详细解释
    - 完整示例（使用模板字符串）
  - 布尔类型
  - undefined
  - 获取数据类型使用 `typeof`
  - - 返回值
    - 示例
    - 示例解释
    - 示例应用
- 类型转换
- - 隐式转换
  - - 算术运算符 `+`
    - 其他运算符
    - 比较运算符
    - 布尔上下文
    - 对象到原始值的转换
    - 总结
  - 显式转换
  - - Number
    - `Number()`
    - `parseInt()`
    - `parseFloat()`
    - 示例对比
    - 应用场景
- 算术运算符优先级
- - 完整优先级列表
  - 示例解释

常量

概念：使用 const 声明的变量称为“常量”。

使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。

命名规范：和变量一致

const PI = 3.14

注意：常量不允许重新赋值,声明的时候必须赋值（初始化）

数据类型

计算机世界中的万事成物都是数据。

计算机程序可以处理大量的数据，为了方便数据的管理，将数据分成了不同的类型：

注：通过 typeof 关键字检测数据类型

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 数据类型</title>
</head>
<body><script> // 检测 1 是什么类型数据，结果为 numberdocument.write(typeof 1)</script>
</body>
</html>

数值类型

即我们数学中学习到的数字，可以是整数、小数、正数、负数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 数据类型</title>
</head>
<body><script> let score = 100 // 正整数let price = 12.345 // 小数let temperature = -40 // 负数document.write(typeof score) // 结果为 numberdocument.write(typeof price) // 结果为 numberdocument.write(typeof temperature) // 结果为 number</script>
</body>
</html>

JavaScript 中的数值类型与数学中的数字是一样的，分为正数、负数、小数等。

字符串类型

通过单引号（ ''）、双引号（ ""）或反引号包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。

注意事项：

无论单引号或是双引号必须成对使用
单引号/双引号可以互相嵌套，但是不以自已嵌套自已
必要时可以使用转义符 \，输出单引号或双引号

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 数据类型</title>
</head>
<body><script> let user_name = '小明' // 使用单引号let gender = "男" // 使用双引号let str = '123' // 看上去是数字，但是用引号包裹了就成了字符串了let str1 = '' // 这种情况叫空字符串documeent.write(typeof user_name) // 结果为 stringdocumeent.write(typeof gender) // 结果为 stringdocumeent.write(typeof str) // 结果为 string</script>
</body>
</html>

字符串拼接：
场景：+运算符可以实现字符串的拼接
口诀：数字相加，字符相连（只要+左右有字符串就是拼接）
模板字符串（Template Strings）是 ES6（ECMAScript 2015）引入的一个新特性，使得在字符串中嵌入变量和表达式变得更加方便和直观。模板字符串使用反引号（`）而不是普通的单引号或双引号来定义。

模板字符串基本用法

嵌入变量：
使用 ${} 语法在字符串中嵌入变量。

let name = 'Alice';
let greeting = `Hello, ${name}!`;
console.log(greeting); // 输出 "Hello, Alice!"

嵌入表达式：
在 ${} 中可以嵌入任意的 JavaScript 表达式。

let a = 10;
let b = 20;
let result = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(result); // 输出 "The sum of 10 and 20 is 30."

多行字符串：
模板字符串可以轻松创建多行字符串，而不需要使用换行符 \n。

let multiLine = `This is a string
that spans across
multiple lines.`;
console.log(multiLine);
// 输出：
// This is a string
// that spans across
// multiple lines.

你的例子改写成模板字符串

我们可以使用模板字符串来改写你之前的代码，以便更直观地输出结果：

const pi = 3.14;
let r = prompt('请输入半径：');
r = parseFloat(r); // 将字符串转换为数字if (isNaN(r)) {console.log('请输入一个有效的数字作为半径。');
} else {let circle = pi * r * r;console.log(`半径为 ${r} 的圆的面积是：${circle}`);
}

详细解释

定义常量和获取输入：

const pi = 3.14;
let r = prompt('请输入半径：');
r = parseFloat(r); // 将字符串转换为数字

输入验证：

if (isNaN(r)) {console.log('请输入一个有效的数字作为半径。');
} else {let circle = pi * r * r;console.log(`半径为 ${r} 的圆的面积是：${circle}`);
}

完整示例（使用模板字符串）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>计算圆的面积</title>
</head>
<body><script>const pi = 3.14;let r = prompt('请输入半径：');r = parseFloat(r); // 将字符串转换为数字if (isNaN(r)) {console.log('请输入一个有效的数字作为半径。');} else {let circle = pi * r * r;console.log(`半径为 ${r} 的圆的面积是：${circle}`);}</script>
</body>
</html>

在这个示例中，我们使用模板字符串来构建输出消息，使得代码更简洁和易读。模板字符串不仅支持嵌入变量和表达式，还可以方便地处理多行文本，提升代码的可读性和维护性。

布尔类型

表示肯定或否定时在计算机中对应的是布尔类型数据，它有两个固定的值 true 和 false，表示肯定的数据用 true，表示否定的数据用 false。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 数据类型</title>
</head>
<body><script> //  pink老师帅不帅？回答 是 或 否let isCool = true // 是的，摔死了！isCool = false // 不，套马杆的汉子！document.write(typeof isCool) // 结果为 boolean</script>
</body>
</html>

undefined

未定义是比较特殊的类型，只有一个值 undefined，只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 数据类型</title>
</head>
<body><script> // 只声明了变量，并末赋值let tmp;document.write(typeof tmp) // 结果为 undefined</script>
</body>
</html>

注：JavaScript 中变量的值决定了变量的数据类型。

typeof 是 JavaScript 中的一个操作符，用于确定变量或表达式的类型。它返回一个字符串，表示操作数的类型。

获取数据类型使用 `typeof`

语法：

typeof operand

operand 可以是任意变量、值或表达式。

返回值

typeof 操作符返回以下字符串之一，表示操作数的类型：

"undefined"：如果变量未定义。
"boolean"：如果变量是布尔值。
"number"：如果变量是数字（包括 NaN）。
"string"：如果变量是字符串。
"object"：如果变量是对象（包括数组和 null）。
"function"：如果变量是函数。
"bigint"：如果变量是 BigInt（大整数）。
"symbol"：如果变量是 Symbol。

示例

console.log(typeof undefined); // "undefined"
console.log(typeof true); // "boolean"
console.log(typeof 42); // "number"
console.log(typeof 'hello'); // "string"
console.log(typeof {}); // "object"
console.log(typeof []); // "object" (数组也是对象)
console.log(typeof null); // "object" (这是一个历史遗留的 bug)
console.log(typeof function(){}); // "function"
console.log(typeof BigInt(123)); // "bigint"
console.log(typeof Symbol('symbol')); // "symbol"

示例解释

undefined：

let a;
console.log(typeof a); // "undefined"

boolean：

let b = true;
console.log(typeof b); // "boolean"

number：

let c = 42;
console.log(typeof c); // "number"

string：

let d = 'hello';
console.log(typeof d); // "string"

object（包括数组和 null）：

let e = {};
console.log(typeof e); // "object"let f = [];
console.log(typeof f); // "object"let g = null;
console.log(typeof g); // "object"

function：

let h = function(){};
console.log(typeof h); // "function"

bigint：

let i = BigInt(123);
console.log(typeof i); // "bigint"

symbol：

let j = Symbol('symbol');
console.log(typeof j); // "symbol"

示例应用

在你的代码中，我们可以用 typeof 来检查用户输入的类型，并确保输入的是一个数字：

const pi = 3.14;
let r = prompt('请输入半径：');
r = parseFloat(r); // 将字符串转换为数字if (isNaN(r)) {console.log('请输入一个有效的数字作为半径。');
} else {let circle = pi * r * r;console.log(`半径为 ${r} 的圆的面积是：${circle}`);console.log(`类型检查：radius 是 ${typeof r}，面积是 ${typeof circle}`);
}

在这个示例中，我们使用 typeof 来输出 r 和 circle 的类型，帮助我们确认输入和计算的正确性。

类型转换

理解弱类型语言的特征，掌握显式类型转换的方法

在 JavaScript 中数据被分成了不同的类型，如数值、字符串、布尔值、undefined，在实际编程的过程中，不同数据类型之间存在着转换的关系。

隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 隐式转换</title>
</head>
<body><script> let num = 13 // 数值let num2 = '2' // 字符串// 结果为 132// 原因是将数值 num 转换成了字符串，相当于 '13'// 然后 + 将两个字符串拼接到了一起console.log(num + num2)// 结果为 11// 原因是将字符串 num2 转换成了数值，相当于 2// 然后数值 13 减去 数值 2console.log(num - num2)let a = prompt('请输入一个数字')let b = prompt('请再输入一个数字')alert(a + b);</script>
</body>
</html>

注：数据类型的隐式转换是 JavaScript 的特征，后续学习中还会遇到，目前先需要理解什么是隐式转换(+)。
在 JavaScript 中，数据类型的隐式转换（也称为类型强制转换）指的是 JavaScript 自动将一种数据类型转换为另一种数据类型，以执行特定操作。这种转换可以发生在许多情况下，例如在使用算术运算符 + 时。下面是一些常见的隐式转换场景和示例：

算术运算符 `+`

+ 运算符既可以用于数值相加，也可以用于字符串连接。当操作数中有一个是字符串时，JavaScript 会将另一个操作数转换为字符串，然后执行字符串连接。

示例：

let result1 = 1 + 2; // 数字相加，结果是 3
let result2 = '1' + 2; // 字符串和数字相加，数字被转换为字符串，结果是 '12'
let result3 = 1 + '2'; // 数字和字符串相加，数字被转换为字符串，结果是 '12'
let result4 = '1' + '2'; // 字符串相加，结果是 '12'console.log(result1); // 3
console.log(result2); // '12'
console.log(result3); // '12'
console.log(result4); // '12'

其他运算符

对于其他算术运算符（如 -、*、/ 等），JavaScript 会将操作数转换为数字，然后进行运算。

示例：

let result5 = '5' - 2; // 字符串 '5' 被转换为数字 5，结果是 3
let result6 = '5' * 2; // 字符串 '5' 被转换为数字 5，结果是 10
let result7 = '5' / 2; // 字符串 '5' 被转换为数字 5，结果是 2.5console.log(result5); // 3
console.log(result6); // 10
console.log(result7); // 2.5

比较运算符

比较运算符（如 == 和 !=）会进行类型转换后再进行比较，而严格比较运算符（如 === 和 !==）不会进行类型转换。

示例：

let result8 = '5' == 5; // '5' 被转换为数字 5，结果是 true
let result9 = '5' === 5; // 类型不同，不进行转换，结果是 falseconsole.log(result8); // true
console.log(result9); // false

布尔上下文

在布尔上下文中（如条件语句中），非布尔值会被转换为布尔值。以下值会被转换为 false：false、0、-0、0n、""、null、undefined 和 NaN。其他值会被转换为 true。

示例：

let result10 = Boolean(0); // false
let result11 = Boolean(''); // false
let result12 = Boolean(1); // true
let result13 = Boolean('hello'); // trueif ('hello') {console.log('This is true!'); // This will be printed
}console.log(result10); // false
console.log(result11); // false
console.log(result12); // true
console.log(result13); // true

对象到原始值的转换

当对象参与运算时，JavaScript 会尝试将对象转换为原始值。具体的转换过程取决于对象的 toString 和 valueOf 方法。

示例：

let obj = {toString() {return '42';}
};let result14 = obj + 1; // 对象被转换为字符串 '42'，然后进行字符串连接，结果是 '421'console.log(result14); // '421'

总结

JavaScript 中的隐式转换有时会导致意想不到的结果，因此在编写代码时需要小心。为了避免潜在的问题，建议尽量使用显式转换，如使用 Number()、String() 和 Boolean() 函数来明确转换类型，并使用严格比较运算符 === 和 !== 来避免不必要的类型转换。

显式转换

编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。

Number

通过 Number 显示转换成数值类型，当转换失败时结果为 NaN（Not a Number）即不是一个数字。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 隐式转换</title>
</head>
<body><script>let t = '12'let f = 8// 显式将字符串 12 转换成数值 12t = Number(t)// 检测转换后的类型// console.log(typeof t);console.log(t + f) // 结果为 20// 并不是所有的值都可以被转成数值类型let str = 'hello'// 将 hello 转成数值是不现实的，当无法转换成// 数值时，得到的结果为 NaN （Not a Number）console.log(Number(str))</script>
</body>
</html>

Number(), parseInt(), 和 parseFloat() 是 JavaScript 中用于将字符串转换为数字的三种常用方法。它们各自有不同的用途和行为。下面是它们的详细解释和用法：

`Number()`

Number() 函数用于将一个值转换为数字类型。如果转换失败，则返回 NaN（表示不是一个数字）。

用法：

let num1 = Number('123');       // 123
let num2 = Number('123.45');    // 123.45
let num3 = Number('abc');       // NaN
let num4 = Number(true);        // 1
let num5 = Number(false);       // 0
let num6 = Number(null);        // 0
let num7 = Number(undefined);   // NaN

特点：

转换布尔值：true 转换为 1，false 转换为 0。
转换 null 为 0，undefined 转换为 NaN。
如果字符串包含非数字字符（除了小数点），转换结果为 NaN。

`parseInt()`

parseInt() 函数用于将字符串转换为整数。它解析一个字符串参数，并返回一个指定基数的整数。

用法：

let num1 = parseInt('123');      // 123
let num2 = parseInt('123.45');   // 123
let num3 = parseInt('abc');      // NaN
let num4 = parseInt('123abc');   // 123
let num5 = parseInt('0x10');     // 16 (16进制)
let num6 = parseInt('10', 2);    // 2 (2进制)

特点：

只解析字符串中的整数部分，忽略小数部分。
忽略前导空格。
如果字符串以 0x 开头，默认使用 16 进制。
可以指定基数（进制）作为第二个参数，例如 parseInt('10', 2) 将字符串 10 解析为二进制数 2。

`parseFloat()`

parseFloat() 函数用于将字符串转换为浮点数。它解析一个字符串参数，并返回一个浮点数。

用法：

let num1 = parseFloat('123');        // 123
let num2 = parseFloat('123.45');     // 123.45
let num3 = parseFloat('abc');        // NaN
let num4 = parseFloat('123abc');     // 123
let num5 = parseFloat('123.45.67');  // 123.45 (只解析第一个小数点部分)

特点：

解析字符串中的浮点数，返回浮点数。
忽略前导空格。
只解析第一个小数点及其后的数字，后续的小数点和字符被忽略。

示例对比

以下是这三种方法的使用示例：

let str = '123.45abc';let num1 = Number(str);       // NaN，因为字符串包含非数字字符
let num2 = parseInt(str);     // 123，解析整数部分，忽略小数和后续字符
let num3 = parseFloat(str);   // 123.45，解析浮点数部分，忽略后续字符console.log(`Number: ${num1}`);     // 输出 "Number: NaN"
console.log(`parseInt: ${num2}`);   // 输出 "parseInt: 123"
console.log(`parseFloat: ${num3}`); // 输出 "parseFloat: 123.45"

应用场景

Number()：用于严格的数值转换，当需要确保整个字符串都是数字时使用。
parseInt()：用于将字符串解析为整数，特别是当字符串包含整数部分时。
parseFloat()：用于将字符串解析为浮点数，特别是当字符串包含小数部分时。

理解这三种方法的不同用途和特点，可以帮助你在处理字符串和数字转换时选择合适的方法。如果你有更多问题或需要进一步的解释，请告诉我！

算术运算符优先级

JavaScript 中的算术运算符有特定的优先级，决定了在表达式中它们的计算顺序。了解这些优先级可以帮助你正确地书写和理解复杂的表达式。以下是 JavaScript 中常见算术运算符的优先级，从高到低列出：

括号 ()：优先级最高，用于明确表达式的计算顺序。

let result = (2 + 3) * 4; // 20，而不是 2 + (3 * 4) = 14

递增 ++ 和递减 --（前缀形式）：

let a = 1;
let b = ++a; // a 变成 2，b 也是 2

一元正 + 和一元负 -：用于单个操作数。
```
let a = -5;
let b = +a; // -5
```

递增 ++ 和递减 --（后缀形式）：

let a = 1;
let b = a++; // b 是 1，a 变成 2

乘法 *，除法 / 和取模 %：

let result = 2 * 3 / 4 % 5; // (2 * 3) / 4 = 1.5, 1.5 % 5 = 1.5

加法 + 和减法 -：
```
let result = 2 + 3 - 4; // 1
```
关系运算符（例如 >，>=，<，<=）和等号运算符（例如 ==，!=，===，!==）：这些运算符在逻辑表达式中有重要作用，但优先级低于算术运算符。

完整优先级列表

以下是一个更完整的优先级列表，包含算术运算符和其他常用运算符：

成员访问 .：
```
object.property
```
函数调用 ()：
```
myFunction()
```
对象属性访问 []：
```
object['property']
```
new（带参数列表）：
```
new MyConstructor(arg1, arg2)
```
递增 ++ 和递减 --（前缀形式）：
```
++a
--a
```
一元运算符 +，-，~，!：
```
-a
!a
```
乘法 *，除法 /，取模 %：
```
a * b
a / b
a % b
```
加法 + 和减法 -：
```
a + b
a - b
```
位移运算符 <<，>>，>>>：
```
a << b
a >> b
a >>> b
```
关系运算符 <，<=，>，>=：
```
a < b
a <= b
a > b
a >= b
```
等号运算符 ==，!=，===，!==：
```
a == b
a != b
a === b
a !== b
```
按位与 &：
```
a & b
```
按位异或 ^：
```
a ^ b
```
按位或 |：
```
a | b
```
逻辑与 &&：
```
a && b
```
逻辑或 ||：
```
a || b
```
三元运算符 ? :：
```
condition ? expr1 : expr2
```

赋值运算符 =，+=，-=，*=，/=，%=：

a = b
a += b
a -= b
a *= b
a /= b
a %= b

逗号运算符 ,：
```
a, b
```

示例解释

以下是一个示例，展示了这些运算符的优先级：

let a = 10;
let b = 5;
let c = 2;let result = a + b * c; // b * c 先计算，然后再加上 a
console.log(result); // 20let resultWithParens = (a + b) * c; // a + b 先计算，然后乘以 c
console.log(resultWithParens); // 30