TypeScript - 运算符

TypeScript - 运算符

什么是运算符？

运算符（Operators）是执行特定操作的特殊符号或关键字，这些操作作用于一个或多个值，这些值称为操作数（operands）。运算符是操作数据和控制程序流程的基础。

考虑以下表达式：

let sum = 5 + 3; // 结果是 8

在这里，5 和 3 是操作数，+ 是加法运算符，而 = 是赋值运算符。

TypeScript 继承了大多数 JavaScript 的运算符，并将它们分组到以下类别：

• 算术运算符（Arithmetic Operators）
• 比较（关系）运算符（Comparison (Relational) Operators）
• 逻辑运算符（Logical Operators）
• 赋值运算符（Assignment Operators）
• 位运算符（Bitwise Operators）
• 字符串运算符（String Operators）
• 条件（三元）运算符（Conditional (Ternary) Operator）
• 类型运算符（Type Operators）
• 空值合并运算符和可选链运算符（Nullish Coalescing and Optional Chaining Operators）

算术运算符

执行标准的数学计算。假设 let a = 10; let b = 4;

运算符	描述	示例	结果
+	加法	a + b	14
-	减法	a - b	6
*	乘法	a * b	40
/	除法	a / b	2.5
%	取模（余数）	a % b	2
**	幂运算 (ES2016)	a ** b (10^4)	10000
++	自增（加 1）	a++ (post) or ++a (pre)	11
--	自减（减 1）	b-- (post) or --b (pre)	3

比较（关系）运算符

比较两个操作数并返回布尔值 (true 或 false)。假设 let x = 5; let y = '5'; let z = 10;

重要：始终优先使用严格相等/不相等 (===, !==) 而不是宽松相等 (==, !=)，以避免意外的类型转换（type coercion）。

运算符	描述	示例	结果
>	大于	z > x	true
<	小于	x < z	true
>=	大于或等于	x >= 5	true
<=	小于或等于	z <= 5	false
===	严格相等（值和类型）	x === 5	true
===	严格相等	x === y	false (number vs string)
!==	严格不相等（值或类型）	x !== y	true
==	宽松相等（值，经过类型转换后）	x == y	true (string ‘5’ coerced to number 5)
!=	宽松不相等	x != 5	false

逻辑运算符

组合布尔表达式。假设 let p = true; let q = false;

运算符	描述	示例	结果
&&	逻辑与（当两个操作数都为 true 时返回 true）	p && q	false
||	逻辑或（当至少一个操作数为 true 时返回 true）	p || q	true
!	逻辑非（反转布尔值）	!p	false

逻辑运算符使用短路评估（short-circuiting）：&& 如果第一个操作数为 false 则停止评估，|| 如果第一个操作数为 true 则停止评估。

赋值运算符

为变量赋值。

运算符	示例	等同于
=	let count = 10;	简单赋值
+=	count += 5;	count = count + 5;
-=	count -= 2;	count = count - 2;
*=	count *= 3;	count = count * 3;
/=	count /= 4;	count = count / 4;
%=	count %= 3;	count = count % 3;
**=	count **= 2;	count = count ** 2;

位运算符

操作数字的二进制表示形式。在典型的 Web 开发中不太常见，但在特定场景（例如，图形、低级操作）中使用。假设 let A = 5 (0101); let B = 3 (0011);

运算符	描述	示例	结果（二进制）	结果（十进制）
&	按位与（Bitwise AND）	A & B	0001	1
|	按位或（Bitwise OR）	A | B	0111	7
^	按位异或（Bitwise XOR）	A ^ B	0110	6
~	按位非（Bitwise NOT）	~A	…11111010	-6
<<	左移（Left Shift）	A << 1	1010	10
>>	有符号右移（Sign-propagating Right Shift）	A >> 1	0010	2
>>>	无符号右移（Zero-fill Right Shift）	A >>> 1	0010	2

字符串运算符

字符串连接运算符 (+)

将两个字符串连接在一起。

let firstName = "Jane";
let lastName = "Doe";
let fullName = firstName + " " + lastName; // "Jane Doe"
console.log(fullName);

虽然 + 可以工作，但模板字面量（Template Literals）（反引号 `）是一种更现代、更易读的方式，可以在字符串中嵌入表达式：

let city = "Paris";
let population = 2.1;
let description = `The city of ${city} has a population of ${population} million.`;
console.log(description);

条件（三元）运算符 (? :)

用于简单 if...else 语句的简写。condition ? value_if_true : value_if_false

let userAge = 20;
let canVote = userAge >= 18 ? "Yes" : "No"; // canVote will be "Yes"
console.log(`可以投票吗？ ${canVote}`);

类型运算符

运算符	描述	示例
typeof	返回一个字符串，指示未求值操作数的类型。	typeof 42 返回 'number'，typeof 'hello' 返回 'string'
instanceof	检查一个对象是否是特定类或构造函数的实例。	myDate instanceof Date 如果 myDate 是使用 new Date() 创建的，则返回 true

现代运算符 (ES2020+)

可选链运算符 (?.)

安全地访问可能为 null 或 undefined 的对象的属性，而不会导致错误。如果 ?. 之前的链中任何一部分是 null 或 undefined，表达式会短路并返回 undefined。

interface User {
  name: string;
  address?: {
    street?: string;
    city: string;
  };
}

const user1: User = { name: "Alice", address: { city: "London" } };
const user2: User = { name: "Bob" };

const street1 = user1.address?.street; // 安全访问 -> undefined (street 不存在)
const street2 = user2.address?.street; // 安全访问 -> undefined (address 不存在)
// const street3 = user2.address.street; // 这将导致运行时错误！

console.log(`用户 1 街道: ${street1}`);
console.log(`用户 2 街道: ${street2}`);

空值合并运算符 (??)

当表达式为 null 或 undefined 时，提供一个默认值。与 || (逻辑或) 不同，它只对 null 或 undefined 生效，而不会对 0、'' 或 false 等其他假值（falsy values）生效。

let volume: number | null | undefined = 0;
let configVolume = volume ?? 100; // configVolume 是 0（因为 0 不是 null 或 undefined）

let userSetting: string | null = null;
let defaultSetting = "Default";
let activeSetting = userSetting ?? defaultSetting; // activeSetting 是 "Default"

// 与 || 比较
let oldConfigVolume = volume || 100; // oldConfigVolume 是 100（因为 0 是假值）

console.log(`配置音量 (??): ${configVolume}`);
console.log(`活动设置 (??): ${activeSetting}`);
console.log(`旧配置音量 (||): ${oldConfigVolume}`);