迹忆客 专注技术分享

当前位置:主页 > 学无止境 > 编程语言 > TypeScript >

TypeScript 中的三元运算符

作者:迹忆客 最近更新:2023/03/12 浏览次数:

在本文中,我们将简要介绍 TypeScript 中的不同运算符,并讨论三元运算符以及如何使用它们。

TypeScript 运算符

软件应用程序旨在处理数据。因此,他们设计了一种对这些数据执行不同操作的方法。

每个操作都使用一个或多个数据值并生成最终结果。这些操作可以分为不同的组。

TypeScript 中的操作数和运算符

通常,运算符对至少一个称为操作数的数据值进行操作。例如,在表达式 500 + 200 中,值 500200 是两个操作数,而+ 是运算符。

在 TypeScript 中可以看到几个运算符。这些可以根据每个运算符操作的性质进行分组,例如算术、逻辑、按位、关系等。

此外,可以根据每个运算符期望的操作数数量对这些运算符进行分组。二元运算符有两个操作数,如下所示。

例子:

x * y
20 / 2

一元运算符只接受一个操作数。

例子:

x++
y--

TypeScript 语言支持对三个操作数进行操作的三元运算符;它是 if...else 语法的缩短格式。我们称之为 TypeScript 条件运算符。

在 TypeScript 中使用三元运算符

TypeScript 条件运算符采用三个操作数。首先是要评估的条件;它可以被识别为通常的 if...else 语法中的 if() 部分。

接下来的两个操作数是要根据评估条件结果执行的两个表达式。因此,第二个操作数是当条件评估为时要执行的表达式。

否则,返回第三个操作数表达式。

语法:

<your_condition> ? <expression_A> : <expression_B>

其中,

条件运算符是 TypeScript 语言中唯一可用的三元运算符。

让我们编写一个 TypeScript 代码来检查用户的年龄,它将根据该年龄返回一条消息。首先,我们将使用普通的 if...else 编写条件逻辑。

const MAX_ALLOWED_AGE = 18;
let userAge = 15;
let finalMessage = '';

if( userAge >= MAX_ALLOWED_AGE ) {
    finalMessage = 'You are allowed to this site';
} else {
    finalMessage = 'Get Back!!'
}

console.log(finalMessage);

输出:

TypeScript 三元运算符输出 1

使用三元运算符可以更紧凑地编写相同的逻辑。

const MAX_ALLOWED_AGE = 18;
let userAge = 15;
let finalMessage = userAge >= MAX_ALLOWED_AGE ? 'You are allowed to this site' : 'Get Back!!';

console.log(finalMessage);

你将获得与上述 if...else 逻辑相同的输出。这比 if...else 语法的行数更少,并且更简洁。

在 TypeScript 中使用三元运算符实现嵌套条件

三元运算符不限于单个条件。它还支持多种条件。

让我们看看嵌套的 if...else 条件逻辑,如下所示。

let studentMark = 68;
const GRADE_A_MARK = 75;
const GRADE_B_MARK = 61;
let finalMessage = '';

if( studentMark >= GRADE_A_MARK ) {
    finalMessage = 'Great work!';
} else if(studentMark >= 61 && studentMark < 75) {
    finalMessage = 'Good work!';
} else {
    finalMessage = 'Study more!!!';
}

console.log(finalMessage);

输出:

TypeScript 三元运算符输出 2

让我们使用三元运算符编写上面的嵌套条件。

let studentMark = 68;
const GRADE_A_MARK = 75;
const GRADE_B_MARK = 61;
let finalMessage = studentMark >= GRADE_A_MARK ? 'Great work!' : studentMark >= 61 && studentMark < 75 ? 'Good work!' : 'Study more!!!';

console.log(finalMessage);

如果你转换上述 TypeScript 代码并使用节点运行它,你将获得与上述 if...else 情况相同的输出。

建议在代码中使用条件运算符。这是一个使你的代码更清晰的单行表达式。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 TypeScript 中返回一个 Promise

发布时间:2023/03/19 浏览次数:182 分类:TypeScript

本教程讨论如何在 TypeScript 中返回正确的 Promise。这将提供 TypeScript 中 Returns Promise 的完整编码示例,并完整演示每个步骤。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便