当前位置：首页 > news >正文

TypeScript中？和！号用法

news 2025/6/9 6:26:42

在ECMAScript中，？和！号有多种使用场景：

1、？号的使用场景

1.1、三元运算

三元运算是最常见的？号一种用法：表达式1？表达式2：表达式3

let age = 20;
let status = (age >= 18) ? "成年人" : "未成年人";
console.log(status); // 输出：成年人

1.2、可选属性 / 可选参数

在ECMAScript2020版本中引入在对象类型定义（尤其是 TypeScript 中）和函数参数中，? 表示该属性或参数是可选的。
在对象类型中：

interface Person {name: string;age?: number; // 可选属性
}

在函数参数中：

function info(name: string, age:number , sex?: string) {console.log(`${name}, ${age} , ${sex || '保密'}`);
}

注意：这种用法属于 TypeScript 或 ES2020+ 的扩展，并非原生 JavaScript 运行时行为。

1.3、可选链操作符

用于安全地访问嵌套对象的属性，避免因为某个中间属性为 null 或 undefined 而导致错误。

user?.name
user?.[sex]
user?.[address]
func?.(args)

let user = {name: '张无忌',address: '光明顶',fn: () => { console.log('fn') },company: {name: '武当派',address: '武当山',},
};console.log(user.name); // 张无忌
console.log(user['address']); // 光明顶
console.log(user.fn?.()); // fn
console.log(user.company?.name); // 武当派
console.log(user.company?.address); // 武当山
console.log(user.company?.work); // 不会报错，输出 undefined

2、！号的使用场景

2.1、逻辑非运算符

这是最常见的！号用法：将一个值转换为布尔类型并取反。

console.log(!true);   // false
console.log(!false);  // true
console.log(!"hello"); // false（字符串为真值）
console.log(!"");     // true（空字符串为假值）

2.2、非空断言操作符

告诉类型检查器某个值不可能是 null 或 undefined，【TypeScript 特有】

let element!: HTMLElement;
element!.style.color = "red"; // 告诉编译器这里一定不是 null/undefined

注意：这是 TypeScript 的特性，JavaScript 本身不支持。

2.3、立即调用函数表达式（IIFE）前的

!function() {console.log("IIFE");
}();

这里的 ! 是为了让函数表达式被立即执行。它不是必须的，但可以避免语法错误，也可以使用 void、+ 等其他一元运算符达到类似效果。

3、总结

符号	用法	含义	所属标准
`?`	`cond ? a : b`	三元运算	JS标准
`?`	`ojb?.prop`	可选链操作符	ES2020标准
`?`	`param?: type`	可选参数 (TS)	TypeScript标准
`!`	`!value`	逻辑非	JS 标准
`!`	`value!`	非空断言 (TS)	TypeScript标准
`!`	`!function(){}`	IIFE包裹	JS技巧