JS三元判断的表达式详解

小蓝 • 2025-01-01 11:06 • 编程

在前端开发中，经常需要对数字进行处理，在保证数据的准确性和整齐度的前提下，经常需要在数字前面补0以达到满足视觉效果或格式要求。JS三元表达式可以在实现这一功能的同时，使代码更加简洁。


function formatNumber(num) {
    // 小于10的数字前面补0
    return num < 10 ? '0' + num : num;
}

当num小于10时，返回’0′ + num，否则返回num，这样便可以在数字前面补0。

JS三元表达式是一种特殊的语法，可以快速进行简单的条件判断操作。它由三个部分组成：条件，返回结果1，返回结果2。


var result = condition ? return1 : return2;

如果条件的值为True，返回结果1，否则返回结果2。它的语法结构简单，可以在很多场景中被使用，例如：


var age = 18;
var status = age >= 18 ? '成年人' : '未成年人';
console.log(status); // 成年人

如果age 大于等于 18，变量 status 就会被赋值为字符串‘成年人’；否则 status 则被赋值为字符串‘未成年人’。

JS三元表达式是JS中的一种简便的条件语句，菜鸟可以借助三元表达式来进行一些简单的判断操作。


var age = 18;
var status = age >= 18 ? '成年人' : '未成年人';
console.log(status); // 成年人

上述代码中，如果age 大于等于 18，则变量 status 就会被赋值为字符串 “成年人”；否则 status 则被赋值为字符串 “未成年人”。

三元表达式的语法非常简单：condition ? exprIfTrue : exprIfFalse。


var a = 10; 
var b = 20; 
var c = a > b ? a : b; 
console.log(c); // 20

这里，条件为 a > b，如果为真，返回 a，否则返回 b。

当条件表达式比较简单时，使用三目运算符比if语句更为简洁。


let test_value = 20;
console.log(test_value === 20 ? 'Yes' : 'No'); // Yes

以上代码中，如果test_value等于20，则返回‘Yes’；否则返回‘No’。

三元表达式可以进行嵌套使用，从而可以满足更多复杂的判断逻辑。


let a = 1;
let b = 2;
console.log(a === 1 ? (b === 2 ? 'Yes' : 'No') : 'No'); // Yes

以上代码中，如果a等于1，再判断b是否等于2。如果以上两种情况都为真，则返回‘Yes’。

三元表达式的语法格式为：条件表达式 ? 结果1 ：结果2。


let a = 1;
let b = 2;
console.log(a === 1 ? 'Yes' : 'No'); // Yes
console.log(b === 3 ? 'Yes' : 'No'); // No

以上代码中，如果a等于1，则返回‘Yes’；如果b等于3，则返回‘No’。

使用三元表达式比较三个数可以使用多个三元表达式的嵌套，根据逻辑关系判断大小，但是过多的嵌套会影响代码的可读性，所以不建议使用。


let a = 10;
let b = 20;
let c = 30;
let max = a > b ? a : b;
max = max > c ? max : c;
console.log(max); // 30

以上代码中，分别比较a、b、c的大小，获取最大值，并将其赋值给变量max。

三元表达式可以包含多个表达式，使用逗号分隔。在这种情况下，每个表达式都将按照顺序执行。


let a = 10;
let result = a > 5 ? (a += 10, '大于5') : (a += 20, '小于等于5');
console.log('a:', a); // 20
console.log('result:', result); // 小于等于5

以上代码中，先判断a是否大于5，如果大于5，a就会增加10，并返回‘大于5’；否则a会增加20，同时返回‘小于等于5’。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/304994.html