TypeScript if else

摘要：在本教程中，您将学习关于 TypeScript if...else 语句。

TypeScript if 语句

if 语句根据条件执行语句。如果条件为真，则 if 语句将执行其主体内的语句。

if(condition) {
   // if-statement
}Code language: JavaScript (javascript)

例如，以下语句说明了如何使用 if 语句在 counter 变量的值小于 max 常量的值时增加 counter 变量。

const max = 100;
let counter = 0;

if (counter < max) {
    counter++;
}

console.log(counter); // 1Code language: JavaScript (javascript)

输出

1

在本例中，由于 counter 变量从零开始，因此它小于 max 常量。表达式 counter < max 评估为 true，因此 if 语句执行语句 counter++。

让我们将 counter 变量初始化为 100

const max = 100;
let counter = 100;

if (counter < max) {
    counter++;
}

console.log(counter); // 100Code language: JavaScript (javascript)

输出

100

在本例中，表达式 counter < max 评估为 false。if 语句不执行语句 counter++。因此，输出为 100。

TypeScript if…else 语句

如果希望在 if 语句中的条件评估为 false 时执行其他语句，可以使用 if...else 语句。

if(condition) {
   // if-statements
} else {
  // else statements;
}Code language: JavaScript (javascript)

以下说明了使用 if..else 语句的示例。

const max = 100;
let counter = 100;

if (counter < max) {
    counter++;
} else {
    counter = 1;
}

console.log(counter);Code language: JavaScript (javascript)

输出

1

在本例中，表达式 counter < max 评估为 false，因此 else 分支中的语句执行，该语句将 counter 变量重置为 1。

三元运算符 ?

在实践中，如果有一个简单的条件，可以使用三元运算符 ?: 而不是 if...else 语句来使代码更短，如下所示。

const max = 100;
let counter = 100;

counter < max ? counter++ : counter = 1;

console.log(counter);Code language: JavaScript (javascript)

TypeScript if…else if…else 语句

当您希望根据多个条件执行代码时，可以使用 if...else if...else 语句。

if…else if…else 语句可以有一个或多个 else if 分支，但只有一个 else 分支。

例如

let discount: number;
let itemCount = 11;

if (itemCount > 0 && itemCount <= 5) {
    discount = 5;  // 5% discount
} else if (itemCount > 5 && itemCount <= 10) {
    discount = 10; // 10% discount 
} else {
    discount = 15; // 15%
}

console.log(`You got ${discount}% discount. `)Code language: JavaScript (javascript)

输出

You got 15% discount. 

此示例使用 if...else if...else 语句根据商品数量确定折扣。

如果商品数量小于或等于 5，则折扣为 5%。if 分支中的语句将执行。

如果商品数量小于或等于 10，则折扣为 10%。else if 分支中的语句将执行。

当商品数量大于 10 时，折扣为 15%。else 分支中的语句将执行。

在本例中，假设商品数量始终大于零。但是，如果商品数量小于零或大于 10，则折扣为 15%。

为了使代码更健壮，可以使用另一个 else if 代替 else 分支，如下所示。

let discount: number;
let itemCount = 11;

if (itemCount > 0 && itemCount <= 5) {
  discount = 5; // 5% discount
} else if (itemCount > 5 && itemCount <= 10) {
  discount = 10; // 10% discount
} else if (itemCount > 10) {
  discount = 15; // 15%
} else {
  throw new Error('The number of items cannot be negative!');
}

console.log(`You got ${discount}% discount. `);
Code language: JavaScript (javascript)

输出

You got 15% discount. 

在本例中，当商品数量大于 10 时，折扣为 15%。第二个 else if 分支中的语句将执行。

如果商品数量小于零，则 else 分支中的语句将执行。

总结

• 使用 if 语句根据条件执行代码。
• 如果希望在条件为假时执行代码，则使用 else 分支。最好使用三元运算符 ?: 代替简单的 if...else 语句。
• 使用 if else if...else 语句根据多个条件执行代码。